/* DEN-TOKEN-1 · The DEN's design tokens. Defined ONCE, here.
 *
 * Why this file exists
 * --------------------
 * The core palette used to be copy-pasted into three files —
 * den.css, den_case_files.css and den_guide.css each opened with
 * its own --ink / --ink-70 / --bg / --sage / --gold block. Copies
 * drift, and these had: --border was rgba(28,28,25,0.09) on the
 * chat page and 0.10 on the other two, --border-str 0.16 vs 0.18.
 * Nobody chose that; it is just what three hand-maintained copies
 * do. This file settles on the majority value (0.10 / 0.18).
 *
 * Names are prefixed --den-*. The old names were bare (--ink,
 * --bg, --border, --gold), which is a real hazard: custom
 * properties inherit through the whole document, so a bare --ink
 * defined by any other app's stylesheet on a shared page silently
 * repaints DEN, and vice versa. The prefix makes that impossible.
 *
 * Not everything lives here on purpose:
 *
 *   · market_pulse.css keeps its own --pulse-* namespace. It is
 *     already a coherent, self-contained set with proper light /
 *     dark / [data-theme] blocks — the best-built CSS in the DEN.
 *     Folding it in would be churn with a real chance of breaking
 *     the theme switch, for no gain.
 *   · saturday/static/css/base.css is the site shell's dark
 *     navy+gold palette. DEN's surfaces are cream, so it needs its
 *     own layer rather than inheriting one that does not fit. That
 *     is why this file exists instead of just using base.css.
 *
 * Load this BEFORE any other den/css/*.css so the tokens resolve.
 */

:root {
  /* ── Ink ─────────────────────────────────────────────────
   * Four steps of the same warm near-black. -70/-50/-30 are
   * opacity-derived names kept from the original palette, but
   * they are flat colours, not alphas — they must stay legible
   * over --den-surface AND --den-bg.
   */
  --den-ink:            #1c1c19;
  --den-ink-70:         #55554e;
  --den-ink-50:         #7d7d75;
  --den-ink-30:         #a8a8a0;

  /* ── Surfaces ────────────────────────────────────────────
   * --den-bg is the page ground, --den-surface the raised card.
   * --den-user-bg is the chat's own user-turn bubble; it lives
   * here rather than in den.css so the Case Files transcript
   * view can match the chat exactly.
   */
  --den-bg:             #faf8f2;
  --den-surface:        #ffffff;
  --den-user-bg:        #f0ede4;

  /* ── Rules ───────────────────────────────────────────────
   * Alpha over the page ground rather than a flat grey, so a
   * border reads correctly on both --den-bg and --den-surface.
   * 0.10 / 0.18 is the value two of the three old copies used.
   */
  --den-border:         rgba(28, 28, 25, 0.10);
  --den-border-strong:  rgba(28, 28, 25, 0.18);

  /* ── Brand ───────────────────────────────────────────────
   * Sage is the DEN's accent — LLaMa's colour, distinct from the
   * site's fox gold. --den-gold is the muted DEN variant of that
   * site gold, used for tier chips and upgrade CTAs.
   */
  --den-sage:           #3f5544;
  --den-sage-soft:      rgba(63, 85, 68, 0.08);
  --den-sage-line:      rgba(63, 85, 68, 0.14);
  --den-sage-tint:      #dbe3d9;
  --den-sage-strong:    #2f4034;
  --den-gold:           #b8871f;

  /* ── Status ──────────────────────────────────────────────
   * Free / £0 is green, gated or costed is amber. Used by the
   * guide's zone tables and the palette's cost chips.
   */
  --den-green:          #2f7a4a;
  --den-green-soft:     rgba(47, 122, 74, 0.10);
  --den-amber:          #a86b12;
  --den-amber-soft:     rgba(168, 107, 18, 0.10);

  /* ── Companion panel ─────────────────────────────────────
   * The racecard companion sits on a green-tinted card rather
   * than cream, so its ink is a touch cooler than --den-ink.
   * Its old --dc-sage-deep was byte-identical to --den-sage and
   * has been collapsed into it.
   */
  --den-comp-ink:       #2a2f2a;
  --den-comp-ink-70:    #55605a;

  /* ── Theme-independent ───────────────────────────────────
   * DEN-FOLD-1 · Ink on a SATURATED ground — a won badge, a silk, a
   * signal chip. Those backgrounds stay saturated in both themes, so
   * their ink must stay light in both: swapping it for
   * --den-on-accent (which inverts) would put dark ink on a green
   * badge. Declared once, in :root only, exactly like the geometry
   * below — a value that must NOT follow the theme is not the same
   * thing as one nobody got round to tokenising.
   */
  --den-on-saturated:   #ffffff;

  /* ── Geometry ────────────────────────────────────────────*/
  --den-radius:         18px;
  --den-sidebar-w:      260px;

  /* ── Surfaces the shell paints directly ──────────────────
   * DEN-DARK-1 · These were hardcoded in den.css, which is why
   * the shell could not follow a theme at all. The sidebar was
   * #f4f1e8, the send button's ink #fff9e4, the tier pills a
   * gold pair — none of them could change.
   */
  --den-sidebar-bg:     #f4f1e8;
  --den-on-accent:      #fff9e4;   /* ink on sage / dark buttons */
  --den-ink-invert:     #3a3a34;   /* the dark button ground */

  /* ── Tier + quota status pairs ───────────────────────────
   * Background/ink pairs, so a dark theme can restate both and
   * keep the contrast rather than inverting one half of it.
   */
  --den-gold-tint:      #f6e6a8;
  --den-gold-ink:       #6b4a05;
  --den-gold-hi:        #f6d670;   /* upgrade gradient, light end */
  --den-gold-lo:        #d9a838;   /* upgrade gradient, dark end */
  --den-gold-deep:      #3d2a04;   /* ink on that gradient */
  --den-warn-bg:        #fdf1d6;
  --den-warn-ink:       #6b4a05;
  --den-crit-bg:        #fbe1d6;
  --den-crit-ink:       #8a2e0a;
  --den-stop:           #b45309;
  --den-stop-hi:        #92400e;
  --den-neutral-bg:     rgba(28, 28, 25, 0.06);
  --den-muted-ink:      #6b7280;
  --den-faint-ink:      #9ca3af;

  /* DEN-FOLD-1 · Signal hues for the den-* card families.
   * Six hues as background/line/ink trios, so a theme
   * restates all three and keeps the contrast rather than
   * inverting one part of it. These were 41 literals inside
   * .den-tr__chip--* and .den-tr__group-title--*, which is
   * why those families needed a hand-written dark override
   * block instead of following the theme. */
  --den-hue-teal-bg:      #E1F5EE;
  --den-hue-teal-line:    #1D9E75;
  --den-hue-teal-ink:     #0F6E56;
  --den-hue-green-bg:     #EAF3DE;
  --den-hue-green-line:   #639922;
  --den-hue-green-ink:    #3B6D11;
  --den-hue-amber-bg:     #FAEEDA;
  --den-hue-amber-line:   #EF9F27;
  --den-hue-amber-ink:    #854F0B;
  --den-hue-purple-bg:    #EEEDFE;
  --den-hue-purple-line:  #7F77DD;
  --den-hue-purple-ink:   #3C3489;
  --den-hue-blue-bg:      #E6F1FB;
  --den-hue-blue-line:    #378ADD;
  --den-hue-blue-ink:     #0C447C;
  --den-hue-coral-bg:     #FAECE7;
  --den-hue-coral-line:   #D85A30;
  --den-hue-coral-ink:    #993C1D;

  --den-pos:             #1e8449;
  --den-neg:             #b03a2e;
  --den-rail-lead:       #1e8449;
}


