/* === Design Tokens — single source of truth ============================
   Every page that links this file inherits the same palette, accents,
   borders, and shadows. Page-level <style> blocks can still override
   any token; that's the safety hatch. Don't override the SAME token in
   the same page — change it here and reload everywhere.

   Light theme = "Tegami" practice paper:
     - warm cream backgrounds (paper / sheet)
     - sumi-ink near-black for text
     - shu-iro vermillion as the single accent (active states, links)
     - warm tan rules for structural borders

   Dark theme:
     - deep navy backgrounds
     - cool indigo accent (the existing palette — not yet Tegami-skinned;
       a future "Tegami dark" variant could swap to charcoal + brass)
   ====================================================================== */

:root {
    /* ── Surface ──────────────────────────────────────────────────── */
    --bg:                  #fbf6ea;     /* panels, canvas, content */
    --bg-outer:            #f4ede0;     /* page background, page-content */

    /* ── Text ─────────────────────────────────────────────────────── */
    --text:                #1f1a1a;
    --text-muted:          #54403a;
    --text-faint:          #7a6260;
    --heading:             #b32a2a;     /* page headings — same as accent */

    /* ── Accent (vermillion) ──────────────────────────────────────── */
    --accent:              #b32a2a;
    --accent-bg:           rgba(179, 42, 42, 0.07);
    --accent-border:       rgba(179, 42, 42, 0.16);
    --accent-hover:        rgba(179, 42, 42, 0.10);
    --accent-active:       rgba(179, 42, 42, 0.12);

    /* ── Sumi-ink secondary ───────────────────────────────────────────
       Warm charcoal, distinctly gray rather than near-black. Used for
       toolbar fills, panel headers, idle action buttons — so the red
       accent stays reserved for active/featured items. */
    --ink-fill:            #4a4248;
    --ink-fill-soft:       #5a525a;
    --on-ink:              #f5f1ec;
    --on-ink-muted:        rgba(245, 241, 236, 0.62);
    --on-ink-border:       rgba(245, 241, 236, 0.22);
    --on-ink-hover:        rgba(245, 241, 236, 0.12);
    --ink-text:            #2a2530;
    --ink-border:          rgba(40, 30, 35, 0.18);
    --ink-bg:              rgba(40, 30, 35, 0.04);
    --ink-hover:           rgba(40, 30, 35, 0.08);

    /* ── Status colors ────────────────────────────────────────────── */
    --green:               #2a9e62;
    --green-bg:            rgba(42, 158, 98, 0.12);
    --green-border:        rgba(42, 158, 98, 0.28);
    --orange:              #c07a10;
    --orange-bg:           rgba(192, 122, 16, 0.12);
    --orange-border:       rgba(192, 122, 16, 0.28);
    --red:                 #b32a2a;
    --red-bg:              rgba(179, 42, 42, 0.13);

    /* ── Cards + shadows ──────────────────────────────────────────── */
    --card-bg:             linear-gradient(145deg, #ffffff, #f4eeee);
    --card-shadow:         0 10px 40px rgba(90, 30, 40, 0.10),
                           0 0 0 1px rgba(179, 42, 42, 0.05);
    --card-shadow-hover:   0 14px 50px rgba(90, 30, 40, 0.14),
                           0 0 0 1px rgba(179, 42, 42, 0.08);

    /* ── Borders + rules ──────────────────────────────────────────── */
    --subtle-bg:           rgba(179, 42, 42, 0.03);
    --carousel-bg:         #f4eeea;
    --subtle-border:       #e8dec9;     /* warm tan — paler */
    --container-border:    #d9cdb4;     /* warm tan — denser */
    --subtle-hover:        rgba(179, 42, 42, 0.06);

    /* ── Grids + overlays ─────────────────────────────────────────── */
    --guide-line:          rgba(0, 0, 0, 0.09);
    --grid-line:           rgba(179, 42, 42, 0.45);
    --overlay-bg:          rgba(250, 250, 250, 0.92);

    /* ── Game / mini-component tokens ─────────────────────────────── */
    --puck-bg:             rgba(179, 42, 42, 0.05);
    --puck-border:         rgba(179, 42, 42, 0.16);
    --divider:             rgba(179, 42, 42, 0.09);
    --char-fill:           rgba(80, 30, 40, 0.18);
    --timer-bg:            rgba(179, 42, 42, 0.05);
    --timer-fill:          rgba(179, 42, 42, 0.40);
    --timer-urgent:        rgba(179, 42, 42, 0.48);
    --ring-bg:             rgba(179, 42, 42, 0.10);
    --mastery-bar-bg:      rgba(179, 42, 42, 0.10);

    /* ── Close-button / dismiss ───────────────────────────────────── */
    --close-bg:            rgba(0, 0, 0, 0.06);
    --close-border:        rgba(0, 0, 0, 0.12);
    --close-color:         #888;
    --close-hover:         rgba(0, 0, 0, 0.10);

    /* ── Footer ───────────────────────────────────────────────────── */
    --footer-color:        #857575;
    --footer-link:         #8e7575;
}

/* ────────────────────────────────────────────────────────────────────
   Dark theme — kept as the original cool-indigo palette. Not yet
   "Tegami dark"-skinned; a future inkstone variant could swap to
   warm charcoal + brass. Toggled by adding `dark` to <body>.
   ──────────────────────────────────────────────────────────────────── */
body.dark {
    --bg:                  #0f0f1a;
    --bg-outer:            #080812;
    --text:                #e0e0e0;
    --text-muted:          #888;
    --text-faint:          #666;
    --heading:             #fff;

    --accent:              #7c83ff;
    --accent-bg:           rgba(124, 131, 255, 0.08);
    --accent-border:       rgba(124, 131, 255, 0.15);
    --accent-hover:        rgba(124, 131, 255, 0.10);
    --accent-active:       rgba(124, 131, 255, 0.15);

    --green:               #50d890;
    --green-bg:            rgba(80, 216, 144, 0.15);
    --green-border:        rgba(80, 216, 144, 0.25);
    --orange:              #ffaa44;
    --orange-bg:           rgba(255, 170, 68, 0.15);
    --orange-border:       rgba(255, 170, 68, 0.25);
    --red:                 #ff6b8a;
    --red-bg:              rgba(255, 107, 138, 0.2);

    --card-bg:             linear-gradient(145deg, #1a1a2e, #16213e);
    --card-shadow:         0 20px 60px rgba(0, 0, 0, 0.5),
                           0 0 0 1px rgba(255, 255, 255, 0.05),
                           inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --card-shadow-hover:   0 25px 70px rgba(0, 0, 0, 0.6),
                           0 0 0 1px rgba(255, 255, 255, 0.08),
                           inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --subtle-bg:           rgba(255, 255, 255, 0.03);
    --carousel-bg:         #0d0d18;
    --subtle-border:       rgba(255, 255, 255, 0.06);
    --subtle-hover:        rgba(255, 255, 255, 0.05);
    --container-border:    rgba(124, 131, 255, 0.35);
    --guide-line:          rgba(255, 255, 255, 0.12);
    --grid-line:           rgba(255, 255, 255, 0.45);
    --overlay-bg:          rgba(0, 0, 0, 0.8);

    --puck-bg:             rgba(255, 255, 255, 0.08);
    --puck-border:         rgba(255, 255, 255, 0.15);
    --divider:             rgba(255, 255, 255, 0.04);
    --char-fill:           rgba(180, 185, 210, 0.20);
    --timer-bg:            rgba(255, 255, 255, 0.03);
    --timer-fill:          rgba(124, 131, 255, 0.35);
    --timer-urgent:        rgba(255, 107, 138, 0.40);
    --ring-bg:             rgba(255, 255, 255, 0.06);
    --mastery-bar-bg:      rgba(255, 255, 255, 0.08);

    --close-bg:            rgba(255, 255, 255, 0.05);
    --close-border:        rgba(255, 255, 255, 0.10);
    --close-color:         #666;
    --close-hover:         rgba(255, 255, 255, 0.10);
    --footer-color:        #555;
    --footer-link:         #666;

    /* Sumi-ink secondary in dark mode — slightly elevated panels on
       top of the deeper page background. */
    --ink-fill:            #1a1a26;
    --ink-fill-soft:       #24243a;
    --on-ink:              #e0e0e0;
    --on-ink-muted:        rgba(224, 224, 224, 0.55);
    --on-ink-border:       rgba(224, 224, 224, 0.18);
    --on-ink-hover:        rgba(224, 224, 224, 0.10);
    --ink-text:            #c8c4cc;
    --ink-border:          rgba(220, 215, 230, 0.18);
    --ink-bg:              rgba(220, 215, 230, 0.04);
    --ink-hover:           rgba(220, 215, 230, 0.08);
}