/* ============================================================
   shared/theme.css — THE single source of truth for colour
   ============================================================
   Every colour in StatBlocker resolves to one of the tokens
   below. Nothing else in the codebase should contain a raw hex
   or rgba() value (the only sanctioned exceptions are canvas /
   fog rendering in play.html, which needs real colour strings,
   and user-chosen colours stored in data).

   ── How to add a new theme ─────────────────────────────────
   1. Copy the `[data-theme="fantasy"]` block below, rename the
      attribute value, and change the token values. You only
      need to override what actually differs — every token you
      leave out inherits the dark base.
   2. Register it in shared/themes.js SB_THEMES with a label,
      description and `mode` ('dark' or 'light').
   That's it. No per-page work, no selector patching, and the
   swatch on the profile page paints itself.

   Each theme is matched on `[data-theme="..."]` rather than
   `:root[...]` alone, so putting the attribute on ANY element
   themes that subtree — that's how the theme picker renders a
   live preview of a theme that isn't currently active.

   ── Which text token? ──────────────────────────────────────
   --text-strong   bright text on a surface that is dark in
                   every theme (button labels, map overlays)
   --text-title    a page/card heading on the page surface —
                   flips to the accent colour on a light theme
   --text          body copy      --text-muted  secondary
   --text-dim      captions       --text-inverse dark text on a
                                  bright chip
   Getting this wrong is what makes a theme look broken, so
   pick by "what is this text sitting on", not by its colour.

   ── Token groups ───────────────────────────────────────────
   1. Channels   raw "r,g,b" triplets so any token can be tinted
   2. Surfaces   page / panel / raised backgrounds
   3. Text       strong → dim text ramp
   4. Accent     the brand red ramp (buttons, links, focus)
   5. Lines      borders and dividers
   6. Status     ok / amber / info / magic ramps
   7. Depth      shadows, glows and scrims
   8. Sheet      the printed character-sheet & statblock palette
   9. Spell tags spell-school / choice colours
  10. Aliases    legacy names kept so existing CSS keeps working
   ============================================================ */

