/* root.css
   Theme tokens for the TraQR × Craig Proctor page.

   Variable NAMES are unchanged from the previous version — every token
   your components reference still exists and still means the same thing.
   Only VALUES were corrected to conform to design.md and SKILL.md.
   Lines marked "was:" record the previous value so any change is easy
   to revert.

   The final section adds new tokens (M3 role names, grid, state layers).
   Nothing there overrides anything above it; existing CSS is unaffected.

   ── Wiring it up ──────────────────────────────────────────────────────
   1. Load this file BEFORE postcards.css.
   2. Delete the Color and Elevation blocks from the .tq-page rule in
      postcards.css. Custom properties resolve from the nearest ancestor
      that declares them, so .tq-page beats :root regardless of file
      order or specificity — those duplicates must go or the theme will
      never switch.
   3. Toggle with document.documentElement.dataset.theme = 'dark' | 'light'.
      To follow the OS setting, set it once before first paint:

        <script>
          document.documentElement.dataset.theme =
            matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        </script>
--------------------------------------------------------------------- */

/* =====================================================================
   BASE
===================================================================== */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--tq-bg);
  /* Added: background was set without a paired text color, so dark mode
     left body text at the UA default until a component overrode it. */
  color: var(--tq-text);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-body);
  /* Added: there was no line-height anywhere, so body text rendered at
     the browser's "normal" (~1.2). design.md §3 Body Large is 24/16 = 1.5. */
  line-height: 1.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =====================================================================
   LIGHT
