/* ============================================================
   Data Dungeon — colour tokens
   ------------------------------------------------------------
   Single source of truth for every colour the app uses. Linked
   from base.html BEFORE base.css so the cascade resolves these
   first. Anything that's a colour belongs in here:

     - chrome / surfaces (--black, --black-2, --grey-*, --white*)
     - accent family (--red, --red-bright, --red-deep,
       --red-glow, --red-border) — overridden per theme below
     - semantic (--success, --warn, --info, --danger) — added
       in the Phase-2 vocabulary expansion
     - shadows / overlays
     - theme-invariant decoration (craft phases, weather,
       currency, source badges)

   Light-mode overrides live in their own [data-mode="light"]
   block at the bottom of this file (Phase 4) so the dark
   defaults stay untouched and a missing data-mode attribute
   always resolves to dark.

   Keep theme blocks in sync with services/themes.py.
   ============================================================ */

:root {
  /* ── Chrome / surfaces (constant across themes in dark mode) ── */
  --black:       #0a0a0a;
  --black-2:     #111111;
  --black-3:     #181818;
  --black-4:     #222222;
  --grey-dark:   #2e2e2e;
  --grey-mid:    #444444;
  --grey-light:  #888888;
  --grey-text:   #aaaaaa;
  --white-dim:   #cccccc;
  --white:       #f0f0f0;

  /* ── Accent family (per-theme overridden below) ────────────── */
  --red:         #cc2222;
  --red-bright:  #e63333;
  --red-deep:    #8b0000;
  --red-glow:    rgba(204,34,34,0.18);
  --red-border:  rgba(204,34,34,0.35);

  /* ── Curved-edge accent switch ─────────────────────────────────
     The theme-accent border that ran along the TOP edge of cards
     (login/.auth-card, More→profile/.dd-identity-card, character
     header, spell-slot groups, tutorial bubble, .card-accent) — the
     "curved edge accent." REMOVED GLOBALLY 2026-06-15 per user request.
     "Off" = match the regular 1px dim border so cards read as clean
     uniform boxes. To RE-ENABLE everywhere, flip this ONE value back to
     `3px solid var(--red)`. (The toast's separate left-edge accent was
     removed directly in base.css `.toast` — re-add notes are there.) */
  --card-accent-top: 1px solid var(--grey-dark);

  /* ── Latent-bug fixes ──────────────────────────────────────────
     Two token names were referenced in base.css but never defined
     anywhere, so they resolved as transparent / inherited at runtime
     (silent breakage). Defined here as aliases to the closest
     intended sibling. Discovery audit identified these in Phase 2. */
  --accent:      var(--red);          /* 9 base.css refs (.feat-effects-preview, .note-chip) */
  --grey-deep:   var(--grey-dark);    /* 2 base.css refs (modal/form borders) */
  /* NOTE: --black-1 deliberately NOT defined here. base.css:4875
     uses var(--black-1, #050510) — the inline fallback is the value.
     desktop.css:73 uses bare var(--black-1) → resolves to transparent
     → the body's --black (#0a0a0a) shows through. Defining it
     globally as #050510 (as Phase 2 did) painted the desktop tab
     strip navy instead of pure black. */

  /* ── Semantic colours (theme-invariant in dark mode) ───────────
     Status colours don't retint per theme — success is always
     green, warning always amber, info always blue. The accent
     family above retints; these stay constant. */
  --success:        #3c9453;
  --success-bright: #4cc74c;
  --success-text:   #8be09c;
  --success-glow:   rgba(60,180,90,0.20);
  --success-border: rgba(60,180,90,0.35);

  --warn:           #d9a849;
  --warn-bright:    #f5b73a;
  --warn-text:      #ffb85a;
  --warn-glow:      rgba(217,168,73,0.20);
  --warn-border:    rgba(217,168,73,0.35);

  --info:           #7aa6dc;
  --info-bright:    #60a5fa;
  --info-glow:      rgba(122,166,220,0.20);
  --info-border:    rgba(122,166,220,0.35);

  /* --danger aliases the per-theme accent family. Semantically
     red == danger across the app. On non-crimson themes this means
     a "Delete" button picks up the theme accent — that's
     intentional; the visual hierarchy stays single-sourced. */
  --danger:         var(--red);
  --danger-bright:  var(--red-bright);
  --danger-deep:    var(--red-deep);
  --danger-glow:    var(--red-glow);
  --danger-border:  var(--red-border);

  /* ── Surface depth — shadows + overlays ───────────────────────
     Three canonical "weight" names (soft/medium/strong) cover the
     most common rgba(0,0,0,X) values in the existing CSS. The
     numbered tokens (--shadow-35 etc.) preserve the off-canonical
     opacities the codebase uses in 13+ sites — keeping them as
     tokens means light mode can flip them independently. */
  --shadow-35:      rgba(0,0,0,0.35);
  --shadow-soft:    rgba(0,0,0,0.40);   /* canonical light shadow */
  --shadow-45:      rgba(0,0,0,0.45);
  --shadow-50:      rgba(0,0,0,0.50);
  --shadow-medium:  rgba(0,0,0,0.55);   /* canonical mid shadow */
  --shadow-60:      rgba(0,0,0,0.60);
  --shadow-strong:  rgba(0,0,0,0.65);   /* canonical strong shadow */
  --shadow-70:      rgba(0,0,0,0.70);
  --overlay-modal:  rgba(0,0,0,0.78);
  --overlay-deep:   rgba(0,0,0,0.92);

  /* ── Text + border + divider aliases ──────────────────────────
     Semantic names so the cascade reads clearly at the call site.
     Aliases (rather than new values) so existing references via
     --white / --grey-text keep working unchanged. */
  --text:           var(--white);
  --text-dim:       var(--white-dim);
  --text-muted:     var(--grey-text);
  --text-faint:     var(--grey-light);

  --border-strong:  var(--grey-dark);
  --border-soft:    var(--grey-mid);
  --divider:        var(--grey-dark);

  /* ── Theme-invariant decoration ────────────────────────────────
     Per CLAUDE.md the "belly/fire/dice pip" style of decorative
     hex stays constant across themes. Pulled into named tokens so
     templates stop hardcoding them. Phase 3 sweep replaces. */
  --craft-early:        #5082dc;
  --craft-mid:          #c8a932;
  --craft-late:         #3c9453;

  --weather-clear:      #4a90e2;
  --weather-rain:       #2bb3c8;
  --weather-fog:        #b8b8b8;
  --weather-snow:       #f0f0f0;
  --weather-storm:      #6a5acd;
  --weather-storm-soft: #c4bdf5;

  --currency-platinum:  #d4d4db;

  --source-a5e:         #7aa6dc;
  --source-tob:         #d49a48;
  --source-tdcs:        #7fb07f;
  --source-elderberry:  #a890cc;
}

