/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — unified "Calm Paper / Indigo"
   Single accent applied via tokens everywhere (audit VD-01).
   Themes: classic · dark · newspaper · ocean
   A11y scales: [data-textsize] · [data-contrast]   (audit AX-01)
   ════════════════════════════════════════════════════════════ */

:root {
  /* Brand — ONE accent, one support */
  --brand:        #4F46E5;
  --brand-strong: #4338CA;
  --brand-soft:   #EEF2FF;
  --support:      #0D9488;   /* teal — secondary actions only */
  --support-soft: #CCFBF1;
  --warn:         #B45309;   /* amber-ink — hints */
  --warn-soft:    #FEF3C7;
  --err:          #DC2626;
  --err-soft:     #FEE2E2;
  --gold:         #D97706;   /* streak flame */

  /* Surfaces */
  --bg:        #FAF8F2;
  --surface:   #FFFFFF;
  --surface-2: #F4F2EC;
  --line:      #E7E3D8;
  --line-2:    #D6D1C2;

  /* Ink */
  --ink:   #1A1B2E;
  --ink-2: #4A4D63;
  --ink-3: #797C90;

  /* Board */
  --board:      #FFFFFF;
  --cell:       #FFFFFF;
  --cell-given: #1A1B2E;
  --cell-user:  #4F46E5;
  --cell-note:  #797C90;
  --cell-peer:  #F5F4FB;   /* same row/col/box */
  --cell-sel:   #E0E0FB;   /* selected */
  --cell-same:  #C7E9FF;   /* matching digit */
  --cell-err-bg:#FEE2E2;
  --cell-err:   #DC2626;
  --grid-line:  #E1DDD0;
  --box-line:   #2A2C42;

  /* Typography */
  --font-ui:      "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font-ui);

  /* Adjustable base for the board digit size (a11y) */
  --digit-scale: 1;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(26,27,46,.06);
  --sh-md: 0 4px 16px -6px rgba(26,27,46,.18);
  --sh-lg: 0 18px 48px -22px rgba(26,27,46,.4);
  --sh-board: 0 12px 40px -18px rgba(79,70,229,.45);

  --nav-h: 64px;
  --tap: 48px;   /* min touch target — audit MO-01 */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* ── Backwards-compat aliases (mini-sudoku, solver, downloads, seniors) ── */
  --c-brand: var(--brand);
  --c-brand-dark: var(--brand-strong);
  --c-brand-light: var(--brand-soft);
  --c-ink: var(--ink);
  --c-ink-2: var(--ink-2);
  --c-ink-3: var(--ink-3);
  --c-surface: var(--surface);
  --c-surface-2: var(--surface-2);
  --c-border: var(--line);
  --c-border-2: var(--line-2);
  --c-bg: var(--bg);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);
  --z-modal: 400;
  --font-body: var(--font-ui);
  --font-heading: var(--font-display);
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;
}

/* ── Dark ────────────────────────────────────────────────── */
[data-theme="dark"] {
  --brand: #818CF8; --brand-strong: #A5B4FC; --brand-soft: #21214A;
  --support: #2DD4BF; --support-soft: #06302B;
  --warn: #FCD34D; --warn-soft: #2A2207; --err: #FB7185; --err-soft: #2E0F16;
  --gold: #FBBF24;
  --bg: #0E1018; --surface: #181B27; --surface-2: #222637;
  --line: #2C3043; --line-2: #3A3F56;
  --ink: #EEF1F8; --ink-2: #A6ABC2; --ink-3: #6E7491;
  --board: #181B27; --cell: #181B27; --cell-given: #EEF1F8; --cell-user: #A5B4FC;
  --cell-note: #6E7491; --cell-peer: #20243A; --cell-sel: #2E2F66;
  --cell-same: #143850; --cell-err-bg: #3A1620; --cell-err: #FB7185;
  --grid-line: #2C3043; --box-line: #8B91B5;
  --sh-board: 0 12px 40px -18px rgba(0,0,0,.7);
}

