/* ============================================================
   SG Maths Exam — site-wide theme layer
   Loaded FIRST on every page (via templates/_theme_head.html).

   How this works
   --------------
   Individual pages declare their own palette in their own
   `:root{ --bg:…; --card:…; --text:… }` block. This sheet does not
   fight that: the dark overrides below are written as
   `:root[data-theme="dark"]` and `:root:not([data-theme="light"])`,
   both specificity (0,2,0), which beats a bare `:root` (0,1,0)
   regardless of source order. So a page keeps its light palette and
   inherits the dark one for free — no per-page edit needed for any
   colour that page routes through a variable.

   Three states:
     :root                                 -> light
     @media (prefers-color-scheme:dark)
       :root:not([data-theme="light"])     -> follows the OS
     :root[data-theme="dark"]              -> explicit reader choice

   Colours hard-coded directly in a page's rules (not via a variable)
   are handled in that page's own stylesheet.
   ============================================================ */

/* ---------------------------------------------------------------
   1. LIGHT — semantic tokens (the playbook set)
   --------------------------------------------------------------- */
:root{
  color-scheme:light;

  /* surfaces (60%) — warm off-white, never blinding #fff */
  --surface-canvas:#f8fafc;
  --surface-card:#ffffff;
  --surface-subtle:#edf2f7;
  --surface-cream:#fdfbf7;
  --surface-footer:#edf2f7;

  /* text */
  --text-primary:#0f172a;    /* 15.4:1 AAA on canvas */
  --text-secondary:#475569;  /*  7.0:1 AAA on canvas */
  --text-onbrand:#ffffff;

  /* interactive (30%) */
  --brand-primary:#2563eb;         /* 4.6:1 AA with white text */
  --brand-primary-shadow:#1d4ed8;  /* tactile depth border (never text) */
  --brand-primary-hover:#1d4ed8;
  --brand-text:#1d4ed8;            /* links, accents, focus ring */
  --brand-surface:#eff6ff;
  --brand-surface-border:#bfdbfe;
  --accent-border:#cbd5e1;         /* 3.1:1 UI AA */
  --border-subtle:#e2e8f0;
  --border-depth:#94a3b8;

  /* feedback (10%) */
  --feedback-success:#16a34a;
  --feedback-success-surface:#dcfce7;
  --feedback-success-shadow:#15803d;
  --success-text:#15803d;
  --feedback-caution:#ea580c;
  --feedback-caution-surface:#ffedd5;
  --feedback-caution-shadow:#c2410c;

  /* type */
  --font-ui:'Lexend','Atkinson Hyperlegible','Segoe UI',-apple-system,
            BlinkMacSystemFont,system-ui,sans-serif;

  /* geometry */
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --tap:44px;                 /* Tier 3 minimum touch target */
  --shadow-card:0 1px 2px rgba(15,23,42,.05);
  --shadow-raised:0 6px 20px -8px rgba(15,23,42,.18);
  --press:60ms cubic-bezier(.4,0,.2,1);

  /* --- per-page palette vocabulary, light. Pages that declare these
     themselves simply win in light mode (identical values); pages that do
     not can now use them and get dark for free. --- */
  --bg:#f8fafc;
  --bg-soft:#f1f5f9;
  --card:#ffffff;
  --text:#0f172a;
  --text-muted:#556070;
  --muted:#556070;
  --text-soft:#5b6775;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;

  --primary:#4f46e5;
  --primary-dark:#4338ca;
  --primary-light:#eef2ff;
  --primary-text:#4338ca;      /* --primary used AS TEXT (see note below) */
  --accent:#f97316;
  --accent-dark:#ea580c;
  --accent-light:#fff7ed;
  --success:#10b981;
  --success-light:#ecfdf5;
  --danger:#ef4444;
  --warning:#f59e0b;
  --warn:#f59e0b;
  --warn-light:#fffbeb;
  --good:#047857;
  --success-btn:#15803d;   /* green that carries WHITE text (4.9:1) */
  --on-primary-tint:#4338ca;   /* ink on --primary-light */
  --on-success:#166534;        /* ink on --success-light  */
  --on-warn:#92400e;           /* ink on --warn-light     */
  --on-accent:#9a3412;         /* ink on --accent-light   */
  --on-danger:#b91c1c;         /* ink on --sg-red-light   */
  --sg-red-text:#9b1c2b;
  --accent-btn:#c2410c;    /* orange that carries WHITE text (5.0:1) */

  --ink:#172033;
  --line:#dbe3ef;
  --panel:#ffffff;
  --bad:#c2410c;
  --gold:#b7791f;
}