:root,
[data-theme="dark"] {

  /* ── 1. Channels ───────────────────────────────────────────
     Raw triplets. Use as rgba(var(--accent-rgb), .25) whenever
     a colour needs transparency — that way a theme only has to
     restate the channel, not every tint. */
  --accent-rgb:      220, 38, 38;
  --accent-deep-rgb: 127, 29, 29;
  --sheen-rgb:       255, 255, 255;   /* highlights, hover washes */
  --shade-rgb:       0, 0, 0;         /* shadows, scrims          */
  --ok-rgb:          34, 197, 94;
  --ok-soft-rgb:     134, 239, 172;
  --ok-deep-rgb:     5, 120, 80;
  --amber-rgb:       252, 211, 77;
  --amber-deep-rgb:  202, 138, 4;
  --info-rgb:        96, 165, 250;
  --info-2-rgb:      59, 130, 246;
  --info-soft-rgb:   191, 219, 254;
  --info-deep-rgb:   29, 78, 216;
  --magic-rgb:       168, 85, 247;
  --magic-deep-rgb:  109, 40, 217;
  --trim-rgb:        212, 212, 218;   /* heading / metal trim     */
  --text-dim-rgb:    113, 113, 122;
  --line-rgb:        42, 42, 48;
  --gold-metal-rgb:  212, 175, 90;
  /* translucent surfaces (frosted panels, map overlays, fog) */
  --bg-page-rgb:     12, 12, 14;
  --bg-deep-rgb:     8, 8, 11;
  --bg-raised-rgb:   20, 20, 25;
  /* printed-sheet channels */
  --sheet-line-rgb:    196, 169, 125;
  --sheet-accent-rgb:  88, 24, 13;
  --sheet-bg-deep-rgb: 224, 208, 180;

  /* ── 2. Surfaces ──────────────────────────────────────────
     Darkest → lightest. `page` is the body, `panel` is a card,
     `raised` sits on top of a panel, `hover` is the lift state. */
  --bg-deep:     #060608;
  --bg-page:     #0C0C0E;
  --bg-inset:    #0E0E11;
  --bg-panel:    #131316;
  --bg-raised:   #1A1A20;
  --bg-raised-2: #222228;
  --bg-hover:    #252528;
  --bg-wash:     rgba(var(--sheen-rgb), .05);  /* hover tint    */
  --bg-wash-soft:rgba(var(--sheen-rgb), .03);
  --bg-sunken:   rgba(var(--shade-rgb), .3);   /* inset fields  */
  --surface-white: #fff;   /* a genuinely white field/paper surface */

  /* Controls that float ON TOP of user artwork — portrait cards,
     battlemap thumbnails, token overlays. The picture underneath can
     be any colour, so these keep a dark chip and light glyph in EVERY
     theme. Do not override them in a theme block; a light theme would
     make the chip vanish into whatever art is behind it. */
  --media-scrim:        rgba(8, 8, 10, .62);
  --media-scrim-strong: rgba(8, 8, 10, .85);
  --media-veil:         rgba(8, 8, 10, .55);  /* bottom fade on art */
  --media-line:         rgba(255, 255, 255, .65);
  --text-on-media:      #fff;
  /* Text on a CRIMSON surface — primary buttons, toasts, active tabs, badges.
     `--crimson` is an ALIAS for each theme's accent, so it is only red in the
     red themes; it's brass in Ocarina and gold in Rowena. That means the right
     foreground is whatever the theme nominates for its accent, not a fixed
     white — white on brass measures 1.9, which is unreadable.

     This exists as its own name because the call sites say "crimson", and a
     token that mirrors the surface it describes is what stops the next person
     reaching for `--text-strong` (the heading colour, dark red in Fantasy)
     and reintroducing red-on-red. */
  --text-on-crimson:    var(--text-on-accent);

  /* ── 3. Text ──────────────────────────────────────────────*/
  /* `text-strong` is bright text sitting on a DARK or accent surface
     (button labels, map overlays) — it stays light in every theme.
     `text-title` is a page/card heading sitting on the page surface,
     so a light theme flips it to the accent colour. */
  --text-strong:    #fff;
  --text-title:     #fff;
  --text:           #E8E8ED;    /* body copy                   */
  --text-heading:   #D4D4DA;    /* card titles, metal trim     */
  --text-muted:     #9898A0;    /* secondary copy              */
  --text-dim:       #71717A;    /* captions, placeholders      */
  --text-faint:     #555559;    /* disabled                    */
  --text-on-accent: #fff;
  --text-inverse:   #1A1A20;    /* dark text on a bright chip  */
  --text-field:     #fff;       /* value typed into a form field */

  /* ── 4. Accent ────────────────────────────────────────────*/
  --accent:         #DC2626;
  --accent-hover:   #EF4444;
  --accent-bright:  #F87171;
  --accent-soft:    #FCA5A5;   /* accent text on dark          */
  --accent-strong:  #991B1B;
  --accent-deep:    #7F1D1D;
  --accent-glow:    rgba(var(--accent-rgb), .25);

  /* ── 5. Lines ─────────────────────────────────────────────*/
  --line:        #2A2A30;
  --line-strong: #333338;
  --line-soft:   rgba(var(--sheen-rgb), .08);
  /* Metal trim: the highlight colour on hovered borders, filled
     pips and toggle knobs. Deliberately the same value as the
     heading/caption text ramp — trim and titles share a colour in
     both themes — but named for the role so its use on a border
     reads as intentional. `--gold`/`--gold-dim` are the legacy
     spellings of these two. */
  --trim:        var(--text-heading);
  --trim-dim:    var(--text-dim);

  /* ── 6. Status ────────────────────────────────────────────
     Each ramp: base → bright → soft(text) → deep(fill). */
  --ok:          #22C55E;
  --ok-bright:   #4ADE80;
  --ok-soft:     #86EFAC;
  --ok-deep:     #15803D;

  --amber:       #FCD34D;
  --amber-bright:#FDE047;
  --amber-soft:  #FDE68A;
  --amber-deep:  #B45309;

  --info:        #3B82F6;
  --info-bright: #60A5FA;
  --info-soft:   #BFDBFE;
  --info-deep:   #1D4ED8;

  /* Real metallic gold — the calendar pages use it for headings
     (`--text-heading: var(--gold-metal)`) and it shows up in trim. */
  --gold-metal:  #D4AF5A;
  --gold-metal-deep: #A89058;

  --magic:       #A855F7;
  --magic-bright:#C4B5FD;
  --magic-soft:  #DDD6FE;
  --magic-deep:  #6D28D9;

  /* ── 7. Depth ─────────────────────────────────────────────*/
  --shadow-soft:   rgba(var(--shade-rgb), .3);
  --shadow:        rgba(var(--shade-rgb), .6);
  --shadow-strong: rgba(var(--shade-rgb), .85);
  --scrim:         rgba(var(--shade-rgb), .7);   /* modal veil  */

  /* ── 8. Sheet ─────────────────────────────────────────────
     The printed character sheet and monster statblock are meant
     to look like paper in every theme, so these stay warm by
     default — but they're tokens, so a theme *can* restyle them. */
  --sheet-bg:        #FDF1DC;
  --sheet-bg-alt:    #FEF6E4;
  --sheet-bg-deep:   #F5E6C8;
  --sheet-fill:      #EEEEEE;   /* table header / filled cells  */
  --sheet-ink:       #1C1008;
  --sheet-ink-mid:   #6B3A1F;
  --sheet-accent:    #58180D;   /* the statblock header red     */
  --sheet-line:      #C4A97D;
  --sheet-line-soft: #D4C4A8;
  --sheet-rule:      #666666;   /* printed hairlines            */
  --sheet-text:      #000000;   /* body text on paper           */
  --sheet-text-soft: #333333;
  --sheet-text-mid:  #555555;
  --sheet-text-dim:  #999999;

  /* ── 9. Spell tags ────────────────────────────────────────*/
  --sc-cantrip: #93C5FD;
  --sc-spell:   #A78BFA;
  --sc-ritual:  #6EE7B7;
  --sc-choice:  #FCD34D;

  /* ── 10. Legacy aliases ───────────────────────────────────
     Older names used across the app. Kept as pointers so both
     spellings stay in sync; prefer the semantic names above in
     new code. */
  --parchment:       var(--bg-raised);
  --parchment-light: var(--bg-raised-2);
  --bark:            var(--bg-panel);
  --bark-light:      var(--bg-hover);
  --bark-dark:       var(--bg-page);
  --bark-deep:       var(--bg-deep);
  --ink:             var(--text);
  --ink-mid:         var(--text-muted);
  --ink-dim:         var(--text-dim);
  --ink-faint:       var(--text-faint);
  --gold:            var(--text-heading);
  --gold-dim:        var(--text-dim);
  --crimson:         var(--accent);
  --crimson-hover:   var(--accent-hover);
  --crimson-hi:      var(--accent-hover);
  --crimson-glow:    var(--accent-glow);
  --border:          var(--line);
  --shadow:          rgba(var(--shade-rgb), .6);
  --bg:              var(--bg-page);
  --bg-dark:         var(--bg-page);
  --bg-2:            var(--bg-panel);
  --panel:           var(--bg-panel);
  --panel-2:         var(--bg-hover);
}


/* ============================================================
   FANTASY — warm parchment and aged leather (light mode)
   60% parchment surfaces / 30% brown UI / 10% burgundy accent
   ============================================================ */
