/* =====================================================================
   ExamForge — theme palettes.

   style.css holds the structure and the DEFAULT (workbench) palette in :root.
   This file only re-points the semantic layer, so a theme is a list of colour
   decisions and never a second copy of the layout.

   A theme sets, in order:
     colour-scheme      so native controls and scrollbars match
     the --wood-* ramp  900→600 dark surfaces, 500→300 mid tones,
                        200→050 hairlines and edges
     --brass-*          the accent (hardware)
     --parch*           page / panel / well
     --ink, --muted     body copy
     the semantic layer surfaces, text-on-dark, status and effects

   In the DARK themes the light end of the ramp (--wood-050…200) is dark: those
   tokens are only ever used as borders and laminate edges, and on a dark panel
   an edge has to be darker than its surface, not lighter.

   What no theme touches: the exam paper. `.cover` and `.exam-sheet` stay a
   white sheet with black type in every theme, on screen and on paper, because
   the deliverable is a question paper — not a brochure.
   ===================================================================== */

/* ============================ LIGHT ================================= */

/* ---- Slate & Teal — cool grey stone, teal hardware, cold white paper ---- */
html[data-theme="slate"]{
  color-scheme:light;
  --wood-900:#0C1418; --wood-800:#132029; --wood-700:#1D2E3A; --wood-600:#2C4453;
  --wood-500:#3C5C6E; --wood-400:#5A7C8E; --wood-300:#89A6B4;
  --wood-200:#B6CAD4; --wood-100:#D4E1E7; --wood-050:#E8F0F3;

  --brass:#177D77; --brass-lt:#1E9C94; --brass-pale:#A9DCD8; --brass-dk:#0E5A55;

  --parch:#EEF3F5; --parch-lt:#FAFCFD; --parch-dk:#DFE9ED;
  --ink:#12222B; --ink-soft:#2E4653; --muted:#4E6672;

  --ok:#3C6B4A; --ok-bg:#DFEDE3; --danger:#A33125; --danger-bg:#F6E1DE;
  --warn:#8A6410; --warn-bg:#F7EBD2;

  --surface:#FFFFFF; --surface-hover:#F2F8FA;
  --on-timber:#EAF3F6; --on-timber-bright:#FFFFFF; --on-timber-dim:#BBD2DC;
  --bevel:rgba(255,255,255,.9); --bevel-soft:rgba(255,255,255,.2);
  --focus-ring:rgba(23,125,119,.26); --scrim:rgba(12,20,24,.68);
  --zebra:rgba(44,68,83,.055); --row-hover:rgba(23,125,119,.12);
  --danger-lt:#BC4132; --danger-dk:#6C1B12; --on-danger:#FBEBE8;
  --ok-ink:#2C5238; --ok-line:#B9D3C2;
  --danger-ink:#7E2318; --danger-line:#E4B8B1;
  --warn-ink:#6A4B0C; --warn-line:#E4CFA2;
  --neutral-bg:#E4EBEF; --neutral-ink:#43565F;
  --shadow:0 10px 22px rgba(12,20,24,.15); --shadow-sm:0 4px 10px rgba(12,20,24,.12);
}

/* ---- Moss & Cream — deep green stock, copper hardware, warm cream paper ---- */
html[data-theme="moss"]{
  color-scheme:light;
  --wood-900:#10180F; --wood-800:#182415; --wood-700:#24371F; --wood-600:#33502C;
  --wood-500:#41663A; --wood-400:#5E8951; --wood-300:#8AAE7D;
  --wood-200:#BCD1B2; --wood-100:#D9E6D2; --wood-050:#EDF3E9;

  --brass:#B0642C; --brass-lt:#CE7C3D; --brass-pale:#F0CDA8; --brass-dk:#85471A;

  --parch:#F3F1E6; --parch-lt:#FCFBF4; --parch-dk:#E4E4D3;
  --ink:#1B2417; --ink-soft:#3A4A33; --muted:#5B6A52;

  --ok:#3F6B36; --ok-bg:#E2EEDC; --danger:#93301F; --danger-bg:#F4E2DD;
  --warn:#8A5A12; --warn-bg:#F6EAD3;

  --surface:#FFFEF9; --surface-hover:#F6F8F1;
  --on-timber:#EDF3E9; --on-timber-bright:#FAFDF7; --on-timber-dim:#C4D6BA;
  --bevel:rgba(255,255,255,.88); --bevel-soft:rgba(255,255,255,.2);
  --focus-ring:rgba(176,100,44,.24); --scrim:rgba(16,24,15,.68);
  --zebra:rgba(51,80,44,.055); --row-hover:rgba(176,100,44,.13);
  --danger-lt:#AC4029; --danger-dk:#5E1B0F; --on-danger:#FAE9E4;
  --ok-ink:#2C4E26; --ok-line:#BFD4B6;
  --danger-ink:#6E2415; --danger-line:#DEB9B0;
  --warn-ink:#63430B; --warn-line:#E0CB9E;
  --neutral-bg:#E7E7D6; --neutral-ink:#525E48;
  --shadow:0 10px 22px rgba(16,24,15,.16); --shadow-sm:0 4px 10px rgba(16,24,15,.13);
}