/* ============================================================
   THEME OVERRIDES
   ------------------------------------------------------------
   The app's dark chrome is constant. Each [data-theme="slug"]
   just overrides the five accent (--red-*) variables. Every
   stylesheet references these via var(--red), var(--red-bright)
   etc., so swapping them re-skins the app with no other work.
   Keep in sync with services/themes.py.
   ============================================================ */

/* "crimson" — default, matches :root; listed for completeness. */
[data-theme="crimson"] {
  --red:        #cc2222;
  --red-bright: #e63333;
  --red-deep:   #8b0000;
  --red-glow:   rgba(204,34,34,0.18);
  --red-border: rgba(204,34,34,0.35);
}
[data-theme="emerald"] {
  --red:        #10b981;
  --red-bright: #34d399;
  --red-deep:   #065f46;
  --red-glow:   rgba(16,185,129,0.16);
  --red-border: rgba(16,185,129,0.35);
}
[data-theme="sapphire"] {
  --red:        #2563eb;
  --red-bright: #60a5fa;
  --red-deep:   #1e3a8a;
  --red-glow:   rgba(37,99,235,0.18);
  --red-border: rgba(37,99,235,0.4);
}
[data-theme="amber"] {
  --red:        #d97706;
  --red-bright: #fbbf24;
  --red-deep:   #78350f;
  --red-glow:   rgba(217,119,6,0.18);
  --red-border: rgba(217,119,6,0.4);
}
[data-theme="violet"] {
  --red:        #7c3aed;
  --red-bright: #a78bfa;
  --red-deep:   #4c1d95;
  --red-glow:   rgba(124,58,237,0.18);
  --red-border: rgba(124,58,237,0.4);
}
[data-theme="rose"] {
  --red:        #e11d48;
  --red-bright: #fb7185;
  --red-deep:   #881337;
  --red-glow:   rgba(225,29,72,0.18);
  --red-border: rgba(225,29,72,0.4);
}
[data-theme="slate"] {
  --red:        #64748b;
  --red-bright: #94a3b8;
  --red-deep:   #334155;
  --red-glow:   rgba(100,116,139,0.18);
  --red-border: rgba(100,116,139,0.45);
}

