/* Coding Coach design tokens — direction "Fill in the blank"
   Light ("Paper") is the default. Dark ("Chalkboard") is a full re-map, applied
   with <html data-theme="dark">. Ship ONE mode as the default; no toggle in v1.
   Ratios below are WCAG 2.2, computed by design/contrast.mjs (node design/contrast.mjs). */

:root {
  /* ---- Color: Paper (light) ---- */
  --bg:            #F4F3EC;  /* page canvas, warm off-white tinted toward green */
  --surface:       #FBFAF6;  /* cards, class card */
  --sunk:          #EAE9DF;  /* wells, table header, code chips */
  --border:        #D5D4C6;  /* hairlines (decorative) */
  --border-strong: #7C837B;  /* input and checkbox outlines: 3.5:1 on bg, 3.7:1 on surface */
  --ink:           #10201A;  /* headings, wordmark: 15.2:1 on bg */
  --text:          #26342D;  /* body: 11.7:1 on bg, 12.5:1 on surface, 10.7:1 on sunk */
  --muted:         #536158;  /* secondary sentences: 5.9:1 bg, 6.3:1 surface, 5.4:1 sunk */
  --subtle:        #5C685F;  /* labels, eyebrows, footnotes: 5.2:1 bg, 5.6:1 surface, 4.8:1 sunk */
  --accent:        #FFD84A;  /* highlighter. FILL ONLY in light mode: never text on paper */
  --on-accent:     #10201A;  /* ink on highlighter: 12.2:1 */
  --link:          #1B5A43;  /* text-safe accent twin: 7.3:1 bg, 7.8:1 surface */
  --ok:            #1B6B47;  /* ticked step: 6.2:1 on surface */
  --danger:        #A8261D;  /* form errors only: 6.8:1 on surface */
  --focus:         #10201A;  /* focus ring colour (2px ring + 2px offset) */

  /* The two panes of the signature keep their own colours in BOTH modes:
     the ask is written on the board, the app comes out on paper. */
  --board:         #11251E;
  --board-surface: #183229;
  --board-border:  #2A4A3D;
  --board-ink:     #F2F0E4;  /* 14.1:1 on board */
  --board-muted:   #A3B4A8;  /* 7.4:1 on board, 6.3:1 on board-surface */
  --paper:         #FBFAF6;
  --paper-ink:     #10201A;  /* 16.2:1 */
  --paper-muted:   #536158;  /* 6.3:1 */
  --paper-border:  #D5D4C6;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif; /* wdth 80, wght 700-800 */
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display-width: 80;       /* font-variation-settings "wdth" */

  /* Fluid scale, 390 to 1280. Body never drops below 17px on a phone. */
  --text-xs:   0.75rem;                                  /* 12  eyebrows, labels (uppercase, tracked) */
  --text-sm:   0.875rem;                                 /* 14  footnotes, disclaimers */
  --text-base: 1.0625rem;                                /* 17  body */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);   /* 18-20 lead */
  --text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);     /* 22-28 h3, card figures */
  --text-2xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);     /* 30-44 h2 */
  --text-3xl:  clamp(2.75rem, 1.9rem + 4.4vw, 5.25rem);      /* 44-84 h1 */
  --leading-tight: 0.98;
  --leading-snug:  1.15;
  --leading-body:  1.6;
  --tracking-display: -0.025em;
  --tracking-eyebrow: 0.14em;
  --measure: 62ch;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;     --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 2.5rem);
  --section: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);   /* air between sections */
  --page: 72rem;                                     /* max content width */
  --tap: 2.75rem;                                    /* 44px minimum target */

  /* ---- Radius ---- */
  --radius-sm: 4px;    /* chips, checkboxes, the highlighter mark */
  --radius-md: 8px;    /* buttons, inputs */
  --radius-lg: 14px;   /* cards, panes */

  /* ---- Shadow: borders do the separating. One hard offset for the primary button and the pane. ---- */
  --accent-deep: #B8961F;                    /* polish 1: the button's key edge on dark surfaces (decorative, never text) */
  --shadow-key:  0 2px 0 0 var(--ink);
  --shadow-pane: 0 1px 0 0 var(--border), 0 18px 40px -24px rgb(16 32 26 / 0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;   /* hover, focus, tick */
  --dur-rise: 320ms;   /* one rise-and-fade on load, 10px, 40ms stagger */
  --rise: 10px;
  /* polish 1 */
  --dur-swipe: 420ms;    /* the highlighter being drawn across a headline phrase */
  --delay-swipe: 380ms;  /* starts after the headline has risen */
  --dur-type: 26ms;      /* per character, the blank being typed in the pane (read by motion.js as a constant) */
  --dur-open: 240ms;     /* FAQ open and close, progress bar */
  --stagger: 40ms;
}

[data-theme="dark"] {
  /* ---- Color: Chalkboard (dark) ---- */
  --bg:            #0B1814;
  --surface:       #11231C;
  --sunk:          #081210;
  --border:        #223B31;
  --border-strong: #5F7A6D;  /* 3.9:1 on bg, 3.5:1 on surface */
  --ink:           #F4F2E6;  /* 16.2:1 on bg */
  --text:          #DCE2D7;  /* 13.8:1 bg, 12.4:1 surface */
  --muted:         #A3B4A8;  /* 8.4:1 bg, 7.5:1 surface */
  --subtle:        #8A9D91;  /* 6.3:1 bg, 5.7:1 surface */
  --accent:        #FFD84A;  /* fill AND text-safe on dark: 13.1:1 on bg */
  --on-accent:     #10201A;
  --link:          #FFD84A;
  --ok:            #6FD3A0;  /* 9.0:1 on surface */
  --danger:        #FF8A7A;  /* 7.2:1 on surface */
  --focus:         #FFD84A;

  --board:         #11251E;
  --board-surface: #183229;
  --board-border:  #2A4A3D;

  --shadow-key:  0 2px 0 0 var(--accent-deep);
  --shadow-pane: 0 0 0 1px var(--border), 0 24px 48px -28px rgb(0 0 0 / 0.7);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-rise: 0ms; --rise: 0px; --dur-swipe: 0ms; --delay-swipe: 0ms; --dur-open: 0ms; --stagger: 0ms; }
}