/* ============================= DARK ================================= */

/* ---- Midnight Walnut — the workbench after hours: the same timber and
   brass, lit from a single lamp.

   This is also the dark half of the "auto" preference. Auto is resolved in the
   page head (see includes/theme.php) rather than with a
   `@media (prefers-color-scheme: dark)` copy of this block: one palette, one
   place to edit. With scripting off, `auto` matches no theme selector and the
   :root workbench palette shows through, which is the right light default. ---- */
html[data-theme="midnight"]{
  color-scheme:dark;
  --wood-900:#0B0805; --wood-800:#120D08; --wood-700:#241A11; --wood-600:#4A3722;
  --wood-500:#6B5133; --wood-400:#8E7048; --wood-300:#B08F63;
  --wood-200:#3B2E20; --wood-100:#33271B; --wood-050:#2A2017;

  --brass:#C79A45; --brass-lt:#E0B45E; --brass-pale:#F0DBAE; --brass-dk:#7E5A1C;

  --parch:#17110B; --parch-lt:#201810; --parch-dk:#2B2116;
  --ink:#EDE0C9; --ink-soft:#CDBB9C; --muted:#A89072;

  --ok:#7FA45E; --ok-bg:#26301B; --danger:#C4573F; --danger-bg:#341914;
  --warn:#D3A445; --warn-bg:#33280F;

  --heading:#F0E2C6; --link:#E0B45E; --link-hover:#F0DBAE;
  --label-ink:#B08F63; --accent-ink:#DCC08B;
  --surface:#1B140D; --surface-hover:#241A11;
  --on-timber:#F3E7D2; --on-timber-bright:#FBF3E3; --on-timber-dim:#D6C3A2;
  --bevel:rgba(255,255,255,.06); --bevel-soft:rgba(255,255,255,.1);
  --focus-ring:rgba(224,180,94,.3); --scrim:rgba(6,4,2,.78);
  --zebra:rgba(255,255,255,.035); --row-hover:rgba(199,154,69,.14);
  --danger-lt:#D96A50; --danger-dk:#3A1109; --on-danger:#FCEAE4;
  --ok-ink:#CADFB4; --ok-line:#3E5030;
  --danger-ink:#F0BCAE; --danger-line:#5A2A20;
  --warn-ink:#F0D79A; --warn-line:#55411A;
  --neutral-bg:#2A2118; --neutral-ink:#C3B096;
  --shadow:0 10px 24px rgba(0,0,0,.6); --shadow-sm:0 4px 12px rgba(0,0,0,.5);
}