:root[data-theme="fantasy"],
[data-theme="fantasy"] {

  /* 1. Channels — every tint in the app follows from these */
  --accent-rgb:      139, 26, 26;
  --accent-deep-rgb: 88, 24, 13;
  --sheen-rgb:       120, 85, 45;   /* "highlights" darken on paper */
  --shade-rgb:       60, 40, 20;
  --trim-rgb:        107, 87, 68;
  --ok-rgb:          21, 128, 61;
  --ok-soft-rgb:     6, 95, 70;
  --ok-deep-rgb:     5, 90, 60;
  --amber-rgb:       161, 98, 7;
  --amber-deep-rgb:  113, 63, 18;
  --info-rgb:        12, 74, 110;
  --info-2-rgb:      14, 116, 144;
  --info-soft-rgb:   7, 89, 133;
  --info-deep-rgb:   8, 47, 73;
  --magic-rgb:       91, 33, 182;
  --magic-deep-rgb:  76, 29, 149;
  --text-dim-rgb:    139, 115, 85;
  --line-rgb:        184, 151, 106;
  --gold-metal-rgb:  138, 109, 31;
  --bg-page-rgb:     240, 229, 208;
  --bg-deep-rgb:     232, 213, 183;
  --bg-raised-rgb:   245, 230, 208;

  /* 2. Surfaces */
  --bg-deep:     #E8D5B7;
  --bg-page:     #F0E5D0;
  --bg-inset:    #EFE0C4;
  --bg-panel:    #E8D5B7;
  --bg-raised:   #F5E6D0;
  --bg-raised-2: #FDF1DC;
  --bg-hover:    #F0E0C8;
  --bg-wash:     rgba(var(--accent-rgb), .06);
  --bg-wash-soft:rgba(var(--accent-rgb), .04);
  --bg-sunken:   rgba(var(--shade-rgb), .07);
  --surface-white: #FDF1DC;

  /* 3. Text — burgundy headings, dark-brown body.
     On parchment there is no such thing as readable white text, so
     `text-strong` flips to burgundy along with `text-title`. Text
     that sits ON a button keeps its own token (--text-on-accent)
     and stays cream, so this flip can't wash out a button label. */
  --text-strong:    #8B1A1A;
  --text-title:     #8B1A1A;
  --text:           #2C1810;
  --text-heading:   #4A3728;
  --text-muted:     #6B5744;
  --text-dim:       #8B7355;
  --text-faint:     #A89478;
  --text-on-accent: #FDF1DC;
  --text-inverse:   #2C1810;
  --text-field:     #2C1810;

  /* 4. Accent */
  --accent:        #8B1A1A;
  --accent-hover:  #A52222;
  --accent-bright: #B33518;
  --accent-soft:   #7A1212;
  --accent-strong: #6E1414;
  --accent-deep:   #58180D;
  --accent-glow:   rgba(var(--accent-rgb), .2);

  /* 5. Lines */
  --line:        #B8976A;
  --line-strong: #8B7355;
  --line-soft:   rgba(var(--shade-rgb), .12);

  /* 6. Status — darkened so they read on parchment */
  --ok:          #15803D;
  --ok-bright:   #16A34A;
  --ok-soft:     #065F46;
  --ok-deep:     #14532D;

  --amber:       #A16207;
  --amber-bright:#CA8A04;
  --amber-soft:  #854D0E;
  --amber-deep:  #713F12;

  --info:        #0C4A6E;
  --info-bright: #0E7490;
  --info-soft:   #075985;
  --info-deep:   #082F49;

  --gold-metal:  #8A6D1F;
  --gold-metal-deep: #6B5416;

  --magic:       #5B21B6;
  --magic-bright:#6D28D9;
  --magic-soft:  #4C1D95;
  --magic-deep:  #3B0764;

  /* 7. Depth */
  --shadow-soft:   rgba(var(--shade-rgb), .15);
  --shadow:        rgba(var(--shade-rgb), .3);
  --shadow-strong: rgba(var(--shade-rgb), .45);
  --scrim:         rgba(var(--shade-rgb), .45);

  /* 8. Sheet stays paper-coloured — no overrides needed. */

  /* 9. Spell tags — darkened for light backgrounds */
  --sc-cantrip: #1D4ED8;
  --sc-spell:   #6D28D9;
  --sc-ritual:  #047857;
  --sc-choice:  #A16207;
}


/* ============================================================
   OCARINA — moonlit forest and gilded brass (dark mode)
   ============================================================
   Deep green twilight surfaces, warm brass as the accent, and
   cream text. The brand colour is gold rather than red here, so
   buttons carry dark-green text (--text-on-accent) instead of
   white. Sheet tokens are left alone — paper stays paper.
   ============================================================ */