/* ---------------------------------------------------------------
   2. DARK
   Two identical blocks: one for "follow the OS", one for an explicit
   choice. Kept in sync deliberately — a shared class would not let
   the explicit choice override the media query in both directions.
   --------------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    /* --- semantic set --- */
    --surface-canvas:#0f172a;
    --surface-card:#1e293b;
    --surface-subtle:#334155;
    --surface-cream:#1c2438;
    --surface-footer:#0b1220;

    --text-primary:#f1f5f9;
    --text-secondary:#cbd5e1;

    --brand-text:#93c5fd;
    --brand-surface:#1e3a5f;
    --brand-surface-border:#2f5c96;
    --accent-border:#475569;
    --border-subtle:#334155;
    --border-depth:#0b1220;

    --feedback-success-surface:#14532d;
    --feedback-success-shadow:#166534;
    --success-text:#4ade80;
    --feedback-caution-surface:#7c2d12;
    --feedback-caution-shadow:#9a3412;

    --shadow-card:0 1px 2px rgba(0,0,0,.4);
    --shadow-raised:0 6px 20px -8px rgba(0,0,0,.6);

    /* --- per-page palette vocabulary (index, sample, student,
       login, register, purchase, profile, topic, paper,
       papers_index, solution, worksheet, landing.css) --- */
    --bg:#0f172a;
    --bg-soft:#1a2335;
    --card:#1e293b;
    --text:#f1f5f9;
    --text-muted:#cbd5e1;
    --muted:#cbd5e1;
    --text-soft:#94a3b8;
    --border:#334155;
    --border-strong:#475569;

    --primary:#4f46e5;        /* white text on it = 6.6:1 */
    --primary-dark:#4338ca;
    --primary-text:#a5b4fc;   /* the same brand, as TEXT on dark */
    --primary-light:#312e81;
    --accent:#fb923c;
    --accent-dark:#f97316;
    --accent-light:#431407;
    --success:#22c55e;
    --success-light:#064e3b;
    --danger:#f87171;
    --warning:#fbbf24;
    --warn:#fbbf24;
    --warn-light:#422006;
    --good:#4ade80;
    --success-btn:#15803d;
    --on-primary-tint:#c7d2fe;
    --on-success:#86efac;
    --on-warn:#fcd34d;
    --on-accent:#fdba74;
    --on-danger:#fca5a5;
    --sg-red-text:#fca5a5;
    --accent-btn:#c2410c;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 4px 12px rgba(0,0,0,.45);
    --shadow-lg:0 20px 40px -12px rgba(0,0,0,.6);

    /* --- tower-defence chrome (canvas artwork is left alone) --- */
    --ink:#f1f5f9;
    --line:#334155;
    --panel:#1e293b;
    --bad:#fb923c;
    --gold:#fbbf24;

    /* --- app.css nav shell --- */
    --sg-text:#f1f5f9;
    --sg-muted:#cbd5e1;
    --sg-border:#334155;
    --sg-bg:#0f172a;
    --sg-soft:#1e293b;
    --sg-indigo-light:#312e81;
    --sg-red-light:#4c1d24;
  --sg-red:#fca5a5;
    --sg-red:#fca5a5;
    --sg-shadow:0 4px 14px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --surface-canvas:#0f172a;
  --surface-card:#1e293b;
  --surface-subtle:#334155;
  --surface-cream:#1c2438;
  --surface-footer:#0b1220;

  --text-primary:#f1f5f9;
  --text-secondary:#cbd5e1;

  --brand-text:#93c5fd;
  --brand-surface:#1e3a5f;
  --brand-surface-border:#2f5c96;
  --accent-border:#475569;
  --border-subtle:#334155;
  --border-depth:#0b1220;

  --feedback-success-surface:#14532d;
  --feedback-success-shadow:#166534;
  --success-text:#4ade80;
  --feedback-caution-surface:#7c2d12;
  --feedback-caution-shadow:#9a3412;

  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-raised:0 6px 20px -8px rgba(0,0,0,.6);

  --bg:#0f172a;
  --bg-soft:#1a2335;
  --card:#1e293b;
  --text:#f1f5f9;
  --text-muted:#cbd5e1;
  --muted:#cbd5e1;
  --text-soft:#94a3b8;
  --border:#334155;
  --border-strong:#475569;

  --primary:#4f46e5;        /* white text on it = 6.6:1 */
  --primary-dark:#4338ca;
  --primary-text:#a5b4fc;   /* the same brand, as TEXT on dark */
  --primary-light:#312e81;
  --accent:#fb923c;
  --accent-dark:#f97316;
  --accent-light:#431407;
  --success:#22c55e;
  --success-light:#064e3b;
  --danger:#f87171;
  --warning:#fbbf24;
  --warn:#fbbf24;
  --warn-light:#422006;
  --good:#4ade80;
  --success-btn:#15803d;
  --on-primary-tint:#c7d2fe;
  --on-success:#86efac;
  --on-warn:#fcd34d;
  --on-accent:#fdba74;
  --on-danger:#fca5a5;
  --sg-red-text:#fca5a5;
  --accent-btn:#c2410c;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 20px 40px -12px rgba(0,0,0,.6);

  --ink:#f1f5f9;
  --line:#334155;
  --panel:#1e293b;
  --bad:#fb923c;
  --gold:#fbbf24;

  --sg-text:#f1f5f9;
  --sg-muted:#cbd5e1;
  --sg-border:#334155;
  --sg-bg:#0f172a;
  --sg-soft:#1e293b;
  --sg-indigo-light:#312e81;
  --sg-red-light:#4c1d24;
  --sg-red:#fca5a5;
  --sg-shadow:0 4px 14px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------
   3. BASELINE + SHARED CHROME
   Pages that never set a body background (legal pages, SEO pages) would
   otherwise sit on the browser default. Declared here, before every page's
   own stylesheet, so any page that sets its own still wins.
   --------------------------------------------------------------- */
