html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--tq-bg);
  color: var(--tq-text);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-body);
  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;
  --tq-text-tertiary: #64646e;
  --tq-text-on-accent: #ffffff;

  /* Accent */
  --tq-accent: #1e40af;
  --tq-accent-fill: #1e40af;
  --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);
  --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;
  }
}