/* ═══ DARK ════════════════════════════════════════════════
 * DEN-DARK-1 · The shell had NO dark mode: zero
 * prefers-color-scheme rules in this file or den.css, while
 * market_pulse.css — every card in the DEN — carries a full dark
 * palette. So a phone set to dark rendered dark cards on a cream
 * shell. That was not a missing feature, it was a visible defect.
 *
 * The values below deliberately match the --pulse-* dark set
 * (paper #1c1c15, ink #f2ecda, sage #8fa891, rule #33321f) so the
 * seam between the chat surface and the cards closes. --den-bg is
 * one step darker than --den-surface so a card still reads as
 * raised off the page, which is the relationship the light theme
 * has and the dark one has to keep.
 *
 * Three blocks, the same convention market_pulse.css uses:
 *   1. the media query, for the OS preference
 *   2. [data-theme="dark"], so an explicit choice wins
 *   3. [data-theme="light"], so the choice wins the other way too
 * Only the first fires today — nothing on the site sets
 * data-theme except Django admin — but a toggle that arrives later
 * must not need this file reopened.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --den-ink:            #f2ecda;
    --den-ink-70:         #c3bda8;
    --den-ink-50:         #948d75;
    --den-ink-30:         #6a6653;

    --den-bg:             #16160f;
    --den-surface:        #1c1c15;
    --den-user-bg:        #23231b;
    --den-sidebar-bg:     #13130d;

    --den-border:         rgba(242, 236, 218, 0.12);
    --den-border-strong:  rgba(242, 236, 218, 0.22);

    --den-sage:           #8fa891;
    --den-sage-soft:      rgba(143, 168, 145, 0.12);
    --den-sage-line:      rgba(143, 168, 145, 0.24);
    --den-sage-tint:      #253027;
    --den-sage-strong:    #b0c5b2;
    --den-gold:           #e0b562;

    --den-green:          #7bc190;
    --den-green-soft:     rgba(123, 193, 144, 0.14);
    --den-amber:          #d9986a;
    --den-amber-soft:     rgba(217, 152, 106, 0.14);

    --den-comp-ink:       #e6e2d2;
    --den-comp-ink-70:    #b5b0a0;

    --den-on-accent:      #14140e;
    --den-ink-invert:     #e8e3d2;

    --den-gold-tint:      #2b2416;
    --den-gold-ink:       #e0b562;
    --den-gold-hi:        #6d5520;
    --den-gold-lo:        #4a3a14;
    --den-gold-deep:      #f0d89a;
    --den-warn-bg:        #2f2716;
    --den-warn-ink:       #e0b562;
    --den-crit-bg:        #33201a;
    --den-crit-ink:       #e09a78;
    --den-stop:           #c2691f;
    --den-stop-hi:        #a8541a;
    --den-neutral-bg:     rgba(242, 236, 218, 0.08);
    --den-muted-ink:      #9d9c92;
    --den-faint-ink:      #75746c;

    /* DEN-FOLD-1 · Signal hues for the den-* card families.
     * Six hues as background/line/ink trios, so a theme
     * restates all three and keeps the contrast rather than
     * inverting one part of it. These were 41 literals inside
     * .den-tr__chip--* and .den-tr__group-title--*, which is
     * why those families needed a hand-written dark override
     * block instead of following the theme. */
    --den-hue-teal-bg:      #12241e;
    --den-hue-teal-line:    #2f7a5e;
    --den-hue-teal-ink:     #7fd3b4;
    --den-hue-green-bg:     #1a2313;
    --den-hue-green-line:   #5c8a2a;
    --den-hue-green-ink:    #a8cf74;
    --den-hue-amber-bg:     #2a2113;
    --den-hue-amber-line:   #a8752a;
    --den-hue-amber-ink:    #e5b877;
    --den-hue-purple-bg:    #1c1b2e;
    --den-hue-purple-line:  #6159b0;
    --den-hue-purple-ink:   #aca5ee;
    --den-hue-blue-bg:      #131e2b;
    --den-hue-blue-line:    #2f6ba8;
    --den-hue-blue-ink:     #8dbce8;
    --den-hue-coral-bg:     #2b1a14;
    --den-hue-coral-line:   #a84a28;
    --den-hue-coral-ink:    #e8a087;

    --den-pos:             #7bc190;
    --den-neg:             #e08878;
    --den-rail-lead:       #2f7a4a;
  }
}