[data-theme="ocarina"] {

  /* 1. Channels */
  --accent-rgb:      200, 164, 74;
  --accent-deep-rgb: 110, 86, 32;
  --sheen-rgb:       245, 239, 220;   /* warm cream highlights */
  --shade-rgb:       3, 12, 8;        /* green-black shadow    */
  --ok-rgb:          76, 183, 130;
  --ok-soft-rgb:     167, 231, 198;
  --ok-deep-rgb:     31, 107, 74;
  --amber-rgb:       232, 194, 90;
  --amber-deep-rgb:  168, 121, 30;
  --info-rgb:        79, 168, 216;
  --info-2-rgb:      59, 146, 196;
  --info-soft-rgb:   185, 225, 245;
  --info-deep-rgb:   31, 108, 149;
  --magic-rgb:       169, 139, 224;
  --magic-deep-rgb:  107, 79, 168;
  --trim-rgb:        200, 164, 74;
  --text-dim-rgb:    122, 142, 128;
  --line-rgb:        42, 74, 60;
  --gold-metal-rgb:  216, 180, 87;
  --bg-page-rgb:     14, 27, 22;
  --bg-deep-rgb:     10, 20, 16;
  --bg-raised-rgb:   24, 48, 40;

  /* 2. Surfaces */
  --bg-deep:     #0A1410;
  --bg-page:     #0E1B16;
  --bg-inset:    #0C1712;
  --bg-panel:    #132720;
  --bg-raised:   #183028;
  --bg-raised-2: #1E3A31;
  --bg-hover:    #244539;
  --surface-white: #F7F2E2;

  /* 3. Text */
  --text-strong:    #F5EFDC;
  --text-title:     #F5EFDC;
  --text:           #E4E0CE;
  --text-heading:   #C8A44A;   /* gold trim doubles as headings */
  --text-muted:     #9FB0A2;
  --text-dim:       #7A8E80;
  --text-faint:     #5C6E62;
  --text-on-accent: #10241C;   /* dark green on a brass button  */
  --text-inverse:   #10241C;
  --text-field:     #F5EFDC;

  /* 4. Accent — brass */
  --accent:         #C8A44A;
  --accent-hover:   #DCBA5F;
  --accent-bright:  #EBD07E;
  --accent-soft:    #EFDCA0;
  --accent-strong:  #9C7C2E;
  --accent-deep:    #6E5620;
  --accent-glow:    rgba(var(--accent-rgb), .3);

  /* 5. Lines */
  --line:        #2A4A3C;
  --line-strong: #38604E;

  /* 6. Status */
  --ok:          #4CB782;
  --ok-bright:   #6FD3A0;
  --ok-soft:     #A7E7C6;
  --ok-deep:     #1F6B4A;

  --amber:       #E8C25A;
  --amber-bright:#F5D77C;
  --amber-soft:  #F7E3AC;
  --amber-deep:  #A8791E;

  --info:        #4FA8D8;
  --info-bright: #7BC5EA;
  --info-soft:   #B9E1F5;
  --info-deep:   #1F6C95;

  --gold-metal:  #D8B457;
  --gold-metal-deep: #A8873A;

  --magic:       #A98BE0;
  --magic-bright:#C6B2ED;
  --magic-soft:  #DED2F5;
  --magic-deep:  #6B4FA8;

  /* 7. Depth, 8. Sheet — inherit the base. */

  /* 9. Spell tags */
  --sc-cantrip: #7BC5EA;
  --sc-spell:   #C6B2ED;
  --sc-ritual:  #6FD3A0;
  --sc-choice:  #F5D77C;
}


/* ============================================================
   HOTLINE — neon nightdrive (dark mode)
   ============================================================
   An 80s-arcade palette: deep violet-black surfaces lit by hot
   magenta, electric cyan and acid yellow.

   Two things make neon read as neon rather than as "bright
   colours on grey":
   • The darks are heavily SATURATED violet, never neutral, so
     every glow has something to bloom against.
   • The highlight channel is the accent itself, not white — so
     hover washes and hairlines come up pink like light bleeding
     off a sign, instead of dusting everything grey.

   The accent is a light magenta, so button labels are near-black
   (--text-on-accent): white on hot pink only reaches 3.5:1, dark
   reaches 5.6:1. Sheet tokens are untouched — paper stays paper.
   ============================================================ */
[data-theme="hotline"] {

  /* 1. Channels — the glow colours */
  --accent-rgb:      255, 46, 136;   /* hot magenta            */
  --accent-deep-rgb: 154, 15, 78;
  --sheen-rgb:       255, 46, 136;   /* highlights bleed pink  */
  --shade-rgb:       8, 2, 20;       /* violet-black shadow    */
  --ok-rgb:          43, 224, 138;
  --ok-soft-rgb:     134, 255, 199;
  --ok-deep-rgb:     16, 138, 84;
  --amber-rgb:       255, 201, 60;
  --amber-deep-rgb:  201, 136, 12;
  --info-rgb:        34, 211, 238;
  --info-2-rgb:      42, 230, 214;
  --info-soft-rgb:   165, 243, 252;
  --info-deep-rgb:   14, 138, 160;
  --magic-rgb:       199, 125, 255;
  --magic-deep-rgb:  123, 47, 247;
  --trim-rgb:        42, 230, 214;   /* cyan trim              */
  --text-dim-rgb:    138, 118, 173;
  --line-rgb:        58, 34, 96;
  --gold-metal-rgb:  255, 212, 71;
  --bg-page-rgb:     18, 10, 34;
  --bg-deep-rgb:     11, 7, 22;
  --bg-raised-rgb:   43, 26, 77;

  /* 2. Surfaces — violet night */
  --bg-deep:     #0B0716;
  --bg-page:     #120A22;
  --bg-inset:    #0E0819;
  --bg-panel:    #1A0F2E;
  --bg-raised:   #2B1A4D;
  --bg-raised-2: #352060;
  --bg-hover:    #402873;
  --surface-white: #F2E9FF;

  /* 3. Text */
  --text-strong:    #FFFFFF;
  --text-title:     #F2E9FF;
  --text:           #EADCFF;
  --text-heading:   #2AE6D6;   /* cyan trim + card titles */
  --text-muted:     #B9A6D9;
  --text-dim:       #8A76AD;
  --text-faint:     #63527F;
  --text-on-accent: #14071F;   /* near-black on hot magenta */
  --text-inverse:   #14071F;
  --text-field:     #FFFFFF;

  /* 4. Accent — hot magenta */
  --accent:         #FF2E88;
  --accent-hover:   #FF5CA3;
  --accent-bright:  #FF8FC0;
  --accent-soft:    #FFB8D8;
  --accent-strong:  #C71166;
  --accent-deep:    #9A0F4E;
  --accent-glow:    rgba(var(--accent-rgb), .4);

  /* 5. Lines */
  --line:        #3A2260;
  --line-strong: #4E2F80;
  --line-soft:   rgba(var(--sheen-rgb), .18);

  /* 6. Status */
  --ok:          #2BE08A;
  --ok-bright:   #5BF0AB;
  --ok-soft:     #86FFC7;
  --ok-deep:     #108A54;

  --amber:       #FFC93C;
  --amber-bright:#FFDD70;
  --amber-soft:  #FFEBA8;
  --amber-deep:  #C9880C;

  --info:        #22D3EE;
  --info-bright: #5EE7F7;
  --info-soft:   #A5F3FC;
  --info-deep:   #0E8AA0;

  --gold-metal:  #FFD447;
  --gold-metal-deep: #C9A420;

  --magic:       #C77DFF;
  --magic-bright:#DCA9FF;
  --magic-soft:  #EBCEFF;
  --magic-deep:  #7B2FF7;

  /* 7. Depth — shadows keep the violet cast so panels sit in
     neon haze rather than grey fog. */
  --shadow-soft:   rgba(var(--shade-rgb), .5);
  --shadow:        rgba(var(--shade-rgb), .75);
  --shadow-strong: rgba(var(--shade-rgb), .92);
  --scrim:         rgba(var(--shade-rgb), .8);

  /* 8. Sheet — inherits the base (paper stays paper). */

  /* 9. Spell tags */
  --sc-cantrip: #5EE7F7;
  --sc-spell:   #DCA9FF;
  --sc-ritual:  #5BF0AB;
  --sc-choice:  #FFDD70;
}