/* ---- Graphite & Amber — neutral dark, no wood tone, amber hardware ---- */
html[data-theme="graphite"]{
  color-scheme:dark;
  --wood-900:#0A0A0A; --wood-800:#111111; --wood-700:#1F1F1F; --wood-600:#3D3D3D;
  --wood-500:#565656; --wood-400:#757575; --wood-300:#9C9C9C;
  --wood-200:#333333; --wood-100:#2C2C2C; --wood-050:#242424;

  --brass:#E0912F; --brass-lt:#F2A94A; --brass-pale:#F7D9A8; --brass-dk:#96570F;

  --parch:#131313; --parch-lt:#1B1B1B; --parch-dk:#262626;
  --ink:#E8E6E3; --ink-soft:#C6C3BF; --muted:#9A9793;

  --ok:#7FA45E; --ok-bg:#1E2717; --danger:#D45A3C; --danger-bg:#2E1712;
  --warn:#E0A63A; --warn-bg:#2C2310;

  --heading:#F1EFEC; --link:#F2A94A; --link-hover:#F7D9A8;
  --label-ink:#A9A6A2; --accent-ink:#E8C48F;
  --surface:#171717; --surface-hover:#1F1F1F;
  --on-timber:#F0EEEB; --on-timber-bright:#FFFFFF; --on-timber-dim:#C9C6C2;
  --bevel:rgba(255,255,255,.05); --bevel-soft:rgba(255,255,255,.09);
  --focus-ring:rgba(242,169,74,.3); --scrim:rgba(0,0,0,.76);
  --zebra:rgba(255,255,255,.035); --row-hover:rgba(224,145,47,.13);
  --danger-lt:#E56C4D; --danger-dk:#34120A; --on-danger:#FBEAE5;
  --ok-ink:#C9DEB3; --ok-line:#384527;
  --danger-ink:#F3BFB0; --danger-line:#532519;
  --warn-ink:#F3D8A0; --warn-line:#4E3C16;
  --neutral-bg:#262626; --neutral-ink:#C4C1BD;
  --shadow:0 10px 24px rgba(0,0,0,.6); --shadow-sm:0 4px 12px rgba(0,0,0,.5);
}

/* ---- Deep Indigo — midnight blue with ice-blue hardware ---- */
html[data-theme="indigo"]{
  color-scheme:dark;
  --wood-900:#070A11; --wood-800:#0C111B; --wood-700:#172033; --wood-600:#2E3E5E;
  --wood-500:#405478; --wood-400:#5C749C; --wood-300:#8AA0C4;
  --wood-200:#2A3346; --wood-100:#232C3D; --wood-050:#1C2433;

  --brass:#6FB6D8; --brass-lt:#8ECBE8; --brass-pale:#C7E6F3; --brass-dk:#3E7E9C;

  --parch:#0F1420; --parch-lt:#161D2C; --parch-dk:#1F2839;
  --ink:#E3E9F2; --ink-soft:#C0CADB; --muted:#93A1B8;

  --ok:#6FA37A; --ok-bg:#17281C; --danger:#D2604F; --danger-bg:#2E1613;
  --warn:#D8A94A; --warn-bg:#2C2413;

  --heading:#EAF0F8; --link:#8ECBE8; --link-hover:#C7E6F3;
  --label-ink:#8AA0C4; --accent-ink:#A9C8E4;
  --surface:#131A28; --surface-hover:#1A2231;
  --on-timber:#EAF0F8; --on-timber-bright:#FFFFFF; --on-timber-dim:#BCCADF;
  --bevel:rgba(255,255,255,.06); --bevel-soft:rgba(255,255,255,.1);
  --focus-ring:rgba(111,182,216,.3); --scrim:rgba(5,8,14,.78);
  --zebra:rgba(255,255,255,.035); --row-hover:rgba(111,182,216,.12);
  --danger-lt:#E2735F; --danger-dk:#37110B; --on-danger:#FBEAE6;
  --ok-ink:#BFDCC6; --ok-line:#2E4735;
  --danger-ink:#F2C2B8; --danger-line:#52251E;
  --warn-ink:#F1DAA4; --warn-line:#4E3E19;
  --neutral-bg:#1F2839; --neutral-ink:#B7C3D6;
  --shadow:0 10px 24px rgba(0,0,0,.62); --shadow-sm:0 4px 12px rgba(0,0,0,.5);
}

/* ============================ PRINT ================================= */
/* A dark theme must not reach the printer: paper is white, so the ink has to
   go back to black regardless of what the screen is showing. */
@media print{
  html[data-theme]{
    color-scheme:light;
    --parch:#fff; --parch-lt:#fff; --parch-dk:#fff;
    --surface:#fff; --surface-hover:#fff;
    --ink:#111; --ink-soft:#333; --muted:#444;
    --heading:#111; --link:#111; --accent-ink:#333; --label-ink:#333;
    --line:#ccc; --wood-100:#ccc; --wood-050:#ddd; --wood-200:#bbb;
  }
}