[data-theme="dark"] {
  --den-ink:            #f2ecda;
  --den-ink-70:         #c3bda8;
  --den-ink-50:         #948d75;
  --den-ink-30:         #6a6653;
  --den-bg:             #16160f;
  --den-surface:        #1c1c15;
  --den-user-bg:        #23231b;
  --den-sidebar-bg:     #13130d;
  --den-border:         rgba(242, 236, 218, 0.12);
  --den-border-strong:  rgba(242, 236, 218, 0.22);
  --den-sage:           #8fa891;
  --den-sage-soft:      rgba(143, 168, 145, 0.12);
  --den-sage-line:      rgba(143, 168, 145, 0.24);
  --den-sage-tint:      #253027;
  --den-sage-strong:    #b0c5b2;
  --den-gold:           #e0b562;
  --den-green:          #7bc190;
  --den-green-soft:     rgba(123, 193, 144, 0.14);
  --den-amber:          #d9986a;
  --den-amber-soft:     rgba(217, 152, 106, 0.14);
  --den-comp-ink:       #e6e2d2;
  --den-comp-ink-70:    #b5b0a0;
  --den-on-accent:      #14140e;
  --den-ink-invert:     #e8e3d2;
  --den-gold-tint:      #2b2416;
  --den-gold-ink:       #e0b562;
  --den-gold-hi:        #6d5520;
  --den-gold-lo:        #4a3a14;
  --den-gold-deep:      #f0d89a;
  --den-warn-bg:        #2f2716;
  --den-warn-ink:       #e0b562;
  --den-crit-bg:        #33201a;
  --den-crit-ink:       #e09a78;
  --den-stop:           #c2691f;
  --den-stop-hi:        #a8541a;
  --den-neutral-bg:     rgba(242, 236, 218, 0.08);
  --den-muted-ink:      #9d9c92;
  --den-faint-ink:      #75746c;

  /* DEN-FOLD-1 · Signal hues for the den-* card families.
   * Six hues as background/line/ink trios, so a theme
   * restates all three and keeps the contrast rather than
   * inverting one part of it. These were 41 literals inside
   * .den-tr__chip--* and .den-tr__group-title--*, which is
   * why those families needed a hand-written dark override
   * block instead of following the theme. */
  --den-hue-teal-bg:      #12241e;
  --den-hue-teal-line:    #2f7a5e;
  --den-hue-teal-ink:     #7fd3b4;
  --den-hue-green-bg:     #1a2313;
  --den-hue-green-line:   #5c8a2a;
  --den-hue-green-ink:    #a8cf74;
  --den-hue-amber-bg:     #2a2113;
  --den-hue-amber-line:   #a8752a;
  --den-hue-amber-ink:    #e5b877;
  --den-hue-purple-bg:    #1c1b2e;
  --den-hue-purple-line:  #6159b0;
  --den-hue-purple-ink:   #aca5ee;
  --den-hue-blue-bg:      #131e2b;
  --den-hue-blue-line:    #2f6ba8;
  --den-hue-blue-ink:     #8dbce8;
  --den-hue-coral-bg:     #2b1a14;
  --den-hue-coral-line:   #a84a28;
  --den-hue-coral-ink:    #e8a087;

  --den-pos:             #7bc190;
  --den-neg:             #e08878;
  --den-rail-lead:       #2f7a4a;
}

