/* Spectio docs theme. Values come from design/tokens/spectio-tokens.css (v0.2).
   All landing-page styles live here: index.md carries no inline CSS (documentation-system.md §2). */

:root {
  --sp-indigo-500: #5A4FCF; --sp-violet-50: #F6F2FE; --sp-violet-500: #8B5CF6; --sp-violet-600: #7750D4;
  --sp-violet-700: #6344B2; --sp-coral-500: #EC5F87; --sp-amber-500: #F9A947;
  --sp-ink-0: #F7F7FB; --sp-ink-50: #EEEFF5; --sp-ink-100: #DFE1EA; --sp-ink-400: #6E7287;
  --sp-ink-500: #4D5065; --sp-ink-600: #33364A; --sp-ink-900: #0F1020;
  --sp-ok: #1F9D63; --sp-run: #3B82F6; --sp-wait: #D9890B; --sp-bad: #DC3B3B;
}

/* Material colour roles */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--sp-violet-600);
  --md-primary-fg-color--light: var(--sp-violet-500);
  --md-primary-fg-color--dark: var(--sp-violet-700);
  --md-primary-bg-color: #FFFFFF;
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--sp-coral-500);
  --md-accent-fg-color--transparent: rgba(236, 95, 135, .1);
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--sp-violet-700);
  --sp-surface: #FFFFFF; --sp-surface-subtle: var(--sp-ink-0); --sp-line: var(--sp-ink-100);
  --sp-text: var(--sp-ink-900); --sp-text-2: var(--sp-ink-600); --sp-text-3: var(--sp-ink-500);
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #11121F;
  --md-code-bg-color: #171A2E;
  --md-typeset-a-color: #BEA4FA;
  --sp-surface: #171A2E; --sp-surface-subtle: #1B1E33; --sp-line: #2A2D45;
  --sp-text: #F1F2F8; --sp-text-2: #C4C7D4; --sp-text-3: #9A9EB0;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3, .sp-hero__name, .sp-feature__num { font-family: "Outfit", "Inter", sans-serif; }
.md-header__button.md-logo img { height: 1rem; width: auto; }

/* Status icons used by hooks/progress.py */
.sp-ok { color: var(--sp-ok); } .sp-run { color: var(--sp-run); } .sp-wait { color: var(--sp-wait); }
.sp-bad { color: var(--sp-bad); } .sp-muted { color: var(--sp-ink-400); }

/* ---------- Landing page ---------- */
.md-typeset .sp-section-title { margin: 3.2rem 0 1.2rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.md-typeset .sp-section-title .headerlink { display: none; }

.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.4rem; align-items: center; margin: 1.2rem 0 2rem; }
.sp-hero__brand { display: flex; align-items: flex-end; gap: .9rem; margin-bottom: 1.2rem; }
.md-typeset .sp-hero__emblem { width: 5.6rem; height: auto; margin-bottom: -.25rem; }
.sp-hero__name { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--sp-text); }
.md-typeset .sp-hero__tagline { font-size: 1.15rem; line-height: 1.55; font-weight: 600; color: var(--sp-text); margin: 0 0 1rem; }
.md-typeset .sp-hero__sub { font-size: .8rem; line-height: 1.6; color: var(--sp-text-2); margin: 0 0 1.4rem; }
.md-typeset .sp-hero .md-button { margin: 0 .5rem .5rem 0; border-radius: .4rem; }
.md-typeset .sp-hero__media { margin: 0; }
.md-typeset .sp-hero__media video { width: 100%; height: auto; display: block; border-radius: .6rem; border: 1px solid var(--sp-line); box-shadow: 0 12px 32px rgba(15, 16, 32, .12); }
.md-typeset .sp-hero__media img { border-radius: .6rem; border: 1px solid var(--sp-line); box-shadow: 0 12px 32px rgba(15, 16, 32, .12); }
.md-typeset .sp-hero__media figcaption { font-size: .65rem; color: var(--sp-text-3); margin-top: .5rem; }