/* ── Newspaper ───────────────────────────────────────────── */
[data-theme="newspaper"] {
  --brand: #2C4A8C; --brand-strong: #1E3366; --brand-soft: #E2E7F2;
  --support: #1A6B5C; --support-soft: #DCEDE9;
  --warn: #8A6D00; --warn-soft: #F3EBCF; --err: #9A2A2A; --err-soft: #F2DADA;
  --gold: #9A6B00;
  --bg: #F1E9D6; --surface: #FBF6EA; --surface-2: #EBE1C9;
  --line: #D8CBA8; --line-2: #BFAE84;
  --ink: #211608; --ink-2: #46361F; --ink-3: #6F5C3D;
  --board: #FBF6EA; --cell: #FBF6EA; --cell-given: #211608; --cell-user: #1B3C72;
  --cell-note: #6F5C3D; --cell-peer: #EFE6CC; --cell-sel: #E6D7A8;
  --cell-same: #E2D6AE; --cell-err-bg: #F2DADA; --cell-err: #9A2A2A;
  --grid-line: #CFC099; --box-line: #4A3A1C;
  --font-display: Georgia, "Times New Roman", serif;
}

/* ── Ocean ───────────────────────────────────────────────── */
[data-theme="ocean"] {
  --brand: #0E8FA8; --brand-strong: #0A7184; --brand-soft: #D6EFF4;
  --support: #0D9488; --support-soft: #CFF0EB;
  --warn: #B5740B; --warn-soft: #FBEFCF; --err: #C0392B; --err-soft: #FBE0DC;
  --gold: #C77A12;
  --bg: #EAF6F8; --surface: #FFFFFF; --surface-2: #DCEFF2;
  --line: #BFE0E6; --line-2: #93C9D3;
  --ink: #0C2A33; --ink-2: #2C5A66; --ink-3: #5E909B;
  --board: #FFFFFF; --cell: #FFFFFF; --cell-given: #0C2A33; --cell-user: #0A7184;
  --cell-note: #5E909B; --cell-peer: #ECF7F9; --cell-sel: #BFE7EE;
  --cell-same: #CFEFF6; --cell-err-bg: #FBE0DC; --cell-err: #C0392B;
  --grid-line: #C9E4E9; --box-line: #15677A;
}

/* ── A11y: text size (board digits + UI text) ───────────── */
[data-textsize="large"] { --digit-scale: 1.16; }
[data-textsize="xl"]    { --digit-scale: 1.34; }

/* Scale readable page text — large */
[data-textsize="large"] body { font-size: 17px; }
[data-textsize="large"] .seo-intro p,
[data-textsize="large"] .seo-intro h2 { font-size: 1.06em; }
[data-textsize="large"] .tips li { font-size: 16px; }
[data-textsize="large"] .faq-q { font-size: 17px; }
[data-textsize="large"] .faq-a p { font-size: 15.5px; }
[data-textsize="large"] .feat p { font-size: 15px; }
[data-textsize="large"] .prose p,
[data-textsize="large"] .prose li { font-size: 17px; }
[data-textsize="large"] .below-head p,
[data-textsize="large"] .below-head h2 { font-size: 1.05em; }

/* Scale readable page text — xl */
[data-textsize="xl"] body { font-size: 19px; }
[data-textsize="xl"] .seo-intro p,
[data-textsize="xl"] .seo-intro h2 { font-size: 1.1em; }
[data-textsize="xl"] .tips li { font-size: 18px; }
[data-textsize="xl"] .faq-q { font-size: 19px; }
[data-textsize="xl"] .faq-a p { font-size: 17px; }
[data-textsize="xl"] .feat p { font-size: 17px; }
[data-textsize="xl"] .prose p,
[data-textsize="xl"] .prose li { font-size: 19px; }
[data-textsize="xl"] .below-head p,
[data-textsize="xl"] .below-head h2 { font-size: 1.1em; }

/* ── A11y: high contrast — thicker lines, pure ink ───────── */
[data-contrast="high"] {
  --line: #9b9685; --line-2: #6f6a59;
  --grid-line: #6f6a59; --box-line: #000000;
  --cell-given: #000000; --cell-user: #0b21d6;
  --cell-sel: #ffe27a; --cell-same: #b9e6ff; --cell-peer: #f0eee6;
  --ink: #000000; --ink-2: #1f2030;
}
[data-contrast="high"][data-theme="dark"] {
  --cell-given: #ffffff; --cell-user: #c7ccff; --box-line: #ffffff;
  --ink: #ffffff; --grid-line: #5a6079;
}
[data-contrast="high"] .cell { font-weight: 800 !important; }
[data-contrast="high"] .board { border-width: 4px !important; }