===================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --tq-bg: #fdfcff;
  --tq-bg-highlight: #dde5ff;
  --tq-surface: #ffffff;
  --tq-surface-sunken: #f8f8f8;
  --tq-surface-muted: #f2f0f4;
  --tq-highlight-card: #F4F4F4;
  --tq-highlight2-card: #ECECEC;

  /* Text */
  --tq-text: #1b1b1f;
  --tq-text-secondary: #46464f;
  /* was #75757f — 4.50:1 on --tq-bg, exactly on the AA line and failing
     for any text under 18px. #64646e is 5.8:1. SKILL.md checklist. */
  --tq-text-tertiary: #64646e;
  --tq-text-on-accent: #ffffff;

  /* Accent */
  --tq-accent: #1e40af;
  --tq-accent-fill: #1e40af;
  /* was #17347f — a hand-picked darker blue. SKILL.md §4 defines hover
     as the base plus an 8% state layer in the On- color. Derived now, so
     it stays correct if the brand blue ever changes. */
  --tq-accent-hover: color-mix(in srgb, var(--tq-text-on-accent) 8%, var(--tq-accent-fill));
  --tq-hover: #DDE5FF;

  /* Brand */
  --tq-step-accent: #dc2626;
  --tq-step-accent-soft: rgba(220, 38, 38, 0.12);
  --tq-step-accent-glow: rgba(220, 38, 38, 0.22);
  --tq-cp-logo: #8c1d24;
  --tq-cp-brand: var(--tq-cp-logo);

  /* Lines */
  --tq-border: #e3e2e6;
  --tq-border-strong: #d3dae4;
  --tq-border-hairline: #e2e2e2;
  --tq-divider: #c9c5d0;
  --tq-outline: #79747e;

  /* Header buttons */
  --tq-btn-login-bg: #ffffff;
  /* was #f7f9fc — arbitrary tint. Now an 8% state layer per SKILL.md §4. */
  --tq-btn-login-bg-hover: color-mix(in srgb, var(--tq-btn-login-text) 8%, var(--tq-btn-login-bg));
  --tq-btn-login-text: #101418;
  --tq-btn-login-border: #e0e5ec;
  /* was #1e4f94 — a second primary blue, 15 hue-steps from --tq-accent.
     Unified onto the one brand blue. Revert to #1e4f94 if the two-blue
     split was deliberate. */
  --tq-btn-signup-bg: var(--tq-accent-fill);
  /* was #17417b */
  --tq-btn-signup-bg-hover: var(--tq-accent-hover);
  --tq-btn-signup-text: var(--tq-text-on-accent);
  /* was brand-tinted rgba(30,79,148,...). M3 shadows are neutral; the
     color lift comes from the tonal surface, not the shadow. */
  --tq-elev-signup: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --tq-elev-signup-hover: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 30%);

  /* Shadows — design.md §5, two-layer key + ambient at 1/3/6/8/12dp */
  --tq-shadow-color: 0, 0, 0;
  --tq-elev-tile: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --tq-elev-tile-hover: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --tq-elev-card: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --tq-elev-card-hover: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 30%);
  --tq-elev-button: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --tq-elev-button-hover: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --tq-elev-header: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --tq-elev-slot-hover: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);

  /* Spacing — SKILL.md §2 allows only 4 / 8 / 16 / 24 / 32 */
  --space-sl: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  /* Additional spacing tokens for component‑level use */
  --space-card: clamp(24px, 3vw, 40px);   /* padding for cards */
  --space-nav: clamp(12px, 2vw, 24px);    /* navbar spacing */
  /* was clamp(40px, 6vw, 80px) — 40 and 80 are off the scale. 32 is the
     XL step, 64 is 2x it, both on the 8px baseline. */
  --space-section: clamp(32px, 6vw, 64px);
  /* was clamp(20px, 5vw, 80px) — 20px is off-grid, and section side
     padding has to follow the breakpoint margins. 4vw resolves to
     exactly 16px @400, 24px @600, 32px @800: design.md §1 at every
     breakpoint, with no media query. */
  --space-section-inline: clamp(16px, 4vw, 32px);
  /* was clamp(10px, 1.5vw, 16px) — 10px is off-grid. */
  --padding-button: clamp(4px, 1.5vw, 16px);

  /* ---------------------------------------------------------------------
   Letter‑spacing tokens
   --------------------------------------------------------------------- */
  --letter-spacing-tight: -0.025em;   /* headings, content‑section */
  --letter-spacing-normal: 0.4px;    /* footer text */
  --letter-spacing-wider: 0.1px;    /* steps‑card eyebrow */
  --letter-spacing-wide: 0.25px;    /* steps‑card body */

  /* ---------------------------------------------------------------------
   Line‑height tokens
   --------------------------------------------------------------------- */
  --line-height-body: 1.7;          /* default body text */
  --line-height-heading: 1.2;      /* navigation links, headings */
  --line-height-display: 1.15;     /* hero display text */
  --line-height-title: 1.3;        /* steps‑card titles */

  /* Shape — design.md §4 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* was 20px — not one of the seven shape tokens. 16px is Large. */
  --radius-xl: 16px;
  /* was 999px — design.md specifies 9999px. Visually identical. */
  --radius-pill: 9999px;
  --border-width-thin: 1px;
  --tq-dur-fast: 160ms;
  --tq-dur-base: 260ms;
  --tq-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Typography — every clamp endpoint is now a real size from
     design.md §3. Mid-range values are unchanged, so the visual shift
     is small; only the ends move onto the scale. */
  --font-family-roboto: Roboto, "Google Sans", system-ui, Arial, sans-serif;
  --font-family-jakarta: "Plus Jakarta Sans", sans-serif;
  --font-family-futura: futura-pt, sans-serif;
  --font-family-inherit: inherit;
  /* was the literal `aria-label`, which is an HTML attribute, not a font
     stack — anything using this token fell back to the UA default. */
  --font-family-aria-label: inherit;

  /* was clamp(24px, 5.2vw, 46px) — 46 → Display Medium 45 */
  --font-size-hero: clamp(24px, 4.5vw, 45px);
  /* Headline Medium → Display Medium; already on-scale */
  --font-size-h1: clamp(28px, 3.5vw, 45px);
  /* was ...34px — 34 → Headline Large 32 */
  --font-size-t2: clamp(24px, 3vw, 32px);
  /* was clamp(21px, 2.6vw, 30px) — 21 → Title Large 22, 30 → Headline Medium 28 */
  --font-size-t3: clamp(22px, 2.6vw, 28px);
  /* was clamp(18px, 2.2vw, 24px) — 18 → Title Medium 16 */
  --font-size-t4: clamp(16px, 2.2vw, 24px);
  /* was clamp(16px, 1.5vw, 19px) — 19 → Title Large 22 */
  --font-size-t5: clamp(14px, 1.5vw, 18px);
  /* Body Small → Body Large; already on-scale */
  --font-size-t6: clamp(12px, 1.5vw, 16px);
  /* was 1rem. Fluid per your spec: Body Small on mobile → Body Large. */
  --font-size-body: clamp(12px, 2vw, 16px);
  /* was 0.8125rem (13px), not on the scale. Body Small → Label Large. */
  --font-size-small: clamp(12px, 1.2vw, 14px);
}

