/* ===========================================================================
   Readiness · design tokens
   Election Readiness Quiz · Learn Politics
   ---------------------------------------------------------------------------
   Two layers:
     1. PRIMITIVES  (--rd-green-500 …)  raw values, never change per theme
     2. SEMANTICS   (--rd-text, --rd-correct …)  meanings, remapped in dark
   Only ever reference SEMANTICS in component CSS. If a component needs a
   primitive directly, the system is missing a semantic, so add one.
   =========================================================================== */

:root {
  /* ---------- PRIMITIVES · green (identity, progress, correct) ---------- */
  --rd-green-900: #0A3A23;
  --rd-green-700: #12613C;
  --rd-green-500: #17A05C;
  --rd-green-200: #A9E3C2;
  --rd-green-100: #DFF2E5;
  --rd-green-050: #EFF8F1;
  --rd-green-bright: #2ECC7A;   /* dark-mode green/500 */
  --rd-green-mint: #7FE3A8;     /* on-dark accent + tier 80+ ring */

  /* ---------- PRIMITIVES · violet (progress & personalisation ONLY) ----- */
  --rd-violet-600: #6B4FE0;
  --rd-violet-300: #9C86FF;
  --rd-violet-200: #B9A6FF;
  --rd-violet-100: #EAE5FD;
  --rd-violet-050: #F6F4FE;
  --rd-violet-ink: #3B2593;
  --rd-violet-deep: #241548;    /* tier 60–79 full-bleed */
  --rd-violet-dark-tint: #241A3D;
  /* Violet was the one hue without a dark tint, because the AI block resolves
     to the neutral surface in dark and nothing else needed one. The tier
     ladder does: four tiers where three carry a hue and the fourth goes grey
     stops reading as one set. Sits in the same lightness band as the amber,
     coral and green dark tints. */

  /* ---------- PRIMITIVES · amber (in-progress, gaps, offline) ----------- */
  --rd-amber-500: #DE9A2B;
  --rd-amber-300: #F5C572;
  --rd-amber-200: #E9B45C;
  --rd-amber-100: #FBEFD8;
  --rd-amber-ink: #7A4E0B;
  --rd-amber-ink-2: #96650F;
  --rd-amber-deep: #3A2708;
  --rd-amber-dark-tint: #33270F;

  /* ---------- PRIMITIVES · coral (not-this-one, error) ------------------ */
  --rd-coral-600: #D9534A;
  --rd-coral-400: #F08379;
  --rd-coral-300: #F5A79E;
  --rd-coral-200: #E8A49E;
  --rd-coral-100: #FBE7E4;
  --rd-coral-050: #FDF1EF;
  --rd-coral-line: #F7DCD8;
  --rd-coral-ink: #8F2E27;
  --rd-coral-ink-2: #B03D34;
  --rd-coral-deep: #3E120D;
  --rd-coral-dark-tint: #341815;
  --rd-coral-dark-line: #4A241F;

  /* ---------- PRIMITIVES · neutrals ------------------------------------ */
  --rd-ink: #10211A;
  --rd-ink-2: #3D5249;
  --rd-ink-3: #6E837A;
  --rd-ink-4: #9BADA3;
  --rd-base: #F4F6F2;
  --rd-white: #FFFFFF;
  --rd-line-light: #DCE5DE;
  --rd-line-soft: #EDF1EC;
  --rd-line-strong: #C6D3C9;
  --rd-offset: #E3EDE6;
  --rd-disabled-bg: #EDF1EC;

  /* ---------- PRIMITIVES · dark neutrals ------------------------------- */
  --rd-dark-bg: #0B120E;
  --rd-dark-surface: #131C17;
  --rd-dark-surface-2: #1B2620;
  --rd-dark-line: #2A3830;
  --rd-dark-text: #E8EFE9;
  --rd-dark-text-2: #A3B3A9;
  --rd-dark-text-3: #75857B;
  --rd-dark-text-4: #5F6E64;
  --rd-dark-green-tint: #14301F;
  --rd-dark-ring-track: #1F3A2A;
  --rd-on-green-bright: #06180E;

  /* ---------- TYPE ----------------------------------------------------- */
  --rd-font-display: "Gabarito", "Trebuchet MS", sans-serif;
  --rd-font-text: "Outfit", system-ui, -apple-system, sans-serif;
  --rd-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --rd-text-score: 44px;      --rd-lh-score: 1;      --rd-ls-score: -0.04em;
  --rd-text-score-unit: 44%;  /* the % sign, as a share of the numeral size */
  --rd-text-display: 40px;    --rd-lh-display: 1.05; --rd-ls-display: -0.03em;
  --rd-text-archetype: 27px;  --rd-lh-archetype: 1.1;--rd-ls-archetype: -0.02em;
  --rd-text-question: 22px;   --rd-lh-question: 1.3;
  --rd-text-body: 17px;       --rd-lh-body: 1.5;
  --rd-text-option: 16px;
  --rd-text-explain: 15px;    --rd-lh-explain: 1.6;
  --rd-text-label: 14px;
  --rd-text-meta: 13px;
  --rd-text-source: 11px;     --rd-ls-source: 0;
  --rd-text-eyebrow: 10px;    --rd-ls-eyebrow: 0.12em;

  --rd-weight-light: 300;     /* long explanations */
  --rd-weight-regular: 400;   /* questions, options */
  --rd-weight-medium: 500;    /* labels, buttons */
  --rd-weight-display: 700;   /* Gabarito only */

  /* ---------- SPACE, RADIUS, SIZE -------------------------------------- */
  --rd-space-1: 4px;
  --rd-space-2: 8px;
  --rd-space-3: 12px;
  --rd-space-4: 16px;
  --rd-space-5: 24px;
  --rd-space-6: 32px;
  --rd-space-7: 48px;
  --rd-gutter: 20px;          /* screen edge padding, never less */

  --rd-radius-sm: 10px;
  --rd-radius-md: 16px;
  --rd-radius-lg: 20px;
  --rd-radius-frame: 28px;
  --rd-radius-pill: 999px;

  --rd-target-min: 48px;      /* hit target floor */
  --rd-target-cta: 56px;
  --rd-screen-w: 390px;
  --rd-screen-h: 780px;
  --rd-desktop-col: 480px;    /* desktop = the mobile column, centred */

  /* ---------- ICONS ----------------------------------------------------- */
  /* Five shapes only: ring, dot, check, bar, arrow. All authored on a 24px
     grid. Ring, check and arrow are stroked; dot and bar are filled. */
  --rd-icon-grid: 24px;         /* the authoring viewBox, and the default size */
  --rd-icon-stroke: 1.75px;     /* at 24px */
  --rd-icon-stroke-tight: 2.5px;/* reversed out of a filled 20-22px circle */
  --rd-icon-size-sm: 14px;      /* inside an option dot or verdict dot */
  --rd-icon-cap: round;
  --rd-icon-join: round;

  /* ---------- BRAND ASSETS --------------------------------------------- */
  /* The mark stands alone. No chip, no wordmark, no container. */
  --rd-logo: url("../assets/logo/lp-currentcolor.svg");
  --rd-logo-green: url("../assets/logo/lp-green.svg");
  --rd-logo-white: url("../assets/logo/lp-white.svg");
  --rd-logo-black: url("../assets/logo/lp-black.svg");
  --rd-logo-min: 28px;
  --rd-logo-badge: 58px;        /* on the 420px badge preview */
  --rd-logo-clear: 0.5;         /* clear space as a multiple of the mark */

  /* Tier emblems. Struck-metal art, share badge and results header only,
     never in the quiz flow. Bronze ships with its ring lifted. */
  --rd-emblem-watchdog: url("../assets/emblem-watchdog.png");
  --rd-emblem-informed: url("../assets/emblem-informed.png");
  --rd-emblem-learner: url("../assets/emblem-learner.png");
  --rd-emblem-firsttime: url("../assets/emblem-first-time.png");
  --rd-emblem-badge: 84px;      /* on the 1080 badge, and its 420 preview */
  --rd-emblem-result: 40px;     /* above the score ring */

  /* ---------- SHARE BADGE ---------------------------------------------- */
  /* Authored at 1080. Multiply by (size / 1080) for other crops. */
  --rd-badge-size: 1080px;
  --rd-badge-pad: 77px;
  --rd-badge-logo: 150px;
  --rd-badge-emblem: 216px;
  --rd-badge-score: 268px;
  --rd-badge-archetype: 93px;
  --rd-badge-hook: 44px;
  --rd-badge-foot: 36px;

  /* ---------- DEPTH ---------------------------------------------------- */
  --rd-shadow-raised: 6px 6px 0 var(--rd-offset);
  --rd-shadow-frame: 8px 8px 0 var(--rd-offset);
  /* No blur, no spread, no soft shadow anywhere. Dark mode drops the offset
     entirely and expresses raise as surface + 1px line. */

  /* ---------- MOTION --------------------------------------------------- */
  --rd-dur-tap: 160ms;
  --rd-ease-tap: ease-out;
  --rd-dur-move: 320ms;
  --rd-ease-move: cubic-bezier(.2, .8, .2, 1);
  --rd-dur-ring: 800ms;
  --rd-dur-toast: 3000ms;
  --rd-press-shift: 2px;

}