/* ============================================================
   GODRIC — blood red and gold (dark mode)
   ============================================================
   Palette: #740001 #ae0001 #ecb939 #d3a625 #000000

   Both reds from the palette do the work: #740001 is the page and
   #ae0001 is the raised card, so surfaces step through a real range
   instead of one flat tone. #ecb939 is the accent and heading gold,
   #d3a625 the border gold.
   Sheet tokens are untouched — paper stays paper.
   ============================================================ */
[data-theme="godric"] {

  /* 1. Channels */
  --accent-rgb:      236, 185, 57;
  --accent-deep-rgb: 160, 125, 24;
  --sheen-rgb:       255, 240, 230;
  --shade-rgb:       20, 0, 0;
  --ok-rgb:          110, 224, 150;
  --ok-soft-rgb:     170, 240, 200;
  --ok-deep-rgb:     26, 122, 74;
  --amber-rgb:       236, 185, 57;
  --amber-deep-rgb:  160, 125, 24;
  --info-rgb:        140, 196, 244;
  --info-2-rgb:      104, 170, 224;
  --info-soft-rgb:   204, 228, 250;
  --info-deep-rgb:   44, 104, 154;
  --magic-rgb:       210, 172, 244;
  --magic-deep-rgb:  136, 96, 180;
  --trim-rgb:        236, 185, 57;
  --text-dim-rgb:    226, 170, 170;
  --line-rgb:        211, 166, 37;
  --gold-metal-rgb:  236, 185, 57;
  --bg-page-rgb:     116, 0, 1;
  --bg-deep-rgb:     82, 0, 1;
  --bg-raised-rgb:   174, 0, 1;

  /* 2. Surfaces — both base tones from the palette */
  --bg-deep:     #520001;
  --bg-page:     #740001;
  --bg-inset:    #630001;
  --bg-panel:    #8E0001;
  --bg-raised:   #AE0001;
  --bg-raised-2: #C00204;
  --bg-hover:    #D01418;
  --surface-white: #FFF3EC;

  /* 3. Text */
  --text-strong:    #FFFFFF;
  --text-title:     #FFFFFF;
  --text:           #FFF0F0;
  --text-heading:   #ECB939;
  --text-muted:     #F0C4C4;
  --text-dim:       #E2AAAA;
  --text-faint:     #B87878;
  --text-on-accent: #740001;
  --text-inverse:   #740001;
  --text-field:     #FFFFFF;

  /* 4. Accent */
  --accent:         #ECB939;
  --accent-hover:   #F2C94F;
  --accent-bright:  #F5D77C;
  --accent-soft:    #F9E6AE;
  --accent-strong:  #D3A625;
  --accent-deep:    #A07D18;
  --accent-glow:    rgba(var(--accent-rgb), .4);

  /* 5. Lines */
  --line:        #D3A625;
  --line-strong: #ECB939;

  /* 6. Status */
  --ok:          #6EE096;
  --ok-bright:   #96EBB4;
  --ok-soft:     #BCF4D2;
  --ok-deep:     #1A7A4A;

  --amber:       #ECB939;
  --amber-bright:#F5D77C;
  --amber-soft:  #F9E6AE;
  --amber-deep:  #A07D18;

  --info:        #8CC4F4;
  --info-bright: #B4D9F8;
  --info-soft:   #CCE4FA;
  --info-deep:   #2C689A;

  --gold-metal:  #ECB939;
  --gold-metal-deep: #D3A625;

  --magic:       #D2ACF4;
  --magic-bright:#E2C9F8;
  --magic-soft:  #EFE0FB;
  --magic-deep:  #8860B4;

  /* 7. Depth, 8. Sheet — inherit the base. */

  /* 9. Spell tags */
  --sc-cantrip: #B4D9F8;
  --sc-spell:   #E2C9F8;
  --sc-ritual:  #96EBB4;
  --sc-choice:  #F5D77C;
}

/* ============================================================
   SALAZAR — bottle green and silver (dark mode)
   ============================================================
   Palette: #1a472a #2a623d #5d5d5d #aaaaaa #000000

   #1a472a is the page and #2a623d the raised card — two greens rather
   than one, which is what gives the panels depth. Both greys from the
   palette are used: #5d5d5d for borders, #aaaaaa for trim and accent.
   Sheet tokens are untouched — paper stays paper.
   ============================================================ */
