/* ============================================================================
   OakTree Games — Theme System
   Four themes triggered via data-theme on <html>. Persisted to localStorage.
   ============================================================================ */

/* --- Default theme is "cosmic" (defined in main.css :root) --- */

/* --- FOREST: deep canopy green, lush + warm gold accents --- */
html[data-theme="forest"] {
    --bg-void:      #060d09;
    --bg-deep:      #0b1611;
    --bg-panel:     #11241a;
    --bg-panel-hi:  #173427;
    --bg-elev:      #1d422f;

    --text-pri:     #eaf3eb;
    --text-sec:     #a7c4ad;
    --text-mute:    #647d6a;

    --accent-oak:    #8bd49b;
    --accent-cosmic: #f6d27a;
    --accent-aurora: #66d9b3;
    --accent-rose:   #ffa3b9;     /* softer rose against green */
    --accent-amber:  #ffcf72;
    --line-faint:    rgba(139,212,155,0.18);
    --line-soft:     rgba(139,212,155,0.32);
    --line-strong:   rgba(139,212,155,0.55);

    --glow-oak:  0 0 26px rgba(139, 212, 155, 0.45);
    --glow-cosm: 0 0 34px rgba(246, 210, 122, 0.42);
}
/* Forest-specific surface accents — softer gradient nav, leafy borders */
html[data-theme="forest"] .nav        { background: rgba(11, 22, 17, 0.82); }
html[data-theme="forest"] .nav.scrolled { background: rgba(11, 22, 17, 0.96); }
html[data-theme="forest"] .panel,
html[data-theme="forest"] .feature-card,
html[data-theme="forest"] .entity-card,
html[data-theme="forest"] .donate-tier {
    border-color: rgba(139,212,155,0.22);
}
html[data-theme="forest"] .btn-gold {
    background: linear-gradient(135deg, var(--accent-oak), var(--accent-cosmic));
    color: var(--bg-void) !important;
}