[data-theme="light"] {
  --den-ink:            #1c1c19;
  --den-ink-70:         #55554e;
  --den-ink-50:         #7d7d75;
  --den-ink-30:         #a8a8a0;
  --den-bg:             #faf8f2;
  --den-surface:        #ffffff;
  --den-user-bg:        #f0ede4;
  --den-sidebar-bg:     #f4f1e8;
  --den-border:         rgba(28, 28, 25, 0.10);
  --den-border-strong:  rgba(28, 28, 25, 0.18);
  --den-sage:           #3f5544;
  --den-sage-soft:      rgba(63, 85, 68, 0.08);
  --den-sage-line:      rgba(63, 85, 68, 0.14);
  --den-sage-tint:      #dbe3d9;
  --den-sage-strong:    #2f4034;
  --den-gold:           #b8871f;
  --den-green:          #2f7a4a;
  --den-green-soft:     rgba(47, 122, 74, 0.10);
  --den-amber:          #a86b12;
  --den-amber-soft:     rgba(168, 107, 18, 0.10);
  --den-comp-ink:       #2a2f2a;
  --den-comp-ink-70:    #55605a;
  --den-on-accent:      #fff9e4;
  --den-ink-invert:     #3a3a34;
  --den-gold-tint:      #f6e6a8;
  --den-gold-ink:       #6b4a05;
  --den-gold-hi:        #f6d670;
  --den-gold-lo:        #d9a838;
  --den-gold-deep:      #3d2a04;
  --den-warn-bg:        #fdf1d6;
  --den-warn-ink:       #6b4a05;
  --den-crit-bg:        #fbe1d6;
  --den-crit-ink:       #8a2e0a;
  --den-stop:           #b45309;
  --den-stop-hi:        #92400e;
  --den-neutral-bg:     rgba(28, 28, 25, 0.06);
  --den-muted-ink:      #6b7280;
  --den-faint-ink:      #9ca3af;

  /* DEN-FOLD-1 · Signal hues for the den-* card families.
   * Six hues as background/line/ink trios, so a theme
   * restates all three and keeps the contrast rather than
   * inverting one part of it. These were 41 literals inside
   * .den-tr__chip--* and .den-tr__group-title--*, which is
   * why those families needed a hand-written dark override
   * block instead of following the theme. */
  --den-hue-teal-bg:      #E1F5EE;
  --den-hue-teal-line:    #1D9E75;
  --den-hue-teal-ink:     #0F6E56;
  --den-hue-green-bg:     #EAF3DE;
  --den-hue-green-line:   #639922;
  --den-hue-green-ink:    #3B6D11;
  --den-hue-amber-bg:     #FAEEDA;
  --den-hue-amber-line:   #EF9F27;
  --den-hue-amber-ink:    #854F0B;
  --den-hue-purple-bg:    #EEEDFE;
  --den-hue-purple-line:  #7F77DD;
  --den-hue-purple-ink:   #3C3489;
  --den-hue-blue-bg:      #E6F1FB;
  --den-hue-blue-line:    #378ADD;
  --den-hue-blue-ink:     #0C447C;
  --den-hue-coral-bg:     #FAECE7;
  --den-hue-coral-line:   #D85A30;
  --den-hue-coral-ink:    #993C1D;

  --den-pos:             #1e8449;
  --den-neg:             #b03a2e;
  --den-rail-lead:       #1e8449;
}