/*
 * CertaRounds — design tokens.
 * Layer 1: palette (raw values, from BUILD_BRIEF §2.1).  Layer 2: semantic tokens.
 * Screens use ONLY semantic tokens (--text, --surface, --primary …), never raw hex.
 * Measured contrast ratios live in docs/COMPONENTS.md §2.
 */

:root {
  color-scheme: light;

  /* ---------- Palette (light) ---------- */
  --navy-900: #101B4D;
  --ink: #11183A;
  --ink-2: #475067;
  --ink-3: #667085;
  --ink-4: #8A90A6;          /* decorative / disabled only — never body text */

  --violet-800: #3730A3;
  --violet-700: #4338CA;
  --violet-600: #4F46E5;
  --violet-500: #6D4AFF;
  --violet-400: #8B5CF6;
  --violet-300: #B7A8FF;
  --violet-200: #D9D1FF;

  --lav-200: #E6E1FF;
  --lav-150: #EDE9FF;
  --lav-100: #F3F0FF;
  --lav-50: #F8F7FF;

  --bg-raw: #F6F6FB;            /* R0: cooler grey so borderless white cards separate by tone */
  --white: #FFFFFF;
  --line-raw: #ECEAF8;
  --line-strong-raw: #DEDBF0;
  --slate-100: #F1F2F8;

  --green-700: #1F8A5B;
  --green-100: #E6F6EE;
  --green-200: #BFE6D2;
  --amber-700: #B45309;
  --amber-500: #F59E0B;
  --amber-100: #FEF4E2;
  --amber-200: #FADDA8;
  --red-600: #D6383E;
  --red-700: #B8282E;
  --red-100: #FDECEC;
  --red-200: #F7C9CB;

  --flame-1: #F97316;
  --flame-2: #F59E0B;

  /* ---------- Semantic: surfaces ---------- */
  --bg: var(--bg-raw);              /* app background */
  --surface: var(--white);          /* cards, sheets */
  --surface-2: var(--lav-50);       /* secondary surface: hint cards, table stripes */
  --surface-3: var(--lav-100);      /* tinted fill: secondary buttons, chips */
  --surface-sunken: #F2F1F9;        /* progress tracks, inset wells */
  --surface-hover: #F6F5FE;         /* row / option hover */
  --surface-pressed: #EEEBFD;
  --overlay: rgba(12, 16, 44, .42); /* sheet / modal backdrop */

  /* ---------- Semantic: text ---------- */
  --text-strong: var(--navy-900);   /* headings, big numbers */
  --text: var(--ink);               /* body */
  --text-2: var(--ink-2);           /* secondary */
  --text-3: var(--ink-3);           /* captions, meta — AA on --surface and --bg */
  --text-disabled: var(--ink-4);
  --text-on-primary: #FFFFFF;
  --text-accent: var(--violet-600); /* numeric highlights: "142 days" */
  --link: var(--violet-600);
  --link-hover: var(--violet-700);

  /* ---------- Semantic: lines ---------- */
  --border: rgba(16, 27, 77, .055);  /* card edges: near-invisible — tone does the separation (R0) */
  --hairline: var(--line-raw);      /* visible hairlines inside cards when needed */
  --option-letter-bg: #EFEEF7;       /* A–D letter discs */
  --bar-empty: #E6E4F2;             /* empty week bars, empty tracks that must stay visible */
  --border-strong: var(--line-strong-raw); /* inputs, answer options */
  --border-control: #858BA3;        /* radio / checkbox rings (3:1 non-text) */
  --radio-ring: #6F7591;            /* F3: confidence radios — a firmer 2px ring, ≥4:1 on white and on --bg */
  --border-input: #8A85B4;           /* F4 (WCAG 1.4.11): text-field boundary, 3.44:1 on white, 3.20:1 on --bg */
  --border-input-hover: #6E6999;     /* clearly stronger on hover; focus stays the violet ring + halo */
  --divider: #F0EEF9;

  /* ---------- Semantic: brand / action ---------- */
  --primary: var(--violet-600);
  --primary-hover: var(--violet-700);
  --primary-pressed: var(--violet-800);
  --primary-fg: #FFFFFF;
  --primary-gradient: linear-gradient(90deg, #4F46E5 0%, #5B45F0 100%);
  --primary-gradient-hover: linear-gradient(90deg, #463DD8 0%, #513CE3 100%);
  --primary-shadow: 0 1px 2px rgba(79, 70, 229, .22), 0 6px 16px -4px rgba(79, 70, 229, .38);
  --accent: var(--violet-500);      /* brand accent: "Rounds", selection marks */
  --accent-2: var(--violet-400);
  --accent-soft: var(--lav-100);
  --accent-soft-fg: var(--violet-700);
  --selected-bg: var(--lav-100);
  --selected-border: var(--violet-500);
  --focus: #6D4AFF;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* data viz */
  --bar-fill: linear-gradient(90deg, #6F5BFF 0%, #5B45F0 100%);
  --bar-fill-solid: #6552F6;
  --bar-fill-v: linear-gradient(180deg, #A197FB 0%, #7262FC 100%);
  --track: var(--surface-sunken);

  /* ---------- Semantic: status ---------- */
  --success: #19774E;               /* text-safe green (5.2:1 on white); --success-fill for solids */
  --success-fill: var(--green-700);
  --success-fg: #FFFFFF;
  --success-bg: var(--green-100);
  --success-border: var(--green-200);
  --success-strong: #176C47;        /* text on --success-bg */
  --warning: var(--amber-700);      /* text-safe amber */
  --warning-fill: var(--amber-500); /* fills only */
  --warning-bg: var(--amber-100);
  --warning-border: var(--amber-200);
  --danger: var(--red-600);
  --danger-strong: var(--red-700);  /* text on --danger-bg */
  --danger-fg: #FFFFFF;
  --danger-bg: var(--red-100);
  --danger-border: var(--red-200);
  --info: var(--violet-600);
  --info-bg: var(--lav-100);
  --flame-gradient: linear-gradient(180deg, var(--flame-1), var(--flame-2));

  /* ---------- Type ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-12: .75rem;      /* 12 — overline, tab labels */
  --fs-13: .8125rem;    /* 13 — captions, meta */
  --fs-15: .9375rem;    /* 15 — body small / UI */
  --fs-17: 1.0625rem;   /* 17 — body, stems (mobile) */
  --fs-20: 1.25rem;     /* 20 — card titles, H3 */
  --fs-24: 1.5rem;      /* 24 — H2, big values */
  --fs-30: 1.875rem;    /* 30 — H1 mobile */
  --fs-36: 2.25rem;     /* 36 — display */
  --fs-44: 2.75rem;     /* 44 — hero */
  --fs-body: var(--fs-15);
  --fs-stem: var(--fs-17);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --lh-stem: 1.55;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: .06em;
  --measure: 68ch;

  /* ---------- Space (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --gutter: 16px;       /* page side padding (phone); 24/32 on larger */

  /* ---------- Radii ---------- */
  --r-xs: 6px;          /* kbd, tiny badges */
  --r-sm: 10px;         /* inputs, small chips, icon tiles */
  --r-md: 14px;         /* icon buttons, small tiles, toasts */
  --r-option: 28px;     /* answer options — capsule rows (R0) */
  --r-btn: 999px;       /* buttons — pills at every size (R0) */
  --r-lg: 20px;         /* cards */
  --r-xl: 28px;         /* sheets, modals */
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 27, 77, .05);
  --shadow-card: 0 1px 2px rgba(16, 27, 77, .04), 0 4px 16px rgba(16, 27, 77, .06);
  --shadow-card-hover: 0 1px 2px rgba(16, 27, 77, .05), 0 8px 24px rgba(16, 27, 77, .09);
  --shadow-raised: 0 2px 6px rgba(16, 27, 77, .06), 0 18px 48px -8px rgba(16, 27, 77, .22);
  --shadow-bar: 0 -1px 0 var(--border), 0 -6px 20px rgba(16, 27, 77, .04);

  /* ---------- Motion ---------- */
  --dur-1: 150ms;
  --dur-2: 180ms;
  --dur-3: 220ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ---------- Layers ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;      /* top app bar, sticky headers */
  --z-nav: 200;         /* tab bar, rail, sidebar */
  --z-overlay: 400;     /* backdrops */
  --z-sheet: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  /* ---------- Layout ----------
     Breakpoints (media queries cannot read vars — use these literals):
       phone   < 768px     top bar + bottom tab bar
       tablet  768–1023px  72px icon rail, content max 720px
       desktop ≥ 1024px    248px sidebar, content grid
       wide    ≥ 1200px    right rail appears (.page__aside)
       xwide   ≥ 1280px    question explanation moves to the right panel      */
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --rail-w: 72px;
  --sidebar-w: 224px;        /* orchestrator 09-25: matches the desktop mockup (~215px) */
  --aside-w: 336px;
  --content-max: 720px;
  --page-max: 1120px;
  --reading-max: 720px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- Specialty mark derivations (see .spec in components.css) ---------- */
  --spec-tint-l: 96.5%;
  --spec-tint-s: 85%;
  --spec-ink-s: 62%;

  /* ---------- Component-level semantic tokens ---------- */
  --border-hover: #C9BEFF;
  --accent-soft-hover: #EAE5FF;
  --accent-soft-pressed: #E1DAFF;
  --nav-fg: #596084;               /* inactive nav icon + label */
  --nav-active: var(--violet-600);
  --nav-indicator: var(--lav-100);
  --toast-bg: #1A2150;
  --toast-fg: #F4F5FF;
  --tooltip-bg: #1A2150;
  --tooltip-fg: #FFFFFF;
  --kbd-bg: var(--white);
  --switch-off: #8187A0;            /* off-state RING (3:1 boundary) */
  --switch-off-fill: #E7E6F1;       /* off-state track fill — light, like the icon sheet */
  --skeleton-a: #E9E7F4;
  --skeleton-b: #F4F3FA;

  /* Logo colours (inline logo reads these; asset files use the light values) */
  --logo-c-1: #25237B;
  --logo-c-2: #141555;
  --logo-r-1: #4A2DC9;
  --logo-r-2: #6546E8;
  --logo-w-1: #4A2BC1;
  --logo-w-2: #5A33D4;
  --logo-certa: #131650;
}

/* ---------- Dark theme: designed, not inverted ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1024;
  --surface: #121936;
  --surface-2: #161E40;
  --surface-3: #1E2652;
  --surface-sunken: #0D1330;
  --surface-hover: #182047;
  --surface-pressed: #1E2756;
  --overlay: rgba(3, 5, 16, .72);   /* F4: a touch darker so the sheet reads above the page */

  --text-strong: #F4F5FF;
  --text: #E3E6F5;
  --text-2: #AFB5D1;
  --text-3: #8F96B8;
  --text-disabled: #5D6488;
  --text-on-primary: #FFFFFF;
  --text-accent: #A99BFF;
  --link: #AD9FFF;
  --link-hover: #C7BDFF;

  --border: #232B51;
  --hairline: #232B51;
  --option-letter-bg: #222B57;
  --bar-empty: #2A3363;
  --border-strong: #313A69;
  --border-control: #69719A;
  --radio-ring: #8A92BC;
  --border-input: #626A99;
  --border-input-hover: #7C84B3;
  --divider: #1D2548;

  --primary: #5F4FF5;
  --primary-hover: #6E60FF;
  --primary-pressed: #5243E0;
  --primary-fg: #FFFFFF;
  --primary-gradient: linear-gradient(90deg, #5A4AF2 0%, #6A50FA 100%);
  --primary-gradient-hover: linear-gradient(90deg, #6252F6 0%, #6C52FA 100%);
  --primary-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(95, 79, 245, .30);
  --accent: #8B7BFF;
  --accent-2: #A78BFA;
  --accent-soft: #221F55;
  --accent-soft-fg: #C4B9FF;
  --selected-bg: #221F58;
  --selected-border: #8B7BFF;
  --focus: #9D8FFF;

  --bar-fill: linear-gradient(90deg, #7B6BFF 0%, #6A55FF 100%);
  --bar-fill-solid: #7563FF;
  --bar-fill-v: linear-gradient(180deg, #9D92FF 0%, #6E5CFF 100%);
  --track: #1C2449;

  --success: #3CCB88;
  --success-fill: #34B87A;
  --success-fg: #06281A;
  --success-bg: #0F2B27;
  --success-border: #1D5A45;
  --success-strong: #5FDDA0;
  --warning: #F4B454;
  --warning-fill: #F59E0B;
  --warning-bg: #2E2410;
  --warning-border: #5C4418;
  --danger: #FF6F75;
  --danger-strong: #FF8E93;
  --danger-fg: #2A0609;
  --danger-bg: #331528;
  --danger-border: #6A2A3C;
  --info: #AD9FFF;
  --info-bg: #221F55;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 20px rgba(0, 0, 0, .22);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .34);
  --shadow-raised: 0 2px 8px rgba(0, 0, 0, .4), 0 24px 60px -8px rgba(0, 0, 0, .6);
  --shadow-bar: 0 -1px 0 var(--border), 0 -8px 24px rgba(0, 0, 0, .25);

  --spec-tint-l: 17%;
  --spec-tint-s: 42%;

    --border-hover: #4B4592;
    --accent-soft-hover: #2A2666;
    --accent-soft-pressed: #332E78;
    --nav-fg: #9BA2C6;
    --nav-active: #B1A5FF;
    --nav-indicator: #262260;
    --toast-bg: #E9EBF8;
    --toast-fg: #11183A;
    --tooltip-bg: #E9EBF8;
    --tooltip-fg: #11183A;
    --kbd-bg: #1A2247;
    --switch-off: #6C74A0;
    --switch-off-fill: #1E2652;
    --skeleton-a: #1E2753;
    --skeleton-b: #283266;
    --logo-c-1: #F3F1FF;
    --logo-c-2: #D8D2FF;
    --logo-r-1: #8C72FF;
    --logo-r-2: #A893FF;
    --logo-w-1: #9C86FF;
    --logo-w-2: #B5A4FF;
    --logo-certa: #F4F5FF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1024;
    --surface: #121936;
    --surface-2: #161E40;
    --surface-3: #1E2652;
    --surface-sunken: #0D1330;
    --surface-hover: #182047;
    --surface-pressed: #1E2756;
    --overlay: rgba(3, 5, 16, .72);

    --text-strong: #F4F5FF;
    --text: #E3E6F5;
    --text-2: #AFB5D1;
    --text-3: #8F96B8;
    --text-disabled: #5D6488;
    --text-on-primary: #FFFFFF;
    --text-accent: #A99BFF;
    --link: #AD9FFF;
    --link-hover: #C7BDFF;

    --border: #232B51;
    --hairline: #232B51;
    --option-letter-bg: #222B57;
    --bar-empty: #2A3363;
    --border-strong: #313A69;
    --border-control: #69719A;
    --radio-ring: #8A92BC;
    --border-input: #626A99;
    --border-input-hover: #7C84B3;
    --divider: #1D2548;

    --primary: #5F4FF5;
    --primary-hover: #6E60FF;
    --primary-pressed: #5243E0;
    --primary-fg: #FFFFFF;
    --primary-gradient: linear-gradient(90deg, #5A4AF2 0%, #6A50FA 100%);
    --primary-gradient-hover: linear-gradient(90deg, #6252F6 0%, #6C52FA 100%);
    --primary-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(95, 79, 245, .30);
    --accent: #8B7BFF;
    --accent-2: #A78BFA;
    --accent-soft: #221F55;
    --accent-soft-fg: #C4B9FF;
    --selected-bg: #221F58;
    --selected-border: #8B7BFF;
    --focus: #9D8FFF;

    --bar-fill: linear-gradient(90deg, #7B6BFF 0%, #6A55FF 100%);
    --bar-fill-solid: #7563FF;
    --bar-fill-v: linear-gradient(180deg, #9D92FF 0%, #6E5CFF 100%);
    --track: #1C2449;

    --success: #3CCB88;
    --success-fill: #34B87A;
    --success-fg: #06281A;
    --success-bg: #0F2B27;
    --success-border: #1D5A45;
    --success-strong: #5FDDA0;
    --warning: #F4B454;
    --warning-fill: #F59E0B;
    --warning-bg: #2E2410;
    --warning-border: #5C4418;
    --danger: #FF6F75;
    --danger-strong: #FF8E93;
    --danger-fg: #2A0609;
    --danger-bg: #331528;
    --danger-border: #6A2A3C;
    --info: #AD9FFF;
    --info-bg: #221F55;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 20px rgba(0, 0, 0, .22);
    --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .34);
    --shadow-raised: 0 2px 8px rgba(0, 0, 0, .4), 0 24px 60px -8px rgba(0, 0, 0, .6);
    --shadow-bar: 0 -1px 0 var(--border), 0 -8px 24px rgba(0, 0, 0, .25);

    --spec-tint-l: 17%;
    --spec-tint-s: 42%;

    --border-hover: #4B4592;
    --accent-soft-hover: #2A2666;
    --accent-soft-pressed: #332E78;
    --nav-fg: #9BA2C6;
    --nav-active: #B1A5FF;
    --nav-indicator: #262260;
    --toast-bg: #E9EBF8;
    --toast-fg: #11183A;
    --tooltip-bg: #E9EBF8;
    --tooltip-fg: #11183A;
    --kbd-bg: #1A2247;
    --switch-off: #6C74A0;
    --switch-off-fill: #1E2652;
    --skeleton-a: #1E2753;
    --skeleton-b: #283266;
    --logo-c-1: #F3F1FF;
    --logo-c-2: #D8D2FF;
    --logo-r-1: #8C72FF;
    --logo-r-2: #A893FF;
    --logo-w-1: #9C86FF;
    --logo-w-2: #B5A4FF;
    --logo-certa: #F4F5FF;
  }
}

/* ---------- Motion: honour reduced motion everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}
:root[data-motion="reduce"] {
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
}

/* ---------- User text size (Settings → Text size) ---------- */
:root[data-text-size="small"] { font-size: 93.75%; }
:root[data-text-size="large"] { font-size: 112.5%; }
:root[data-text-size="xlarge"] { font-size: 125%; }

/* Larger layout gutters on bigger screens */
@media (min-width: 768px) { :root { --gutter: 24px; --fs-stem: 1.125rem; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --fs-body: 1rem; } }