/* ============================================================
   LIGHT MODE
   ------------------------------------------------------------
   Activated by data-mode="light" on <html>. base.html sets the
   attribute server-side AND a pre-paint script resolves "auto"
   (the default for new users) to dark or light based on the
   OS prefers-color-scheme media query — so there's never a
   flash of wrong mode.

   Strategy: invert the chrome (--black/--grey/--white tokens)
   and lighten shadow/overlay opacities. Accent family
   (--red, --red-bright, --red-deep) gets per-theme tweaks
   below where the default-dark value isn't legible against a
   white background — sapphire/violet/emerald-deep get nudged
   for contrast.

   Semantic colours (--success/--warn/--info) keep the same
   hue but shift to deeper, more saturated values that read
   well on white. (#3c9453 is fine on dark but desaturates
   into white; the light-mode override picks darker greens.)
   ============================================================ */

[data-mode="light"] {
  /* ── Inverted chrome ─────────────────────────────────────────
     --black is now the brightest "surface" (cards, backgrounds);
     --white is the deepest "ink" (primary text). Names kept for
     consumer-site compatibility — every existing var(--black)
     reference now resolves to white in this mode. */
  --black:       #ffffff;     /* primary surface */
  --black-2:     #f5f5f5;     /* card surface */
  --black-3:     #ebebeb;     /* hover / sunken */
  --black-4:     #dedede;     /* divider stripe */
  --grey-dark:   #c4c4c4;     /* strong border */
  --grey-mid:    #9c9c9c;     /* mid border */
  --grey-light:  #6a6a6a;     /* faint label */
  --grey-text:   #4a4a4a;     /* muted body text */
  --white-dim:   #2a2a2a;     /* secondary ink */
  --white:       #0a0a0a;     /* primary ink */

  /* ── Shadow / overlay — lighter on light backgrounds ─────────
     Black at 0.4 over white reads as a hard grey blob. Soften
     the curve: keep the same relative weight (soft<medium<strong)
     but cap the darkest at ~0.18 so floating elements feel lifted
     not pasted. Modal overlay stays dark-ish (the modal still
     needs to dim the page underneath) but lighter than dark mode. */
  --shadow-35:      rgba(0,0,0,0.06);
  --shadow-soft:    rgba(0,0,0,0.08);
  --shadow-45:      rgba(0,0,0,0.10);
  --shadow-50:      rgba(0,0,0,0.10);
  --shadow-medium:  rgba(0,0,0,0.12);
  --shadow-60:      rgba(0,0,0,0.14);
  --shadow-strong:  rgba(0,0,0,0.16);
  --shadow-70:      rgba(0,0,0,0.18);
  --overlay-modal:  rgba(0,0,0,0.45);
  --overlay-deep:   rgba(0,0,0,0.65);

  /* ── Semantic — deeper hues for white-bg contrast ────────────
     The dark-mode greens/ambers/blues wash out on white; pick
     values that sit at ~50-60% lightness so they READ as success/
     warning/info rather than as decorative pastels. */
  --success:        #1f7a3a;
  --success-bright: #2da14f;
  --success-text:   #1a5e2c;
  --success-glow:   rgba(31,122,58,0.12);
  --success-border: rgba(31,122,58,0.30);

  --warn:           #b07a1f;
  --warn-bright:    #d49520;
  --warn-text:      #7a4f00;
  --warn-glow:      rgba(176,122,31,0.12);
  --warn-border:    rgba(176,122,31,0.30);

  --info:           #2563a8;
  --info-bright:    #3a7fc4;
  --info-glow:      rgba(37,99,168,0.12);
  --info-border:    rgba(37,99,168,0.30);
}

/* Per-theme legibility tweaks for light mode. Each block
   overrides the accent family ONLY when the default value
   doesn't read well on white. Crimson, amber, rose stay as-is
   (already high-contrast on white). Emerald/sapphire/violet
   get deeper accents. Slate is desaturated, no tweak needed. */

[data-mode="light"][data-theme="emerald"] {
  --red:            #047857;
  --red-bright:     #059669;
  --red-deep:       #064e3b;
  --red-glow:       rgba(4,120,87,0.14);
  --red-border:     rgba(4,120,87,0.35);
}
[data-mode="light"][data-theme="sapphire"] {
  --red:            #1d4ed8;
  --red-bright:     #2563eb;
  --red-deep:       #1e3a8a;
  --red-glow:       rgba(29,78,216,0.14);
  --red-border:     rgba(29,78,216,0.40);
}
[data-mode="light"][data-theme="violet"] {
  --red:            #6d28d9;
  --red-bright:     #7c3aed;
  --red-deep:       #4c1d95;
  --red-glow:       rgba(109,40,217,0.14);
  --red-border:     rgba(109,40,217,0.40);
}