/* EQLabs design tokens — sourced from the "EQLabs Design System" Claude Design
   project (tokens/colors.css, typography.css, spacing.css, base.css).
   Keep in sync via /design-sync; do not hand-tune values here. */

:root {
  /* ---- Brand (sampled from EQLabsIcon) ---- */
  --purple-500: #a741ff;
  --purple-600: #8f2ff0;
  --purple-700: #6d1fc4;
  --purple-300: #c48bff;
  --purple-100: #efe0ff;
  --purple-50:  #f9f3ff;
  --blue-400:   #6bb6f9;
  --cyan-400:   #35f2ee;
  --cyan-300:   #7bf7f4;
  --cyan-100:   #d6fbfa;

  /* ---- Navy ---- */
  --navy-900: #070c29;
  --navy-800: #0d1338;
  --navy-700: #161d4d;
  --navy-600: #232a63;
  --navy-500: #3a4384;

  /* ---- Neutrals ---- */
  --gray-900: #12162b;
  --gray-700: #3d4360;
  --gray-500: #6b7194;
  --gray-300: #bcc0d6;
  --gray-200: #dee1ee;
  --gray-100: #eef0f7;
  --gray-50:  #f7f8fc;
  --white:    #ffffff;

  /* ---- Fixed brand aliases ---- */
  --brand: var(--purple-500);
  --brand-ink: var(--purple-700);
  --accent: var(--cyan-400);

  /* ---- Semantic (light theme) ----
     Every themeable color MUST resolve through this layer. Components must not
     reference raw palette values (--white, --purple-700, …) for surfaces or
     text, or they cannot flip in dark mode. */
  color-scheme: light;

  --text-heading: var(--navy-900);
  --text-body: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-on-brand: var(--white);
  --text-link: var(--purple-600);
  --text-link-hover: var(--purple-700);
  /* Brand color as used for *text on a page surface* — distinct from
     --brand-ink, which is the fixed brand value and must not shift. */
  --text-brand: var(--purple-700);
  --text-wordmark: var(--navy-700);
  --text-nav: var(--gray-700);
  --text-nav-active: var(--purple-700);
  /* Section eyebrows: a deeper cyan than the accent, for legibility on white. */
  --text-eyebrow: #0891b2;

  --surface-page: var(--white);
  --surface-subtle: var(--gray-50);
  --surface-card: var(--white);
  --surface-inverse: var(--navy-900);
  --surface-brand-subtle: var(--purple-50);
  --surface-header: var(--white);
  --surface-hero: var(--white);
  /* Deeper than --purple-700: sampled from the "Labs" lettering in the logo
     artwork. --purple-700 reads too bright across this full-bleed band. Dark
     theme keeps its own value below — see @dark-palette. */
  --surface-footer: #3e007d;

  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--purple-500);

  /* Theme-dependent *component* values. These live here rather than in
     site.css so that all theme switching happens in one place — site.css then
     needs no media queries or [data-theme] selectors of its own, except for
     asset swaps (content / background-image: url()), which can't be tokenised. */
  --icon-invert: none;
  /* Home hero: the photo crossfade shows through this veil, so the lockup and
     tagline stay legible on any frame. Dark has its own below. */
  --hero-veil: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0.66) 100%);
  --badge-warning-bg: #fdf0d5;
  --badge-warning-fg: #8a5a00;
  --toggle-sun: none;
  --toggle-moon: block;

  /* ---- Typography ---- */
  --font-display: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-body: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 46px;
  --text-4xl: 62px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* Roboto Mono's glyphs don't take negative tracking well. */
  --tracking-tight: 0;
  --tracking-wide: 0.08em;

  /* ---- Spacing, radii, shadows, motion ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(35, 0, 74, 0.08);
  --shadow-md: 0 4px 12px rgba(35, 0, 74, 0.10);
  --shadow-lg: 0 12px 32px rgba(35, 0, 74, 0.16);
  --focus-ring: 0 0 0 3px rgba(167, 65, 255, 0.28);

  --grad-brand: linear-gradient(135deg, #a741ff 0%, #6bb6f9 55%, #35f2ee 100%);
  --grad-brand-radial: radial-gradient(circle at 50% 50%, #35f2ee 0%, #6bb6f9 38%, #a741ff 100%);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-med: 220ms;
}

/* ---- Dark theme ------------------------------------------------------------
   NOT from the design system — hand-authored, so /design-sync must not clobber
   this block. Palette is a deep *purple* base (not neutral black) to stay close
   to the current Canva site's dark direction, which reviewers preferred.
   Only the semantic layer is overridden; brand values above are untouched.
   Body/muted text measure ≥7:1 against the page surface (WCAG AA, and AAA for
   body copy).

   Dark switches on two different ways, so the palette is declared TWICE:
     1. the OS preference, for a visitor who has expressed no choice — this
        path needs no JavaScript, so dark still works if theme.js is blocked;
     2. an explicit choice, which theme.js records as <html data-theme="…">.
   The two lists must stay identical. build.mjs asserts that on every build and
   fails on drift, so do not "fix" a mismatch by editing only one. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* @dark-palette */
    color-scheme: dark;
    --text-heading: var(--white);
    --text-body: #d8d2ec;
    --text-muted: #9d94c2;
    --text-link: var(--purple-300);
    --text-link-hover: var(--cyan-300);
    --text-brand: var(--purple-300);
    --text-wordmark: var(--white);
    --text-nav: #b8b0da;
    --text-nav-active: var(--purple-300);
    --text-eyebrow: var(--cyan-400);
    --surface-page: #0a0620;
    --surface-subtle: #100a2e;
    --surface-card: #16103e;
    --surface-inverse: #1d1252;
    --surface-brand-subtle: #181040;
    --surface-header: #0a0620;
    --surface-hero: #0a0620;
    --surface-footer: #24156a;
    --border-default: #2a1f60;
    --border-strong: #3a2b7e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.60);
    --icon-invert: invert(1);
    --hero-veil: radial-gradient(ellipse at center, rgba(10, 6, 32, 0.9) 0%, rgba(10, 6, 32, 0.8) 55%, rgba(10, 6, 32, 0.68) 100%);
    --badge-warning-bg: #3a2a05;
    --badge-warning-fg: #f5c877;
    --toggle-sun: block;
    --toggle-moon: none;
    /* @end-dark-palette */
  }
}
:root[data-theme="dark"] {
  /* @dark-palette */
  color-scheme: dark;
  --text-heading: var(--white);
  --text-body: #d8d2ec;
  --text-muted: #9d94c2;
  --text-link: var(--purple-300);
  --text-link-hover: var(--cyan-300);
  --text-brand: var(--purple-300);
  --text-wordmark: var(--white);
  --text-nav: #b8b0da;
  --text-nav-active: var(--purple-300);
  --text-eyebrow: var(--cyan-400);
  --surface-page: #0a0620;
  --surface-subtle: #100a2e;
  --surface-card: #16103e;
  --surface-inverse: #1d1252;
  --surface-brand-subtle: #181040;
  --surface-header: #0a0620;
  --surface-hero: #0a0620;
  --surface-footer: #24156a;
  --border-default: #2a1f60;
  --border-strong: #3a2b7e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.60);
  --icon-invert: invert(1);
  --hero-veil: radial-gradient(ellipse at center, rgba(10, 6, 32, 0.9) 0%, rgba(10, 6, 32, 0.8) 55%, rgba(10, 6, 32, 0.68) 100%);
  --badge-warning-bg: #3a2a05;
  --badge-warning-fg: #f5c877;
  --toggle-sun: block;
  --toggle-moon: none;
  /* @end-dark-palette */
}

/* ---- Base element styles ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
code, pre { font-family: var(--font-mono); }
img { max-width: 100%; }