[data-theme="salazar"] {

  /* 1. Channels */
  --accent-rgb:      170, 170, 170;
  --accent-deep-rgb: 93, 93, 93;
  --sheen-rgb:       240, 246, 242;
  --shade-rgb:       4, 18, 10;
  --ok-rgb:          110, 232, 160;
  --ok-soft-rgb:     175, 245, 205;
  --ok-deep-rgb:     26, 122, 74;
  --amber-rgb:       236, 200, 96;
  --amber-deep-rgb:  154, 126, 32;
  --info-rgb:        140, 208, 236;
  --info-2-rgb:      104, 182, 214;
  --info-soft-rgb:   200, 234, 246;
  --info-deep-rgb:   38, 112, 142;
  --magic-rgb:       200, 170, 242;
  --magic-deep-rgb:  128, 92, 178;
  --trim-rgb:        200, 200, 200;
  --text-dim-rgb:    173, 198, 180;
  --line-rgb:        93, 93, 93;
  --gold-metal-rgb:  170, 170, 170;
  --bg-page-rgb:     26, 71, 42;
  --bg-deep-rgb:     16, 48, 28;
  --bg-raised-rgb:   42, 98, 61;

  /* 2. Surfaces — both base tones from the palette */
  --bg-deep:     #10301C;
  --bg-page:     #1A472A;
  --bg-inset:    #153A22;
  --bg-panel:    #215533;
  --bg-raised:   #2A623D;
  --bg-raised-2: #33734A;
  --bg-hover:    #3D8657;
  --surface-white: #F2FAF4;

  /* 3. Text */
  --text-strong:    #FFFFFF;
  --text-title:     #FFFFFF;
  --text:           #EFF5F1;
  --text-heading:   #C8C8C8;
  --text-muted:     #C2D6C9;
  --text-dim:       #ADC6B4;
  --text-faint:     #7E9887;
  --text-on-accent: #1A472A;
  --text-inverse:   #1A472A;
  --text-field:     #FFFFFF;

  /* 4. Accent */
  --accent:         #AAAAAA;
  --accent-hover:   #C0C0C0;
  --accent-bright:  #D6D6D6;
  --accent-soft:    #E8E8E8;
  --accent-strong:  #8A8A8A;
  --accent-deep:    #5D5D5D;
  --accent-glow:    rgba(var(--accent-rgb), .35);

  /* 5. Lines */
  --line:        #5D5D5D;
  --line-strong: #AAAAAA;

  /* 6. Status */
  --ok:          #6EE8A0;
  --ok-bright:   #96F0BE;
  --ok-soft:     #BCF7D6;
  --ok-deep:     #1A7A4A;

  --amber:       #ECC860;
  --amber-bright:#F2D986;
  --amber-soft:  #F7E7B4;
  --amber-deep:  #9A7E20;

  --info:        #8CD0EC;
  --info-bright: #B0E2F4;
  --info-soft:   #C8EAF6;
  --info-deep:   #26708E;

  --gold-metal:  #AAAAAA;
  --gold-metal-deep: #8A8A8A;

  --magic:       #C8AAF2;
  --magic-bright:#DCC8F8;
  --magic-soft:  #EBDEFB;
  --magic-deep:  #805CB2;

  /* 7. Depth, 8. Sheet — inherit the base. */

  /* 9. Spell tags */
  --sc-cantrip: #B0E2F4;
  --sc-spell:   #DCC8F8;
  --sc-ritual:  #96F0BE;
  --sc-choice:  #F2D986;
}

/* ============================================================
   HELGA — dark earth and honey gold (dark mode)
   ============================================================
   Palette: #ecb939 #f0c75e #726255 #372e29 #000000

   The palette's own surfaces are the two browns — #372e29 for panels
   and #726255 for the lift state — with the two yellows as accent and
   hover. That makes this a DARK theme, not the yellow-page one it was:
   the yellow in the scarf is the stripe, and the browns are the cloth.
   Sheet tokens are untouched — paper stays paper.
   ============================================================ */
[data-theme="helga"] {

  /* 1. Channels */
  --accent-rgb:      236, 185, 57;
  --accent-deep-rgb: 143, 109, 18;
  --sheen-rgb:       255, 246, 230;
  --shade-rgb:       16, 12, 8;
  --ok-rgb:          110, 216, 130;
  --ok-soft-rgb:     170, 236, 184;
  --ok-deep-rgb:     34, 116, 54;
  --amber-rgb:       240, 199, 94;
  --amber-deep-rgb:  160, 122, 20;
  --info-rgb:        132, 190, 232;
  --info-2-rgb:      96, 164, 210;
  --info-soft-rgb:   200, 226, 244;
  --info-deep-rgb:   40, 100, 146;
  --magic-rgb:       202, 168, 236;
  --magic-deep-rgb:  128, 92, 176;
  --trim-rgb:        236, 185, 57;
  --text-dim-rgb:    168, 150, 138;
  --line-rgb:        114, 98, 85;
  --gold-metal-rgb:  236, 185, 57;
  --bg-page-rgb:     36, 30, 26;
  --bg-deep-rgb:     26, 21, 18;
  --bg-raised-rgb:   74, 63, 56;

  /* 2. Surfaces — both base tones from the palette */
  --bg-deep:     #1A1512;
  --bg-page:     #241E1A;
  --bg-inset:    #1F1A16;
  --bg-panel:    #372E29;
  --bg-raised:   #4A3F38;
  --bg-raised-2: #5C4F46;
  --bg-hover:    #726255;
  --surface-white: #FFF6E8;

  /* 3. Text */
  --text-strong:    #FFFFFF;
  --text-title:     #FFFFFF;
  --text:           #F5EFE8;
  --text-heading:   #ECB939;
  --text-muted:     #CFC0B0;
  --text-dim:       #A8968A;
  --text-faint:     #85756A;
  --text-on-accent: #372E29;
  --text-inverse:   #372E29;
  --text-field:     #FFFFFF;

  /* 4. Accent */
  --accent:         #ECB939;
  --accent-hover:   #F0C75E;
  --accent-bright:  #F5D782;
  --accent-soft:    #F9E7B4;
  --accent-strong:  #C89A20;
  --accent-deep:    #8F6D12;
  --accent-glow:    rgba(var(--accent-rgb), .4);

  /* 5. Lines */
  --line:        #726255;
  --line-strong: #8F7D6D;

  /* 6. Status */
  --ok:          #6ED882;
  --ok-bright:   #96E5A6;
  --ok-soft:     #BCF0C6;
  --ok-deep:     #227436;

  --amber:       #F0C75E;
  --amber-bright:#F5D782;
  --amber-soft:  #F9E7B4;
  --amber-deep:  #A07A14;

  --info:        #84BEE8;
  --info-bright: #AAD4F0;
  --info-soft:   #C8E2F4;
  --info-deep:   #286492;

  --gold-metal:  #ECB939;
  --gold-metal-deep: #C89A20;

  --magic:       #CAA8EC;
  --magic-bright:#DEC6F4;
  --magic-soft:  #EDDEF9;
  --magic-deep:  #805CB0;

  /* 7. Depth, 8. Sheet — inherit the base. */

  /* 9. Spell tags */
  --sc-cantrip: #AAD4F0;
  --sc-spell:   #DEC6F4;
  --sc-ritual:  #96E5A6;
  --sc-choice:  #F5D782;
}