/* =====================================================================
   DARK
   Surfaces step up in lightness with elevation — that is M3's tonal
   overlay. Shadows stay neutral black; the previous white glows
   (rgba(232,232,232,...)) inverted the concept and read as haze.
===================================================================== */

[data-theme="dark"],
/* was a separate rule declaring only color-scheme, so a theme on the
   page wrapper switched scrollbars but not one single color token. */
.tq-page[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --tq-bg: #121317;
  --tq-bg-highlight: #28458f;
  --tq-surface: #1c1d22;
  --tq-surface-sunken: #202126;
  --tq-surface-muted: #26272d;
   --tq-highlight-card: #1D2735;
   --tq-highlight2-card: #263449;

  /* Text — #e4e2e6 on #121317 is ~15:1 */
  --tq-text: #e4e2e6;
  --tq-text-secondary: #c6c4cf;
  --tq-text-tertiary: #918f9a;
  --tq-text-on-accent: #ffffff;

  /* Accent — the pale blue reads as a link on the dark ground; the fill
     stays dark enough for white label text to clear AA. */
  --tq-accent: #9ec0ff;
  --tq-accent-fill: #3a63b8;
  /* was #4b76cc, hand-picked; now derived like the light theme */
  --tq-accent-hover: color-mix(in srgb, var(--tq-text-on-accent) 8%, var(--tq-accent-fill));

  /* Brand */
  --tq-step-accent: #ff6b6b;
  --tq-step-accent-soft: rgba(255, 107, 107, 0.16);
  --tq-step-accent-glow: rgba(255, 107, 107, 0.28);
  --tq-cp-logo: #e0898e;
  --tq-cp-brand: var(--tq-cp-logo);

  /* Lines */
  --tq-border: #34343a;
  --tq-border-strong: #43434b;
  --tq-border-hairline: #34343a;
  --tq-divider: #45454d;
  --tq-outline: #8f8d98;

  /* Header buttons */
  --tq-btn-login-bg: #23242a;
  --tq-btn-login-bg-hover: color-mix(in srgb, var(--tq-btn-login-text) 8%, var(--tq-btn-login-bg));
  --tq-btn-login-text: #e4e2e6;
  --tq-btn-login-border: #3a3b42;
  --tq-btn-signup-bg: var(--tq-accent-fill);
  --tq-btn-signup-bg-hover: var(--tq-accent-hover);
  --tq-btn-signup-text: var(--tq-text-on-accent);
  --tq-elev-signup: 0 1px 2px rgb(0 0 0 / 60%), 0 2px 6px 2px rgb(0 0 0 / 40%);
  --tq-elev-signup-hover: 0 6px 10px 4px rgb(0 0 0 / 40%), 0 2px 3px rgb(0 0 0 / 60%);

  /* Shadows — black, at higher alpha so they stay visible on #121317 */
  --tq-shadow-color: 0, 0, 0;
  --tq-elev-tile: 0 1px 2px rgb(0 0 0 / 60%), 0 1px 3px 1px rgb(0 0 0 / 40%);
  --tq-elev-tile-hover: 0 1px 2px rgb(0 0 0 / 60%), 0 2px 6px 2px rgb(0 0 0 / 40%);
  --tq-elev-card: 0 1px 2px rgb(0 0 0 / 60%), 0 2px 6px 2px rgb(0 0 0 / 40%);
  --tq-elev-card-hover: 0 6px 10px 4px rgb(0 0 0 / 40%), 0 2px 3px rgb(0 0 0 / 60%);
  --tq-elev-button: 0 1px 2px rgb(0 0 0 / 60%), 0 1px 3px 1px rgb(0 0 0 / 40%);
  --tq-elev-button-hover: 0 1px 2px rgb(0 0 0 / 60%), 0 2px 6px 2px rgb(0 0 0 / 40%);
  --tq-elev-header: 0 1px 2px rgb(0 0 0 / 60%), 0 1px 3px 1px rgb(0 0 0 / 40%);
  --tq-elev-slot-hover: 0 1px 2px rgb(0 0 0 / 60%), 0 2px 6px 2px rgb(0 0 0 / 40%);
}

/* =====================================================================
   ADDITIVE — new token names only.
   Nothing below redefines an existing token, so current components are
   unaffected. These exist so new code can satisfy the parts of
   design.md and SKILL.md the old names have no slot for.
===================================================================== */