/* =========================================================================
   SEMANTICS · light (default)

   Carried on two selectors rather than one. `:root` is the default, and
   `:root[data-theme="light"]` outweighs the `:root` inside the dark media
   query below on specificity alone, so forcing light works on a machine set
   to dark. Listing both here rather than repeating the values in a separate
   block keeps one definition of light — the file already carries dark twice,
   and a third copy of anything is where drift starts.

   The product DOES set data-theme: index.html forces light for every visitor
   via a blocking script, and the landing screen offers a switcher. The media
   query below is now the fallback for documents that set no attribute at all —
   the gallery, and any embed.
   ========================================================================= */
:root,
:root[data-theme="light"] {
  --rd-bg: var(--rd-base);
  --rd-surface: var(--rd-white);
  --rd-surface-sunken: var(--rd-base);
  --rd-line: var(--rd-line-light);
  --rd-line-hairline: var(--rd-line-soft);
  --rd-text: var(--rd-ink);
  --rd-text-secondary: var(--rd-ink-2);
  --rd-text-muted: var(--rd-ink-3);
  --rd-text-disabled: var(--rd-ink-4);

  --rd-accent: var(--rd-green-500);
  --rd-accent-strong: var(--rd-green-900);
  --rd-accent-hover: var(--rd-green-700);
  --rd-on-accent: var(--rd-white);
  --rd-accent-tint: var(--rd-green-100);
  --rd-accent-tint-soft: var(--rd-green-050);
  --rd-on-accent-tint: var(--rd-green-900);

  --rd-correct: var(--rd-green-500);
  --rd-correct-tint: var(--rd-green-100);
  --rd-correct-ink: var(--rd-green-900);
  --rd-incorrect: var(--rd-coral-600);
  --rd-incorrect-border: var(--rd-coral-200);
  --rd-incorrect-tint: var(--rd-coral-100);
  --rd-incorrect-tint-soft: var(--rd-coral-050);
  --rd-incorrect-line: var(--rd-coral-line);
  --rd-incorrect-ink: var(--rd-coral-ink);

  --rd-ai: var(--rd-violet-600);
  --rd-ai-tint: var(--rd-violet-050);
  --rd-ai-line: var(--rd-violet-100);
  --rd-ai-ink: #4A32B8;

  --rd-warn: var(--rd-amber-500);
  --rd-warn-tint: var(--rd-amber-100);
  --rd-warn-ink: var(--rd-amber-ink);

  --rd-track: var(--rd-offset);
  --rd-surface-disabled: var(--rd-disabled-bg);
  --rd-line-control: var(--rd-line-strong);
  --rd-focus-ring: var(--rd-green-500);
  --rd-raise: var(--rd-shadow-raised);
  --rd-invert-bg: var(--rd-green-900);
  --rd-on-invert: var(--rd-white);
  --rd-on-invert-muted: var(--rd-green-200);
}