/* ============================================================
   ROWENA — midnight navy and bronze (dark mode)
   ============================================================
   Palette: #0e1a40 #222f5b #946b2d #aaaaaa #000000

   #0e1a40 is the page and #222f5b the raised card — two navies, which
   is what stops it going flat. Bronze (#946b2d) is the accent, brightened
   a step so it reads as text on the darker navy; silver (#aaaaaa) is the
   heading trim.
   Sheet tokens are untouched — paper stays paper.
   ============================================================ */
[data-theme="rowena"] {

  /* 1. Channels */
  --accent-rgb:      186, 138, 66;
  --accent-deep-rgb: 110, 78, 30;
  --sheen-rgb:       240, 246, 252;
  --shade-rgb:       2, 6, 20;
  --ok-rgb:          110, 220, 171;
  --ok-soft-rgb:     170, 240, 205;
  --ok-deep-rgb:     22, 114, 80;
  --amber-rgb:       236, 196, 110;
  --amber-deep-rgb:  148, 107, 45;
  --info-rgb:        152, 205, 248;
  --info-2-rgb:      110, 182, 245;
  --info-soft-rgb:   200, 226, 250;
  --info-deep-rgb:   38, 92, 150;
  --magic-rgb:       203, 176, 242;
  --magic-deep-rgb:  124, 90, 176;
  --trim-rgb:        170, 170, 170;
  --text-dim-rgb:    147, 163, 192;
  --line-rgb:        148, 107, 45;
  --gold-metal-rgb:  186, 138, 66;
  --bg-page-rgb:     14, 26, 64;
  --bg-deep-rgb:     10, 19, 48;
  --bg-raised-rgb:   34, 47, 91;

  /* 2. Surfaces — both base tones from the palette */
  --bg-deep:     #0A1330;
  --bg-page:     #0E1A40;
  --bg-inset:    #0C1638;
  --bg-panel:    #18244D;
  --bg-raised:   #222F5B;
  --bg-raised-2: #2C3B6E;
  --bg-hover:    #384A85;
  --surface-white: #F0F6FF;

  /* 3. Text */
  --text-strong:    #FFFFFF;
  --text-title:     #FFFFFF;
  --text:           #E8EDF8;
  --text-heading:   #AAAAAA;
  --text-muted:     #B8C4DC;
  --text-dim:       #93A3C0;
  --text-faint:     #75839E;
  --text-on-accent: #0E1A40;
  --text-inverse:   #0E1A40;
  --text-field:     #FFFFFF;

  /* 4. Accent */
  --accent:         #BA8A42;
  --accent-hover:   #CE9C52;
  --accent-bright:  #DFB374;
  --accent-soft:    #EDD0A4;
  --accent-strong:  #946B2D;
  --accent-deep:    #6E4E1E;
  --accent-glow:    rgba(var(--accent-rgb), .35);

  /* 5. Lines */
  --line:        #946B2D;
  --line-strong: #BA8A42;

  /* 6. Status */
  --ok:          #6EDCAB;
  --ok-bright:   #96E8C6;
  --ok-soft:     #BAF2DA;
  --ok-deep:     #167250;

  --amber:       #ECC46E;
  --amber-bright:#F2D896;
  --amber-soft:  #F7E7BE;
  --amber-deep:  #946B2D;

  --info:        #98CDF8;
  --info-bright: #BEDEFA;
  --info-soft:   #D8EBFC;
  --info-deep:   #265C96;

  --gold-metal:  #BA8A42;
  --gold-metal-deep: #946B2D;

  --magic:       #CBB0F2;
  --magic-bright:#DFCCF7;
  --magic-soft:  #EEE2FB;
  --magic-deep:  #7C5AB0;

  /* 7. Depth, 8. Sheet — inherit the base. */

  /* 9. Spell tags */
  --sc-cantrip: #BEDEFA;
  --sc-spell:   #DFCCF7;
  --sc-ritual:  #96E8C6;
  --sc-choice:  #F2D896;
}


/* ============================================================
   AZMUTH — deep forest and lime (dark mode)
   ============================================================
   Palette: #071C17 #0D3133 #4EA234 #8CC623 #DEFF7A

   Two near-black greens carry the surfaces — #071C17 is the page
   and #0D3133 the raised card — which is what keeps it from going
   flat. Leaf green (#4EA234) is the accent, brightening through
   #8CC623 on hover, and #DEFF7A is the highlight: the heading trim,
   the accent-on-dark text colour, and the sheen that hover washes
   and hairlines are tinted with, so the whole theme catches a lime
   light rather than a grey one.

   The accent is a mid green, so button labels are the near-black
   page colour rather than white: dark reads 5.5 on the accent and
   8.6 on the hover step, white only manages 3.6. Sheet tokens are
   untouched — paper stays paper.
   ============================================================ */