body{background:var(--bg);color:var(--text);}
input,select,textarea{background:var(--card);color:var(--text);}
input::placeholder,textarea::placeholder{color:var(--text-soft);}

/* app.css hard-codes the nav as translucent white; retint it per theme. */
:root[data-theme="dark"] .appnav,
:root[data-theme="dark"] .nav{background:var(--sg-bg);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .appnav,
  :root:not([data-theme="light"]) .nav{background:var(--sg-bg);}
}


/* Active nav pill: app.css inks it --sg-indigo-dark, which is unreadable on
   the dark --sg-indigo-light chip. --sg-indigo-dark itself must stay dark
   because it is also the primary button's hover fill (white text). */
:root[data-theme="dark"] .appnav-link.is-active,
:root[data-theme="dark"] .appnav-me.is-active{color:#c7d2fe;}
:root[data-theme="dark"] .moe-ribbon{color:#fca5a5;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .appnav-link.is-active,
  :root:not([data-theme="light"]) .appnav-me.is-active{color:#c7d2fe;}
  :root:not([data-theme="light"]) .moe-ribbon{color:#fca5a5;}
}

/* ---------------------------------------------------------------
   4. THEME TOGGLE
   --------------------------------------------------------------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);flex:0 0 auto;padding:0;
  background:var(--surface-card);color:var(--text-primary);
  border:2px solid var(--accent-border);border-radius:var(--radius);
  box-shadow:0 3px 0 0 var(--border-depth);cursor:pointer;font-size:1.1rem;
  line-height:1;font-family:inherit;
  transition:background var(--press),box-shadow var(--press),transform var(--press);}
.theme-toggle:hover{background:var(--surface-canvas);border-color:var(--border-depth);}
.theme-toggle:active{transform:translateY(3px);box-shadow:none;}
.theme-toggle:focus-visible{outline:3px solid var(--brand-text);outline-offset:3px;}
.theme-toggle .icon-dark{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-dark{display:inline;}
:root[data-theme="dark"] .theme-toggle .icon-light{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-dark{display:inline;}
  :root:not([data-theme="light"]) .theme-toggle .icon-light{display:none;}
}

/* A floating toggle for pages that have no app nav to host one. */
.theme-toggle.is-floating{position:fixed;right:18px;bottom:84px;z-index:9998;
  box-shadow:0 3px 0 0 var(--border-depth),0 6px 18px rgba(0,0,0,.18);}

@media (prefers-reduced-motion:reduce){
  .theme-toggle{transition-duration:1ms;}
  .theme-toggle:active{transform:none;}
}