/* =========================================================================
   SEMANTICS · dark
   Trigger is system preference only. There is no in-app theme toggle.
   The [data-theme] hook exists for docs/demo pages, not for the product;
   it takes "dark" and "light", and light is defined above.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --rd-bg: var(--rd-dark-bg);
    --rd-surface: var(--rd-dark-surface);
    --rd-surface-sunken: var(--rd-dark-surface-2);
    --rd-line: var(--rd-dark-line);
    --rd-line-hairline: var(--rd-dark-line);
    --rd-text: var(--rd-dark-text);
    --rd-text-secondary: var(--rd-dark-text-2);
    --rd-text-muted: var(--rd-dark-text-3);
    --rd-text-disabled: var(--rd-dark-text-4);

    --rd-accent: var(--rd-green-bright);
    --rd-accent-strong: var(--rd-green-bright);
    --rd-accent-hover: var(--rd-green-mint);
    --rd-on-accent: var(--rd-on-green-bright);
    --rd-accent-tint: var(--rd-dark-green-tint);
    --rd-accent-tint-soft: var(--rd-dark-green-tint);
    --rd-on-accent-tint: var(--rd-green-mint);

    --rd-correct: var(--rd-green-bright);
    --rd-correct-tint: var(--rd-dark-green-tint);
    --rd-correct-ink: var(--rd-dark-text);
    --rd-incorrect: var(--rd-coral-400);
    --rd-incorrect-border: #5C3A36;
    --rd-incorrect-tint: var(--rd-coral-dark-tint);
    --rd-incorrect-tint-soft: var(--rd-coral-dark-tint);
    --rd-incorrect-line: var(--rd-coral-dark-line);
    --rd-incorrect-ink: #F5C0BA;

    --rd-ai: var(--rd-violet-300);
    --rd-ai-tint: var(--rd-dark-surface);
    --rd-ai-line: var(--rd-dark-line);
    --rd-ai-ink: var(--rd-violet-200);

    --rd-warn: var(--rd-amber-200);
    --rd-warn-tint: var(--rd-amber-dark-tint);
    --rd-warn-ink: var(--rd-amber-200);

    --rd-track: var(--rd-dark-surface-2);
    --rd-surface-disabled: var(--rd-dark-surface-2);
    --rd-line-control: var(--rd-dark-text-4);
    --rd-focus-ring: var(--rd-green-bright);
    --rd-raise: none;                        /* offset shadows read as dirt on dark */
    --rd-invert-bg: var(--rd-dark-green-tint);
    --rd-on-invert: var(--rd-dark-text);
    --rd-on-invert-muted: var(--rd-dark-text-2);
  }
}

