*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Two themes, both driven entirely from here — see body.theme-cream below.
   Anything that needs to flip between them has to resolve through a var, which
   is why the washes, scrims and shadows are named rather than written inline. */
:root {
    --bg:         #060b14;
    --panel:      #0a1220;
    --panel2:     #0f1a2e;
    /* Borders are alpha rather than hex so they ride whatever surface they land
       on instead of being mixed against one. --border-strong is for the places
       where the border IS the affordance — a checkbox, a ghost button, a field
       at rest — and would stop reading as one if it softened with the rest.
       --seam is the fold that replaces the drawn 1px line between panels. */
    --seam:          rgba(255, 255, 255, 0.05);
    --border:        rgba(150, 195, 235, 0.14);
    --border-strong: rgba(150, 195, 235, 0.30);
    --scrollbar:     rgba(150, 195, 235, 0.22);
    --accent:     #7eb8e8;
    --gold:       #dda878;
    --cream:      #faf4ec;
    --text:       #dce8f5;
    --muted:      #6a88a8;
    --danger:     #d48a8a;
    --player-bg:  #0e1f35;
    --player-bdr: #2a5080;
    --input-dark: #040810;

    /* Hover/raised washes (--wash, --wash-2) and the heavier gold states
       (--gold-wash-2, --gold-line) are carried by the cream and espresso
       themes only — this one has none. */
    /* Tinted states, keyed to --accent and --gold. */
    --accent-wash: rgba(126,184,232,0.10);
    --gold-wash:   rgba(200,160,40,0.10);
    --gold-line-2: rgba(200,160,40,0.40);
    /* Drop shadows and full-screen scrims. Near-black is right over a dark
       page and far too heavy over cream, so both are theme-owned. */
    --shadow-sm:   rgba(0,0,0,0.40);
    --shadow-md:   rgba(0,0,0,0.45);
    --shadow-lg:   rgba(0,0,0,0.80);
    --scrim:       rgba(0,0,0,0.75);
    /* Surfaces that were their own hand-mixed colour rather than a palette step. */
    --header-bg:    #060f1f;
    --header-ink:   #6a88a8;
    /* Modals get their own surface rather than sharing the sidebar's, so a
       dialog reads as laid on top of the page instead of cut out of it. */
    --modal-bg:     var(--panel);
    --token-bg:     linear-gradient(135deg, #060e1c, #0a1428);
    --surface-veil: rgba(6,11,20,0.9);
    --em-ink:       #c8dfff;
    --frog-ink:     #8ecb6a;
    --frog-wash:    rgba(100,180,80,0.10);
    --frog-line:    rgba(100,200,80,0.25);
    --ritual-ink:   #e8a0bd;
    --scene-fade:   linear-gradient(to bottom,
                        rgba(6,11,20,0.30) 0%,
                        rgba(6,11,20,0.18) 35%,
                        rgba(6,11,20,0.62) 68%,
                        rgba(6,11,20,0.92) 88%,
                        #060b14             100%);
    /* Primary action buttons. */
    --btn-grad:     linear-gradient(135deg, #0a1e3a, #0d2a50);
    --btn-grad-hi:  linear-gradient(135deg, #0d2a52, #104070);
    --btn-border:   #2a5a8a;
    /* Buttons keep a dark fill in both themes, so their label stays light in
       both — it can't ride on --cream, which inverts. */
    --btn-ink:      #faf4ec;
}

/* ── Coffee & cream ───────────────────────────────────────────────────────────
   Light theme: cream page, coffee ink. --cream and --input-dark keep their
   names but invert in role (brightest text becomes the darkest ink; the input
   fill becomes the lightest surface), so every existing rule keeps working. */
body.theme-cream {
    /* Depth runs the opposite way to the dark theme: the page is the *darkest*
       surface and panels sit lighter on top of it, so raised things read as
       raised. Keeping every surface within a few percent of --bg (the way the
       dark theme can get away with) just reads as one flat sheet of cream. */
    /* Four surfaces, deliberately a step apart — the warmth goes flat if they
       all sit within a few percent of each other:
         header  #694e37  coffee, the theme's dark note
         sidebar #f1e6d4  aged paper
         page    #f7f2ea  cooler parchment, the reading surface
         modal   #f2dfc5  richer than either, a notebook laid on the desk    */
    --bg:         #f7f2ea;   /* story / reading area — the one pale surface */
    --panel:      #dcc7a3;   /* sidebar and cards */
    --panel2:     #cdb590;   /* inner cards, menus, active rows */
    --seam:          rgba(60, 40, 20, 0.11);
    --border:        rgba(90, 62, 38, 0.16);
    --border-strong: rgba(90, 62, 38, 0.36);
    --scrollbar:     rgba(90, 62, 38, 0.26);
    --accent:     #8c6645;   /* coffee — checkboxes, selection, focus */
    /* Deeper than a brass would be on white: these have to hold up on the
       sidebar too, and the lighter bronze washed out completely there. */
    --gold:       #875c20;   /* brass — tabs, token count, separators, rules */
    --cream:      #2e2219;   /* headings ink */
    --text:       #3e2f25;   /* body — never pure black, it reads as print */
    --muted:      #63503f;
    --danger:     #a33c3c;
    --player-bg:  #e8d6b6;   /* the player's own posts, against the page */
    --player-bdr: #a67b47;
    --input-dark: #fbf8f4;   /* fields sit lighter than the page, not darker */
    --modal-bg:   #e7d3b2;
    /* Deep enough to read against the sidebar — the dark theme's leaf green
       disappears into beige. */
    --frog-ink:   #3f6b24;
    --frog-wash:  rgba(90,150,60,0.16);
    --frog-line:  rgba(70,120,45,0.38);
    /* Same problem as the frog: blossom pink vanishes into beige, so this is
       the deep rose end of it. */
    --ritual-ink: #a03f63;

    --wash:        rgba(105,78,55,0.10);   /* hover lands on ~#e8d6bc */
    --wash-2:      rgba(105,78,55,0.16);
    --accent-wash: rgba(140,102,69,0.14);
    --gold-wash:   rgba(179,138,90,0.14);
    --gold-wash-2: rgba(179,138,90,0.26);
    --gold-line:   rgba(179,138,90,0.40);
    --gold-line-2: rgba(179,138,90,0.65);
    /* Warm and a touch heavier than the dark theme's — on cream, shadow is the
       only thing left doing the work that glow does on navy. */
    --shadow-sm:   rgba(48,28,10,0.12);
    --shadow-md:   rgba(48,28,10,0.16);
    --shadow-lg:   rgba(40,25,10,0.22);
    --scrim:       rgba(46,34,25,0.55);
    --header-bg:    #694e37;
    --header-ink:   #dcc19b;
    --token-bg:     linear-gradient(135deg, #ddc9a6, #cfb68f);
    --surface-veil: rgba(247,242,234,0.92);
    --em-ink:       #6b5340;
    /* Keeps a light dark-tint over the art up top for legibility, then turns
       parchment from the midpoint down to meet the feed. */
    --scene-fade:   linear-gradient(to bottom,
                        rgba(46,34,25,0.22) 0%,
                        rgba(46,34,25,0.10) 40%,
                        rgba(247,242,234,0.20) 76%,
                        rgba(247,242,234,0.78) 92%,
                        #f7f2ea             100%);
    --btn-grad:     linear-gradient(135deg, #7d5b3e, #6b4c33);
    --btn-grad-hi:  linear-gradient(135deg, #8f6a4b, #7a583c);
    --btn-border:   #c9aa7d;
    --btn-ink:      #fff8ed;
}

/* ── Espresso ─────────────────────────────────────────────────────────────────
   Dark like Midnight, warm like the cream theme: roasted browns under crema and
   caramel. Nothing inverts here — every rule that works on navy works on this,
   so it only restates the palette. */
body.theme-espresso {
    --bg:         #14100c;   /* page — the darkest surface */
    --panel:      #271f17;   /* sidebar and cards */
    --panel2:     #3a2e21;   /* inner cards, menus, active rows */
    --seam:          rgba(255, 240, 220, 0.06);
    --border:        rgba(240, 213, 173, 0.13);
    --border-strong: rgba(240, 213, 173, 0.29);
    --scrollbar:     rgba(240, 213, 173, 0.20);
    --accent:     #e0b47b;   /* caramel — links, focus, selection */
    --gold:       #f0d5ad;   /* crema — tabs, token count, separators */
    --cream:      #fbf5ec;   /* headings */
    --text:       #ebe1d2;
    --muted:      #ab9880;
    --danger:     #d48a8a;
    --player-bg:  #2e2418;
    --player-bdr: #7a5c39;
    --input-dark: #0d0a07;   /* fields punch back down, so they read as wells */
    --modal-bg:   #302619;   /* laid on top of the sidebar, not level with it */

    --wash:        rgba(255,240,220,0.06);
    --wash-2:      rgba(255,240,220,0.11);
    --accent-wash: rgba(224,180,123,0.14);
    --gold-wash:   rgba(240,213,173,0.12);
    --gold-wash-2: rgba(240,213,173,0.20);
    --gold-line:   rgba(240,213,173,0.30);
    --gold-line-2: rgba(240,213,173,0.48);
    --shadow-sm:   rgba(0,0,0,0.45);
    --shadow-md:   rgba(0,0,0,0.55);
    --shadow-lg:   rgba(0,0,0,0.85);
    --scrim:       rgba(10,7,5,0.78);
    --header-bg:    #0d0a07;
    --header-ink:   #ab9880;
    --token-bg:     linear-gradient(135deg, #241c14, #33281b);
    --surface-veil: rgba(20,16,12,0.92);
    --em-ink:       #d9c3a4;
    --frog-ink:     #9ed47a;
    --frog-wash:    rgba(110,190,85,0.12);
    --frog-line:    rgba(110,200,85,0.28);
    --ritual-ink:   #eeaac0;
    --scene-fade:   linear-gradient(to bottom,
                        rgba(20,16,12,0.30) 0%,
                        rgba(20,16,12,0.18) 35%,
                        rgba(20,16,12,0.62) 68%,
                        rgba(20,16,12,0.92) 88%,
                        #14100c             100%);
    --btn-grad:     linear-gradient(135deg, #3a2a1a, #543c23);
    --btn-grad-hi:  linear-gradient(135deg, #4c3620, #6b4d2c);
    --btn-border:   #6b4d2c;
    --btn-ink:      #f7efe3;
}

html { height: 100%; max-width: 100vw; overflow-x: hidden; font-size: 125%; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    display: grid;
    grid-template-columns: 18.75rem 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "banner  banner"
        "header  header"
        "sidebar main";
    height: 100vh;
    overflow: hidden;
    max-width: 100vw;
}