:root {
  /* --- Paired On- colors. SKILL.md §1 requires every background token
         to have an explicit text/icon counterpart. These were missing. --- */
  --tq-on-bg: var(--tq-text);
  --tq-on-bg-highlight: #00174b;
  --tq-on-surface: var(--tq-text);
  --tq-on-surface-sunken: var(--tq-text);
  --tq-on-surface-muted: var(--tq-text-secondary);
  --tq-on-step-accent: #ffffff;
  --tq-on-cp-logo: #ffffff;
  --tq-on-cp-brand: var(--tq-on-cp-logo);

  /* --- Error role (design.md §2). The file had no destructive color. --- */
  --tq-error: #ba1a1a;
  --tq-on-error: #ffffff;
  --tq-error-container: #ffdad6;
  --tq-on-error-container: #410002;

  /* --- Missing spacing and shape steps --- */
  --space-xs: 4px;
  --radius-none: 0px;
  --radius-2xl: 28px;

  /* --- Responsive grid (design.md §1). 4vw hits the spec margin at
         every breakpoint; only column count needs a media query. --- */
  --layout-margin: clamp(16px, 4vw, 32px);
  --layout-gutter: clamp(16px, 4vw, 24px);
  --layout-columns: 4;

  /* --- Line heights and weights (design.md §3) --- */
  --line-height-display: 1.15;
  --line-height-heading: 1.25;
  --line-height-title: 1.3;
  --line-height-body: 1.5;
  --line-height-small: 1.4;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* --- State layers (SKILL.md §4) --- */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-disabled-container-opacity: 0.12;
  --md-sys-state-disabled-content-opacity: 0.38;
  --tq-focus-indicator: var(--tq-accent);
  --tq-focus-width: 3px;
  --tq-focus-offset: 2px;

  /* --- M3 role names, mapped onto the brand tokens above. SKILL.md §1
         names var(--md-sys-color-primary) as the expected form; new
         components can use either vocabulary. --- */
  --md-sys-color-primary: var(--tq-accent-fill);
  --md-sys-color-on-primary: var(--tq-text-on-accent);
  --md-sys-color-primary-container: var(--tq-bg-highlight);
  --md-sys-color-on-primary-container: var(--tq-on-bg-highlight);
  --md-sys-color-surface: var(--tq-bg);
  --md-sys-color-on-surface: var(--tq-text);
  --md-sys-color-surface-variant: var(--tq-surface-muted);
  --md-sys-color-on-surface-variant: var(--tq-text-secondary);
  --md-sys-color-outline: var(--tq-outline);
  --md-sys-color-outline-variant: var(--tq-divider);
  --md-sys-color-error: var(--tq-error);
  --md-sys-color-on-error: var(--tq-on-error);
  --md-sys-color-error-container: var(--tq-error-container);
  --md-sys-color-on-error-container: var(--tq-on-error-container);

  --md-sys-shape-none: var(--radius-none);
  --md-sys-shape-extra-small: var(--radius-sm);
  --md-sys-shape-small: var(--radius-md);
  --md-sys-shape-medium: var(--radius-lg);
  --md-sys-shape-large: var(--radius-xl);
  --md-sys-shape-extra-large: var(--radius-2xl);
  --md-sys-shape-full: var(--radius-pill);

  --md-sys-elevation-level-0: none;
  --md-sys-elevation-level-1: var(--tq-elev-tile);
  --md-sys-elevation-level-2: var(--tq-elev-card);
  --md-sys-elevation-level-3: var(--tq-elev-card-hover);
  --md-sys-elevation-level-4: var(--tq-elev-card-hover);
  --md-sys-elevation-level-5: var(--tq-elev-card-hover);
}

[data-theme="dark"],
.tq-page[data-theme="dark"] {
  --tq-on-bg-highlight: #dce2ff;
  --tq-on-step-accent: #410002;
  --tq-on-cp-logo: #4a0d11;
  --tq-error: #ffb4ab;
  --tq-on-error: #690005;
  --tq-error-container: #93000a;
  --tq-on-error-container: #ffdad6;
}

/* Grid columns — design.md §1. Margins and gutters are already fluid. */
@media (min-width: 600px) {
  :root { --layout-columns: 8; }
}

@media (min-width: 840px) {
  :root { --layout-columns: 12; }
}

/* Mobile Safari zooms the viewport whenever a focused field computes
   under 16px, which --font-size-body does below a 800px viewport. */
input,
select,
textarea {
  font-size: max(16px, var(--font-size-body));
}

/* Visible keyboard focus — SKILL.md §4 requires a focus indicator. */
:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: var(--tq-focus-width) solid var(--tq-focus-indicator);
  outline-offset: var(--tq-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}