[data-theme="dark"] {
  --rd-bg: var(--rd-dark-bg);
  --rd-surface: var(--rd-dark-surface);
  --rd-surface-sunken: var(--rd-dark-surface-2);
  --rd-line: var(--rd-dark-line);
  --rd-line-hairline: var(--rd-dark-line);
  --rd-text: var(--rd-dark-text);
  --rd-text-secondary: var(--rd-dark-text-2);
  --rd-text-muted: var(--rd-dark-text-3);
  --rd-text-disabled: var(--rd-dark-text-4);
  --rd-accent: var(--rd-green-bright);
  --rd-accent-strong: var(--rd-green-bright);
  --rd-accent-hover: var(--rd-green-mint);
  --rd-on-accent: var(--rd-on-green-bright);
  --rd-accent-tint: var(--rd-dark-green-tint);
  --rd-accent-tint-soft: var(--rd-dark-green-tint);
  --rd-on-accent-tint: var(--rd-green-mint);
  --rd-correct: var(--rd-green-bright);
  --rd-correct-tint: var(--rd-dark-green-tint);
  --rd-correct-ink: var(--rd-dark-text);
  --rd-incorrect: var(--rd-coral-400);
  --rd-incorrect-border: #5C3A36;
  --rd-incorrect-tint: var(--rd-coral-dark-tint);
  --rd-incorrect-tint-soft: var(--rd-coral-dark-tint);
  --rd-incorrect-line: var(--rd-coral-dark-line);
  --rd-incorrect-ink: #F5C0BA;
  --rd-ai: var(--rd-violet-300);
  --rd-ai-tint: var(--rd-dark-surface);
  --rd-ai-line: var(--rd-dark-line);
  --rd-ai-ink: var(--rd-violet-200);
  --rd-warn: var(--rd-amber-200);
  --rd-warn-tint: var(--rd-amber-dark-tint);
  --rd-warn-ink: var(--rd-amber-200);
  --rd-track: var(--rd-dark-surface-2);
  --rd-surface-disabled: var(--rd-dark-surface-2);
  --rd-line-control: var(--rd-dark-text-4);
  --rd-focus-ring: var(--rd-green-bright);
  --rd-raise: none;
  --rd-invert-bg: var(--rd-dark-green-tint);
  --rd-on-invert: var(--rd-dark-text);
  --rd-on-invert-muted: var(--rd-dark-text-2);
}