[data-theme="azmuth"] {

  /* 1. Channels */
  --accent-rgb:      78, 162, 52;
  --accent-deep-rgb: 35, 82, 26;
  --sheen-rgb:       222, 255, 122;   /* highlights bloom lime     */
  --shade-rgb:       3, 12, 10;
  --ok-rgb:          86, 217, 138;
  --ok-soft-rgb:     168, 240, 190;
  --ok-deep-rgb:     24, 110, 66;
  --amber-rgb:       232, 194, 90;
  --amber-deep-rgb:  150, 110, 30;
  --info-rgb:        127, 196, 232;
  --info-2-rgb:      96, 172, 214;
  --info-soft-rgb:   198, 228, 244;
  --info-deep-rgb:   28, 92, 128;
  --magic-rgb:       180, 155, 232;
  --magic-deep-rgb:  104, 82, 158;
  --trim-rgb:        222, 255, 122;
  --text-dim-rgb:    126, 154, 120;
  --line-rgb:        20, 64, 60;
  --gold-metal-rgb:  222, 255, 122;
  --bg-page-rgb:     7, 28, 23;
  --bg-deep-rgb:     4, 18, 15;
  --bg-raised-rgb:   13, 49, 51;

  /* 2. Surfaces — both base tones from the palette */
  --bg-deep:     #04120F;
  --bg-page:     #071C17;
  --bg-inset:    #06201D;
  --bg-panel:    #0A2A28;
  --bg-raised:   #0D3133;
  --bg-raised-2: #12403F;
  --bg-hover:    #184F4B;
  --surface-white: #F2F8EC;

  /* 3. Text */
  --text-strong:    #FFFFFF;
  --text-title:     #FFFFFF;
  --text:           #E6F2DC;
  --text-heading:   #DEFF7A;   /* the highlight, doing the trim job */
  --text-muted:     #A8C49A;
  --text-dim:       #7E9A78;
  --text-faint:     #5C7358;
  --text-on-accent: #071C17;   /* dark on leaf green — white is 3.6 */
  --text-inverse:   #071C17;
  --text-field:     #FFFFFF;

  /* 4. Accent */
  --accent:         #4EA234;
  --accent-hover:   #8CC623;
  --accent-bright:  #B4E04A;
  --accent-soft:    #DEFF7A;   /* accent text on dark               */
  --accent-strong:  #3A7A27;
  --accent-deep:    #23521A;
  --accent-glow:    rgba(var(--accent-rgb), .32);

  /* 5. Lines */
  --line:        #14403C;
  --line-strong: #1F5A50;

  /* 6. Status */
  --ok:          #56D98A;
  --ok-bright:   #7FE6A8;
  --ok-soft:     #A8F0BE;
  --ok-deep:     #186E42;

  --amber:       #E8C25A;
  --amber-bright:#F2D688;
  --amber-soft:  #F8E7B8;
  --amber-deep:  #966E1E;

  --info:        #7FC4E8;
  --info-bright: #A6D8F1;
  --info-soft:   #CDEAF8;
  --info-deep:   #1C5C80;

  --gold-metal:  #DEFF7A;
  --gold-metal-deep: #A8C64A;

  --magic:       #B49BE8;
  --magic-bright:#CBB8F1;
  --magic-soft:  #E1D6F8;
  --magic-deep:  #68529E;

  /* 7. Depth, 8. Sheet — inherit the base. */

  /* 9. Spell tags */
  --sc-cantrip: #9BD9F0;
  --sc-spell:   #C9B6F2;
  --sc-ritual:  #86E8A8;
  --sc-choice:  #DEFF7A;
}


/* ------------------------------------------------------------
   Fantasy typography. Crimson Text at 400 looks washed out on
   warm parchment, so body copy gets a weight bump. This is the
   only non-colour thing a theme changes — headings, buttons and
   Cinzel display text already carry heavier weights.
   ------------------------------------------------------------ */
[data-theme="fantasy"] body { font-weight: 500; }
[data-theme="fantasy"] p,
[data-theme="fantasy"] li,
[data-theme="fantasy"] td,
[data-theme="fantasy"] dd,
[data-theme="fantasy"] label,
[data-theme="fantasy"] .step-subtitle,
[data-theme="fantasy"] .accordion-subtitle,
[data-theme="fantasy"] .accordion-flavor,
[data-theme="fantasy"] .accordion-detail-body,
[data-theme="fantasy"] .accordion-detail-value,
[data-theme="fantasy"] .accordion-info-block p,
[data-theme="fantasy"] .accordion-info-block ul,
[data-theme="fantasy"] .expanded-value,
[data-theme="fantasy"] .option-card .option-desc,
[data-theme="fantasy"] .option-subtitle,
[data-theme="fantasy"] .page-subtitle,
[data-theme="fantasy"] .create-btn-desc,
[data-theme="fantasy"] .auth-switch,
[data-theme="fantasy"] .role-option-desc,
[data-theme="fantasy"] .step-card p,
[data-theme="fantasy"] .cs-features-text,
[data-theme="fantasy"] .cs-backstory-text,
[data-theme="fantasy"] .cs-personality-text { font-weight: 600; }


/* ============================================================
   Chrome that can't take a variable inline
   ============================================================ */
::-webkit-scrollbar        { width: 8px; height: 8px; }
::-webkit-scrollbar-track  { background: var(--bg-panel); }
::-webkit-scrollbar-thumb  { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
::selection { background: var(--accent-glow); color: var(--text); }