/*
 * Design tokens — Midnight Indigo design system, migrated from the approved
 * v8 SEO launch reference (Docs/AIMetaClean_Midnight_Indigo_Updated_v8_SEO_Launch.html).
 * This is the single source of color/spacing/etc. values; components must
 * reference these tokens rather than hard-coding hex/px values.
 *
 * Variable *names* are kept stable from the prior (v2) token set on purpose —
 * every component file already consumes these names throughout the app, so
 * this migration is a values-only reskin, not a rename. Only the actual
 * colors/radii/fonts changed. See Docs/IMPLEMENTATION_PLAN.md for the design
 * migration notes.
 *
 * Dark is the default theme; a full light theme is defined below under
 * html[data-theme="light"] (added as part of this migration — the app was
 * dark-only before).
 */
:root {
  --bg: #070a12;
  --bg-deep: #05070d;
  --text: #f7f8fc;
  --t2: #a7b1c5;
  /* --t3/--t4 kept contrast-checked against --surf per the original ADR-006
     rationale (WCAG AA 4.5:1 for normal text) rather than using the design
     reference's literal --text-3 value verbatim, since that value was tuned
     against the reference's own --surface, not this app's. */
  --t3: #96a0b5; /* >=4.5:1 on --surf */
  --t4: #7e879c; /* >=4.5:1 on --surf */
  --bg-soft: #0a0f1b;
  --surf: #0e1422;
  --surf2: #121a2b;
  --surf3: #0b111d;
  /* Translucent surface used by the sticky header's chip buttons and the
     scrolled-header backdrop (the reference's --surface-glass). */
  --surf-glass: rgba(14, 20, 34, 0.76);
  --brd: #23304a;
  --brd2: #2a3650;

  /* Per-section background tints (the reference's --section-1..5). These are
     deliberately their own scale rather than reuses of --bg/--surf3/--bg-deep:
     each marketing section band has a distinct value in the design, and
     approximating them with the nearest existing token visibly flattened the
     section-to-section separation. */
  --section-1: #0a0f1b;
  --section-2: #090d17;
  --section-3: #0b0d18;
  --section-4: #07100f;
  --section-5: #080b12;
  --accent: #6f7cff;
  --accent2: #8b94ff;
  --accent-a: rgba(111, 124, 255, 0.12);
  --accent-b: rgba(111, 124, 255, 0.06);
  --ok: #2bd7a4;
  --ok-a: rgba(43, 215, 164, 0.1);
  --warn: #f0b84b;
  --err: #ef6b6b;
  --focus-ring: #a7b1ff;
  --glow: rgba(111, 124, 255, 0.18);

  /* New, purely additive — used by use-case card icon accents on the
     marketing sections (plan-equivalent: no existing component needs them). */
  --orange: #ff7a55;
  --agency: #58a6ff;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 96px;

  --container-workspace: 1080px;
  --container-content: 1240px;
  --container-narrow: 800px;
  /* Total left+right margin budget subtracted from the container-width
     formula (min(--container-content, calc(100% - --container-margin))
     in base.css/header.css) — 48px (24px/side) at desktop, redefined to
     28px (14px/side) below 820px in base.css, matching the reference's
     own :root{--container:...} breakpoint override exactly. */
  --container-margin: 48px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --z-header: 100;
  --z-mobile-menu: 97;
  --z-mobile-backdrop: 96;
  --z-drawer-overlay: 200;
  --z-drawer: 201;
  --z-toast: 300;

  --font-heading: 'Sora', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  /* Alias kept for any rule still written against the old single-font
     token name — resolves to the body face. */
  --font-sans: var(--font-body);

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;
}

html[data-theme='light'] {
  --bg: #f7f8fc;
  --bg-deep: #e8edf6;
  --text: #111827;
  --t2: #58657a;
  --t3: #556274; /* contrast-checked >=4.5:1 on light --surf, same rationale as dark */
  --t4: #5a6779; /* >=4.5:1 on light --surf (the reference file's own value only cleared ~3.4:1) */
  --bg-soft: #eef2f8;
  --surf: #ffffff;
  --surf2: #f4f6fb;
  --surf3: #e9eef7;
  --surf-glass: rgba(255, 255, 255, 0.86);
  --brd: #d9e1ee;
  --brd2: #c8d3e4;

  --section-1: #f1f4fa;
  --section-2: #f8fafd;
  --section-3: #f2f1fc;
  --section-4: #eef8f4;
  --section-5: #f7f8fc;
  --accent: #5b67f1;
  --accent2: #7580f5;
  --accent-a: rgba(91, 103, 241, 0.1);
  --accent-b: rgba(91, 103, 241, 0.05);
  --ok: #0e9f75;
  --ok-a: rgba(14, 159, 117, 0.09);
  --warn: #c88717;
  --err: #d94f4f;
  --focus-ring: #5b67f1;
  --glow: rgba(91, 103, 241, 0.14);
  --orange: #f97316;
  --agency: #2563eb;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --ease: linear;
  }
}