/* =========================================================================
   TIER TOKENS
   Set data-tier on the results screen root and on the share badge.
   ========================================================================= */
[data-tier="watchdog"] { --rd-tier-bleed: var(--rd-green-900);  --rd-tier-ring: var(--rd-green-mint);  --rd-tier-tint: var(--rd-green-100);  --rd-tier-ink: var(--rd-green-900); --rd-tier-emblem: var(--rd-emblem-watchdog); }
[data-tier="informed"] { --rd-tier-bleed: var(--rd-violet-deep);--rd-tier-ring: var(--rd-violet-200);  --rd-tier-tint: var(--rd-violet-100); --rd-tier-ink: var(--rd-violet-ink); --rd-tier-emblem: var(--rd-emblem-informed); }
[data-tier="learner"]  { --rd-tier-bleed: var(--rd-amber-deep); --rd-tier-ring: var(--rd-amber-300);   --rd-tier-tint: var(--rd-amber-100);  --rd-tier-ink: var(--rd-amber-ink); --rd-tier-emblem: var(--rd-emblem-learner); }
[data-tier="firsttime"]{ --rd-tier-bleed: var(--rd-coral-deep); --rd-tier-ring: var(--rd-coral-300);   --rd-tier-tint: var(--rd-coral-100);  --rd-tier-ink: var(--rd-coral-ink); --rd-tier-emblem: var(--rd-emblem-firsttime); }

/* -------------------------------------------------------------------------
   TIER TOKENS · dark

   Only tint and ink are remapped. Bleed, ring and emblem are deliberately
   left alone:

     · bleed is the full-bleed moment and the share badge field. Dark mode
       says the full-bleed inverts direction — darkest thing on screen in
       light, lightest in dark — and these four already satisfy that against
       #0B120E without moving. More to the point, the badge is an artefact
       that leaves the app: what a stranger sees on WhatsApp must not depend
       on the sender's system settings.
     · ring is read against bleed, not against the app, so it is unaffected.

   tint and ink are the only two used on ordinary app surfaces, and they are
   the ones that were wrong: light tints on a near-black page. They follow the
   convention set by every other tinted pair in this file — the hue's dark
   tint, and the hue's bright ink.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Guarded so a docs page forcing light gets the light tints back. */
  :root:not([data-theme="light"]) [data-tier="watchdog"],
  :root:not([data-theme="light"])[data-tier="watchdog"]  { --rd-tier-tint: var(--rd-dark-green-tint);  --rd-tier-ink: var(--rd-green-mint); }
  :root:not([data-theme="light"]) [data-tier="informed"],
  :root:not([data-theme="light"])[data-tier="informed"]  { --rd-tier-tint: var(--rd-violet-dark-tint); --rd-tier-ink: var(--rd-violet-200); }
  :root:not([data-theme="light"]) [data-tier="learner"],
  :root:not([data-theme="light"])[data-tier="learner"]   { --rd-tier-tint: var(--rd-amber-dark-tint);  --rd-tier-ink: var(--rd-amber-200); }
  :root:not([data-theme="light"]) [data-tier="firsttime"],
  :root:not([data-theme="light"])[data-tier="firsttime"] { --rd-tier-tint: var(--rd-coral-dark-tint);  --rd-tier-ink: var(--rd-coral-300); }
}

[data-theme="dark"] [data-tier="watchdog"],  [data-theme="dark"][data-tier="watchdog"]  { --rd-tier-tint: var(--rd-dark-green-tint);  --rd-tier-ink: var(--rd-green-mint); }
[data-theme="dark"] [data-tier="informed"],  [data-theme="dark"][data-tier="informed"]  { --rd-tier-tint: var(--rd-violet-dark-tint); --rd-tier-ink: var(--rd-violet-200); }
[data-theme="dark"] [data-tier="learner"],   [data-theme="dark"][data-tier="learner"]   { --rd-tier-tint: var(--rd-amber-dark-tint);  --rd-tier-ink: var(--rd-amber-200); }
[data-theme="dark"] [data-tier="firsttime"], [data-theme="dark"][data-tier="firsttime"] { --rd-tier-tint: var(--rd-coral-dark-tint);  --rd-tier-ink: var(--rd-coral-300); }