.md-typeset .sp-lead { font-size: .95rem; line-height: 1.7; color: var(--sp-text-2); border-left: 3px solid var(--sp-coral-500); padding: .2rem 0 .2rem 1.1rem; max-width: 52rem; }

.sp-eco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.sp-eco__card { border: 1px solid var(--sp-line); border-radius: .5rem; padding: .8rem 1rem; background: var(--sp-surface-subtle); font-size: .8rem; }
.sp-eco__card span { color: var(--sp-text-3); font-size: .72rem; }
.sp-eco__card--later { border-style: dashed; background: transparent; }

.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.md-typeset a.sp-card { display: block; border: 1px solid var(--sp-line); border-radius: .6rem; padding: 1rem 1.1rem; color: var(--sp-text); background: var(--sp-surface); font-size: .82rem; transition: border-color .15s, transform .15s; }
.md-typeset a.sp-card:hover { border-color: var(--sp-violet-500); transform: translateY(-2px); }
.md-typeset a.sp-card span:not(.sp-card__icon):not(.twemoji) { display: block; color: var(--sp-text-3); font-size: .74rem; margin-top: .25rem; line-height: 1.5; }
.md-typeset .sp-card__icon, .md-typeset a.sp-card .twemoji { color: var(--sp-violet-600); margin-right: .35rem; }
.md-typeset .sp-card__icon svg, .md-typeset a.sp-card .twemoji svg { width: 1.15rem; height: 1.15rem; }

.sp-features { display: grid; gap: .2rem; }
.sp-feature { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--sp-line); font-size: .85rem; line-height: 1.65; }
.sp-feature__num { font-size: 1.9rem; font-weight: 700; color: var(--sp-violet-500); letter-spacing: -.02em; }

.sp-waves { display: grid; gap: .45rem; }
.md-typeset a.sp-wave { display: grid; grid-template-columns: 2.6rem 9rem 3rem minmax(0, 1fr); gap: .8rem; align-items: center; color: var(--sp-text); font-size: .76rem; padding: .35rem .2rem; border-radius: .3rem; }
.md-typeset a.sp-wave:hover { background: var(--sp-surface-subtle); }
.sp-wave__id { font-weight: 600; font-family: "JetBrains Mono", monospace; }
.sp-wave__bar { height: .45rem; border-radius: 1rem; background: var(--sp-ink-50); overflow: hidden; }
[data-md-color-scheme="slate"] .sp-wave__bar { background: #2A2D45; }
.sp-wave__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sp-indigo-500), var(--sp-violet-500), var(--sp-coral-500), var(--sp-amber-500)); }
.sp-wave__count { color: var(--sp-text-3); font-variant-numeric: tabular-nums; }
.sp-wave__title { color: var(--sp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media screen and (max-width: 60em) {
  .sp-hero { grid-template-columns: minmax(0, 1fr); }
  .sp-cards, .sp-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 38em) {
  .sp-cards, .sp-eco { grid-template-columns: minmax(0, 1fr); }
  .sp-hero__name { font-size: 2.3rem; }
  .md-typeset a.sp-wave { grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem; }
  .sp-wave__title { display: none; }
}

/* md_in_html wraps the inline card links in one <p>: let the links be the grid items */
.sp-cards > p { display: contents; }
/* the landing page carries its own title in the hero */
.md-typeset h1:has(+ .sp-hero) { display: none; }
.md-typeset .asciinema-cast { max-width: 54rem; margin: 1.2rem auto; }

.md-typeset .sp-note { font-size: .7rem; color: var(--sp-text-3); margin-top: -.4rem; }
/* outline buttons in dark mode: violet 300 on the dark page passes AA */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) { color: #BEA4FA; border-color: #BEA4FA; }
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover { color: #11121F; background: #BEA4FA; }
/* footer */
.sp-footer { padding-left: .8rem; padding-right: .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: .9rem 0; font-size: .64rem; color: var(--md-footer-fg-color--light); }
.sp-footer a { color: var(--md-footer-fg-color); }