/* --- VOLCANIC: scorched red/black, molten gold + ember orange --- */
html[data-theme="volcanic"] {
    --bg-void:      #0d0604;
    --bg-deep:      #1a0907;
    --bg-panel:     #28110b;
    --bg-panel-hi:  #381810;
    --bg-elev:      #4a1f15;

    --text-pri:     #fbeae3;
    --text-sec:     #d4a89c;
    --text-mute:    #846257;

    --accent-oak:    #ff8552;       /* "oak" reassigned to ember orange */
    --accent-oak-d:  #c45225;
    --accent-cosmic: #ffd86b;
    --accent-aurora: #ff6b6b;
    --accent-rose:   #ff4e6b;
    --accent-violet: #ff7fb0;
    --accent-amber:  #ffa845;
    --line-faint:    rgba(255,133,82,0.22);
    --line-soft:     rgba(255,133,82,0.42);
    --line-strong:   rgba(255,133,82,0.65);

    --glow-oak:  0 0 28px rgba(255, 133, 82, 0.55);
    --glow-cosm: 0 0 36px rgba(255, 216, 107, 0.45);
}
html[data-theme="volcanic"] .nav        { background: rgba(13, 6, 4, 0.84); border-bottom-color: rgba(255,133,82,0.22); }
html[data-theme="volcanic"] .nav.scrolled { background: rgba(13, 6, 4, 0.96); }
html[data-theme="volcanic"] .btn-gold {
    background: linear-gradient(135deg, #ff8552 0%, #ffd86b 100%);
    color: var(--bg-void) !important;
}
html[data-theme="volcanic"] .scroll-progress {
    background: linear-gradient(90deg, #ff4e6b, #ff8552, #ffd86b);
}
html[data-theme="volcanic"] .cosmos {
    background:
        radial-gradient(ellipse at 25% 15%, rgba(255,133,82,0.12), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255,107,107,0.14), transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(255,216,107,0.06), transparent 60%),
        linear-gradient(180deg, #0d0604 0%, #1a0907 60%, #0d0604 100%);
}

/* --- LIGHT: parchment / daylight (for accessibility) --- */
html[data-theme="light"] {
    --bg-void:      #f3f1ea;
    --bg-deep:      #e9e5d8;
    --bg-panel:     #f7f5ee;
    --bg-panel-hi:  #fffdf6;
    --bg-elev:      #ffffff;

    --text-pri:     #15201a;
    --text-sec:     #3a4a3f;
    --text-mute:    #6a7a6e;

    --accent-oak:    #2f7a3d;
    --accent-oak-d:  #1f5828;
    --accent-cosmic: #b5860f;
    --accent-aurora: #1d8b73;
    --accent-rose:   #c43050;
    --line-faint:    rgba(15,32,22,0.12);
    --line-soft:     rgba(15,32,22,0.24);
    --line-strong:   rgba(15,32,22,0.42);

    --shadow-pixel-sm: 0 2px 0 0 rgba(0,0,0,0.10);
    --shadow-pixel-md: 0 4px 0 0 rgba(0,0,0,0.14);
    --shadow-pixel-lg: 0 8px 0 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(15,32,22,0.18);
}
/* DO NOT set background on body for any theme — body MUST remain
   transparent so the canvas backdrop at z-index:-1 is visible. The html
   element paints --bg-void per-theme; that's enough. */
html[data-theme="light"] .cosmos {
    background:
        radial-gradient(ellipse at 25% 15%, rgba(47,122,61,0.10), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(181,134,15,0.08), transparent 55%),
        linear-gradient(180deg, #f3f1ea 0%, #e9e5d8 60%, #f3f1ea 100%);
}
html[data-theme="light"] .cosmos::before,
html[data-theme="light"] .cosmos::after { display: none; }
html[data-theme="light"] .nav { background: rgba(247, 245, 238, 0.84); }
html[data-theme="light"] .nav.scrolled { background: rgba(247, 245, 238, 0.96); }
html[data-theme="light"] ::selection { background: var(--accent-oak); color: #fff; }
html[data-theme="light"] .nav-cta { color: #fff !important; }
html[data-theme="light"] .btn { color: #fff !important; }
html[data-theme="light"] .btn-gold { color: #fff !important; }
html[data-theme="light"] .btn-ghost { color: var(--text-pri) !important; }

/* --- STUDIO: bark, moss + heartwood amber. Not a swatch — a page scope. ---
   Applied via data-page-theme="studio" in the page markup itself (studio
   pages: home, about, devlog, roadmap, games, newsletter, support,
   thank-you — plus cc + infinite-initiative, which layer their own
   data-game accent scopes on top). The attribute is present before any JS runs, so the scope
   holds with zero FOUC and even with scripts disabled. widgets.js mirrors
   it into data-theme and skips the starfield canvas on these pages; the
   backdrop is the .grove layer below instead of .cosmos. Cosmic Scale
   pages carry no page scope and keep the four user-pickable sky themes. */
html[data-page-theme="studio"] {
    --bg-void:      #0c0f0a;
    --bg-deep:      #131811;
    --bg-panel:     #1b2417;
    --bg-panel-hi:  #253120;
    --bg-elev:      #2e3d28;

    --text-pri:     #eef3e6;
    --text-sec:     #aec3a2;
    --text-mute:    #6b7d62;

    --accent-oak:    #8fce7e;      /* leaf green — the brand accent */
    --accent-cosmic: #d9a441;      /* heartwood amber (ring gold) */
    --accent-aurora: #9fd8b7;      /* sage mint for highlights */
    --accent-rose:   #e8927c;      /* autumn leaf */
    --accent-amber:  #e0a94f;
    --line-faint:    rgba(143,206,126,0.16);
    --line-soft:     rgba(143,206,126,0.30);
    --line-strong:   rgba(143,206,126,0.52);

    --glow-oak:  0 0 26px rgba(143, 206, 126, 0.42);
    --glow-cosm: 0 0 32px rgba(217, 164, 65, 0.38);
}
html[data-page-theme="studio"] .nav        { background: rgba(12, 15, 10, 0.84); }
html[data-page-theme="studio"] .nav.scrolled { background: rgba(12, 15, 10, 0.96); }
html[data-page-theme="studio"] .btn-gold {
    background: linear-gradient(135deg, var(--accent-oak), var(--accent-cosmic));
    color: var(--bg-void) !important;
}
html[data-page-theme="studio"] .scroll-progress {
    background: linear-gradient(90deg, #8fce7e, #d9a441);
}

/* All themes — smooth color transitions when switching */
html[data-theme] body,
html[data-theme] .nav,
html[data-theme] .panel,
html[data-theme] .feature-card,
html[data-theme] .entity-card,
html[data-theme] .donate-tier,
html[data-theme] .tier-card {
    transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease;
}

/* ============================================================================
   FONT SIZE CONTROL (Settings panel)
   ----------------------------------------------------------------------------
   Body font-size was hard-coded at 19px so changing `html { font-size }`
   used to be a no-op for paragraphs. Now the body multiplies a CSS variable
   that the settings UI flips, and key text-heavy elements (h1, h2, h3, p,
   li, dt, dd, summary) all scale together. Headers using pixel fonts at
   tiny px sizes are left alone — they'd become illegible at xlarge.
   ============================================================================ */
:root                    { --font-scale: 1; }
html[data-font="small"]  { --font-scale: 0.85; }
html[data-font="medium"] { --font-scale: 1; }
html[data-font="large"]  { --font-scale: 1.18; }
html[data-font="xlarge"] { --font-scale: 1.36; }
/* The body font-size is bumped via the multiplier so paragraphs, list
   items, dt/dd, and any element that doesn't pin a px size all scale
   together with the Settings → Text Size buttons. Elements that hard-pin
   their size (the giant hero headline, pixel chips, etc.) stay anchored
   to their design size on purpose. Base = 16.5px (Inter) — keep in sync
   with the body rule in main.css. */
body {
    font-size: calc(16.5px * var(--font-scale)) !important;
}

/* ============================================================================
   REDUCED MOTION (Settings panel — overrides prefers-reduced-motion)
   ============================================================================ */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0.001ms !important;
    transition-duration: 0.001ms !important;
}
html[data-motion="reduced"] .cosmos::before,
html[data-motion="reduced"] .cosmos::after,
html[data-motion="reduced"] .grove::before,
html[data-motion="reduced"] .grove::after { animation: none !important; }

/* ============================================================================
   HIGH CONTRAST
   ============================================================================ */
html[data-contrast="high"] {
    --text-pri:   #ffffff;
    --text-sec:   #e0e6e2;
    --text-mute:  #b3bdb7;
    --line-faint: rgba(255,255,255,0.30);
    --line-soft:  rgba(255,255,255,0.55);
    --line-strong: rgba(255,255,255,0.80);
}
html[data-contrast="high"][data-theme="light"] {
    --text-pri:   #000000;
    --text-sec:   #1a1a1a;
    --text-mute:  #444444;
    --line-faint: rgba(0,0,0,0.35);
    --line-soft:  rgba(0,0,0,0.55);
}

/* ============================================================================
   PER-THEME BACKDROPS
   ----------------------------------------------------------------------------
   The animated objects (planets, stars, asteroids, shooting stars, nebula
   embers, black holes, …) are all painted into a <canvas> by widgets.js
   (initCosmosCanvas).  This file only handles the *static base layer* that
   the canvas paints on top of — soft theme-tinted gradients establishing
   the depth and mood of each sky.  Look in js/widgets.js → initCosmosCanvas
   for the moving pixel-art entities and the mouse-gravity behaviour.
   ============================================================================ */

/* The canvas painted by widgets.js mounts directly to <body> (NOT inside
   .cosmos) so it doesn't inherit .cosmos's z-index:-10 stacking context.
   z-index:-1 sits behind every interactive piece of content but above the
   body background — the canonical "behind text" layer for atmosphere. */
.cosmos-canvas,
.grove-canvas,
.cc-canvas,
.cardtable-canvas {
    position: fixed;
    inset: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: -1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Theme tints for the static base layer behind the canvas. */
html[data-theme="forest"] .cosmos {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(139, 212, 155, 0.10), transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(246, 210, 122, 0.08), transparent 60%),
        linear-gradient(180deg, #060d09 0%, #0b1611 60%, #060d09 100%);
}
html[data-theme="volcanic"] .cosmos {
    background:
        radial-gradient(ellipse at 25% 15%, rgba(255, 133, 82, 0.16), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 107, 107, 0.14), transparent 60%),
        radial-gradient(ellipse at 50% 95%, rgba(255, 216, 107, 0.06), transparent 60%),
        linear-gradient(180deg, #0d0604 0%, #1a0907 60%, #0d0604 100%);
}
/* Reduced motion: canvas runs in still-frame mode — entities are drawn at
   their initial positions and never updated.  The animation loop short-
   circuits inside the JS so this is mostly defensive. */
html[data-motion="reduced"] .cosmos-canvas { opacity: 0.55; }

/* ============================================================================
   GROVE — the studio backdrop (data-page-theme="studio" pages)
   ----------------------------------------------------------------------------
   The studio counterpart of .cosmos: same fixed -10 layer, but canopy light
   and heartwood rings instead of nebulae and stars. No canvas — widgets.js
   deliberately skips initCosmosCanvas on scoped pages. ::before drifts a
   sparse field of leaf/amber specks (reusing main.css's drift-stars
   keyframes); ::after lays faint concentric growth rings. Both stop under
   reduced motion via the rule above.
   ============================================================================ */
.grove {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 12%, rgba(143, 206, 126, 0.10), transparent 55%),
        radial-gradient(ellipse at 78% 68%, rgba(217, 164, 65, 0.07), transparent 58%),
        radial-gradient(ellipse at 50% 100%, rgba(19, 24, 17, 0.9), transparent 70%),
        linear-gradient(180deg, #0c0f0a 0%, #131811 55%, #0c0f0a 100%);
}
.grove::before {
    content: "";
    position: absolute;
    inset: -900px -800px 0 0;
    background-image:
        radial-gradient(1px 1px at 8% 12%,  rgba(143,206,126,0.55), transparent 100%),
        radial-gradient(1px 1px at 22% 64%, rgba(217,164,65,0.45), transparent 100%),
        radial-gradient(2px 2px at 37% 30%, rgba(159,216,183,0.35), transparent 100%),
        radial-gradient(1px 1px at 52% 80%, rgba(143,206,126,0.40), transparent 100%),
        radial-gradient(1px 1px at 66% 18%, rgba(217,164,65,0.38), transparent 100%),
        radial-gradient(2px 2px at 79% 52%, rgba(143,206,126,0.30), transparent 100%),
        radial-gradient(1px 1px at 91% 86%, rgba(159,216,183,0.42), transparent 100%);
    background-size: 1100px 900px;
    animation: drift-stars 300s linear infinite;
    opacity: 0.6;
}
.grove::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 85% 115%,
            transparent 0 78px,
            rgba(143, 206, 126, 0.045) 78px 80px),
        repeating-radial-gradient(circle at -5% -15%,
            transparent 0 96px,
            rgba(217, 164, 65, 0.035) 96px 98px);
    opacity: 0.8;
}

/* Defensive: if a scoped page ever ships with leftover .cosmos markup,
   keep the sky layers dark and quiet there. */
html[data-page-theme] .cosmos::before,
html[data-page-theme] .cosmos::after { display: none; }

/* ============================================================================
   PER-GAME ACCENT SCOPES (layered on top of the studio scope)
   ----------------------------------------------------------------------------
   The two non-CS game pages keep the studio bark base but carry their own
   accent identity via data-game on <html>. Accents only — text, lines and
   surfaces stay studio.
   ============================================================================ */
/* Infinite Initiative — card-table teal on bark */
html[data-game="initiative"] {
    --accent-oak:    #66e0c6;
    --accent-cosmic: #ffe762;
    --accent-aurora: #66e0c6;
    --line-faint:    rgba(102,224,198,0.16);
    --line-soft:     rgba(102,224,198,0.30);
    --line-strong:   rgba(102,224,198,0.52);
    --glow-oak:  0 0 26px rgba(102, 224, 198, 0.42);
    --glow-cosm: 0 0 32px rgba(255, 231, 98, 0.38);
}
html[data-game="initiative"] .grove {
    background:
        radial-gradient(ellipse at 30% 12%, rgba(102, 224, 198, 0.09), transparent 55%),
        radial-gradient(ellipse at 78% 68%, rgba(255, 231, 98, 0.06), transparent 58%),
        linear-gradient(180deg, #0c0f0a 0%, #12181a 55%, #0c0f0a 100%);
}
/* Cc: — manila amber + paper white on carbon, with a CRT-green terminal
   highlight (GRIND_OS) and a restrained boss red held back for threat
   accents only. "Cc" is carbon copy, so the scope is office stationery:
   the folder, the sheet, the smudge the copy leaves behind.
   --cc-* are page-scoped extras the cc page and its canvas read by name. */
html[data-game="cc"] {
    --accent-oak:    #e8c46a;      /* manila amber — the primary accent */
    --accent-cosmic: #f2efe6;      /* paper white */
    --accent-aurora: #6ee7a0;      /* CRT green — GRIND_OS highlights */
    --accent-rose:   #d0492f;      /* boss red — threat accents only */
    --line-faint:    rgba(232,196,106,0.16);
    --line-soft:     rgba(232,196,106,0.30);
    --line-strong:   rgba(232,196,106,0.52);
    --glow-oak:  0 0 26px rgba(232, 196, 106, 0.42);
    --glow-cosm: 0 0 32px rgba(242, 239, 230, 0.30);

    --cc-paper:  #f2efe6;
    --cc-manila: #e8c46a;
    --cc-carbon: #14151a;
    --cc-crt:    #6ee7a0;
    --cc-boss:   #d0492f;
    --cc-smudge: #8f89a8;          /* the grey-purple a carbon copy leaves */
}
html[data-game="cc"] .grove {
    background:
        radial-gradient(ellipse at 24% 16%, rgba(232, 196, 106, 0.09), transparent 55%),
        radial-gradient(ellipse at 80% 74%, rgba(143, 137, 168, 0.07), transparent 58%),
        linear-gradient(180deg, #101116 0%, #17181d 55%, #101116 100%);
}