/* Theme tokens — SIGNATURE family ("Signature Themes" in the picker).
   The Tracker's own signature/house-built themes. Loaded after tokens-base.css
   (which holds the shared theme-agnostic tokens and the bare-:root default-paint
   alias). Each block here defines a `:root[data-theme="<key>"]` variant; the
   shared tokens come from tokens-base.css. See tokens-base.css for the full
   split rationale + add-a-theme steps.

   Members (themes_definitions() family = 'signature'):
     tuxedo (the default — its keyed block + chrome live here; tokens-base.css
     carries a bare-:root copy of its palette for first paint), midnight,
     deep-blue, slate, pearl, oled, sanrio, kawaii. */

/* ─── Tuxedo (DEFAULT — LIGHT content + DARK chrome, "mime mode") ──────────────
   Page main area is light (mirrors Pearl's lightened palette). Sidebar and
   top nav are deep cool black. Achieved without new tokens: the .nav-rail
   and .nav-top scope-override blocks below redefine --bg / --surface / --ink
   etc. just within those subtrees, so existing component CSS picks up dark
   values WITHIN the chrome and light values everywhere else.
   The bare-:root default-paint alias for this palette lives in tokens-base.css
   (so first paint is tokenized regardless of load order); keep the two in sync. */
:root[data-theme="tuxedo"] {
  --bg:        #edf1f5;   /* light page */
  --surface:   #fafcfd;   /* near-white card */
  --surface-2: #e1e6eb;

  --ink:       #0c1219;
  --ink-2:     #4a5360;
  --ink-3:     #6f7d8c;
  --ink-disabled: #bcc3cc;

  --border:        #d6dbe1;
  --border-strong: #bcc4cc;

  --accent:        #1b944b;
  --accent-strong: #167a3e;
  --accent-soft:   rgba(27, 148, 75, 0.10);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(27, 148, 75, 0.45);

  --status-active:    #1b944b;
  --status-on-hold:   #6a7b85;
  --status-complete:  #3d7fa0;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.10);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #fafcfd;
  --ink-inset:     #0c1219;

}

/* Tuxedo dark-chrome scope overrides — redefine surface/ink/etc. only within
   the rail and top-nav subtrees. Children inherit and the existing component
   CSS that reads `var(--bg)`, `var(--surface)`, `var(--ink)` etc. picks up
   the dark values automatically. */
:root[data-theme="tuxedo"] .nav-rail {
  --bg:            #06090c;   /* deep cool black sidebar */
  --surface:       #161c25;   /* lifted (new-btn, count badges) */
  --surface-2:     #1d2530;   /* further lifted */
  --ink:           #f5f5f6;
  --ink-2:         #b4bdc7;
  --ink-3:         #7a8593;
  --ink-disabled:  #424b58;
  --border:        #1a2230;
  --border-strong: #2a3340;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --shadow:        0 4px 12px rgba(0, 0, 0, 0.55);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="tuxedo"] .nav-top {
  --bg:            #0d1218;
  --surface:       #0d1218;   /* nav bg itself */
  --surface-2:     #161c25;   /* lifted within nav (e.g. avatar bg) */
  --ink:           #f5f5f6;
  --ink-2:         #b4bdc7;
  --ink-3:         #7a8593;
  --ink-disabled:  #424b58;
  --border:        #1a2230;
  --border-strong: #2a3340;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}

/* ─── Midnight (very dark cool black) ─────────────────────────────────── */
:root[data-theme="midnight"] {
  --bg:        #06090c;
  --surface:   #0d1218;
  --surface-2: #161c25;

  --ink:       #f5f5f6;
  --ink-2:     #b4bdc7;
  --ink-3:     #7a8593;
  --ink-disabled: #424b58;

  --border:        #1a2230;
  --border-strong: #2a3340;

  --accent:        #1b944b;
  --accent-strong: #239e54;
  --accent-soft:   rgba(27, 148, 75, 0.16);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(27, 148, 75, 0.55);

  --status-active:    #1b944b;
  --status-on-hold:   #7c8f99;
  --status-complete:  #4a8fb5;
  --status-archived:  #4a5d66;

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.55);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  --surface-hero: #000000;
  --ink-hero:     #f5f5f6;
  --surface-inset: #1a2230;
  --ink-inset:     #f5f5f6;

}

/* ─── Deep Blue (dark) ──────────────────────────────────────────────── */
:root[data-theme="deep-blue"] {
  --bg:        #001921;
  --surface:   #052530;
  --surface-2: #0a3340;

  --ink:       #f9f9f9;
  --ink-2:     #b6c5cc;
  --ink-3:     #7c8f99;
  --ink-disabled: #4a5d66;

  --border:        #0e3d4d;
  --border-strong: #14546a;

  --accent:        #1b944b;
  --accent-strong: #239e54;
  --accent-soft:   rgba(27, 148, 75, 0.16);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(27, 148, 75, 0.55);

  --status-active:    #1b944b;
  --status-on-hold:   #7c8f99;
  --status-complete:  #4a8fb5;
  --status-archived:  #4a5d66;

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.40);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  --surface-hero: #001119;
  --ink-hero:     #f9f9f9;
  --surface-inset: #0a3340;
  --ink-inset:     #f9f9f9;

}

/* ─── Slate (LIGHT — pronounced cool grey, a step down from Pearl) ───── */
:root[data-theme="slate"] {
  --bg:        #c4cbd2;   /* cool grey page (slightly lighter retune) */
  --surface:   #d2d8de;   /* card lighter than the page */
  --surface-2: #b3bbc4;   /* nested darker step */

  --ink:       #0a121b;
  --ink-2:     #3e4a57;
  --ink-3:     #5c6975;
  --ink-disabled: #8e96a0;

  --border:        #b1b9c1;
  --border-strong: #9ba2ab;

  --accent:        #1b944b;
  --accent-strong: #167a3e;
  --accent-soft:   rgba(27, 148, 75, 0.10);

  --hover:    rgba(0, 0, 0, 0.05);
  --active:   rgba(0, 0, 0, 0.08);
  --focus:    rgba(27, 148, 75, 0.45);

  --status-active:    #1b944b;
  --status-on-hold:   #5c6975;
  --status-complete:  #3d7fa0;
  --status-archived:  #7d858f;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.12);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.12);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #d2d8de;
  --ink-inset:     #0a121b;

}

/* ─── Pearl (LIGHT — cool grey, lighter of the two cool lights) ─────── */
:root[data-theme="pearl"] {
  --bg:        #edf1f5;   /* cool grey page (slight bump in lightness) */
  --surface:   #fafcfd;   /* near-white card with faint cool tint */
  --surface-2: #e1e6eb;   /* nested */

  --ink:       #0c1219;
  --ink-2:     #4a5360;
  --ink-3:     #6f7d8c;
  --ink-disabled: #bcc3cc;

  --border:        #d6dbe1;
  --border-strong: #bcc4cc;

  --accent:        #1b944b;
  --accent-strong: #167a3e;
  --accent-soft:   rgba(27, 148, 75, 0.10);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(27, 148, 75, 0.45);

  --status-active:    #1b944b;
  --status-on-hold:   #6a7b85;
  --status-complete:  #3d7fa0;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.10);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #fafcfd;
  --ink-inset:     #0c1219;

}

/* ─── OLED (true-black for TV displays) ─────────────────────────────── */
:root[data-theme="oled"] {
  --bg:        #000000;   /* true black .main */
  --surface:   #0a0a0a;   /* slightly lighter for nav-top, nav-rail, panels */
  --surface-2: #141414;   /* nested cards */

  --ink:       #f5f5f6;
  --ink-2:     #b4bdc7;
  --ink-3:     #7a8593;
  --ink-disabled: #424b58;

  --border:        #1a1a1a;
  --border-strong: #2a2a2a;

  --accent:        #1b944b;
  --accent-strong: #239e54;
  --accent-soft:   rgba(27, 148, 75, 0.16);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(27, 148, 75, 0.55);

  --status-active:    #1b944b;
  --status-on-hold:   #7c8f99;
  --status-complete:  #4a8fb5;
  --status-archived:  #4a5d66;

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.65);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  /* Hero/inset on OLED route through accent green for visibility — black-on-
     black hero panels (and tooltips, which inherit these tokens) would be
     invisible against the true-black main. Green pops on black at distance. */
  --surface-hero: #1b944b;
  --ink-hero:     #ffffff;
  --surface-inset: #1a1a1a;
  --ink-inset:     #f5f5f6;

}

/* ─── Sanrio (LIGHT — near-white content, DEEP-BLUE top-nav, HEAVY-PINK accents) ──
   v3 reshuffle: body keeps the near-white cool-white from v2, but the action
   color goes back to a rich heavy pink and the top nav becomes a deep blue
   (deep enough that pink elements inside it pop without needing a chrome
   accent override — the same pink leaks into chrome and reads bright against
   the dark blue, which is the "light pop on the taskbar" we want).
   Yellow stays as --warning, status-complete uses the overalls blue as a
   third Hello-Kitty palette anchor in body content. */
:root[data-theme="sanrio"] {
  --bg:        #f8fafc;   /* cool white — almost pure, faintest cool tint */
  --surface:   #ffffff;   /* clean white card */
  --surface-2: #eef1f5;   /* cool-grey nested lift */

  --ink:       #1a2742;   /* deep navy — pairs with the deep-blue chrome */
  --ink-2:     #4a5871;
  --ink-3:     #7d8aa1;
  --ink-disabled: #c5ccd6;

  --border:        #e2e7ed;
  --border-strong: #c8d0d9;

  --accent:        #cf3a73;   /* heavy pink — rich and confident, pops on
                                 deep-blue chrome AND has solid contrast for
                                 white badge text (4.5:1+ on body too) */
  --accent-strong: #b22f62;
  --accent-soft:   rgba(207, 58, 115, 0.14);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(207, 58, 115, 0.50);

  --status-active:    #cf3a73;   /* heavy pink (matches accent) */
  --status-on-hold:   #95a3b8;
  --status-complete:  #4f93c8;   /* the overalls blue — the third HK color */
  --status-archived:  #b9b3b6;

  --danger:       #d54c4c;
  --danger-soft:  rgba(213, 76, 76, 0.10);
  --warning:      #f0c33b;       /* the nose yellow */
  --warning-soft: rgba(240, 195, 59, 0.14);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  /* Hero panels invert to the deep navy from --ink so the "always-darker"
     panel pattern reads as Hello-Kitty-eyeline-dark. */
  --surface-hero: #1a2742;
  --ink-hero:     #f8fafc;
  --surface-inset: #ffffff;
  --ink-inset:     #1a2742;

}

/* ─── Kawaii (LIGHT — pastel pinks throughout, functional yellow accent) ───────
   Heavier on pink than Sanrio: the body bg leans pink, the surface-2 lift is
   a visible pink card, and the hero uses a deeper pink. Ink is a deep
   berry/plum so dark text stays readable on the warm bg without going
   muddy-grey. The yellow warning provides the only non-pink functional
   color in body content (danger red also stays, of course). */
:root[data-theme="kawaii"] {
  --bg:        #fef5f8;   /* very pale pink page */
  --surface:   #ffffff;   /* white card lifts above the pink page */
  --surface-2: #fbe2eb;   /* visible pink card lift */

  --ink:       #3d1f2c;   /* deep berry-plum — reads on every surface */
  --ink-2:     #6e4856;
  --ink-3:     #9b7382;
  --ink-disabled: #d4b5c0;

  --border:        #f0d5e0;
  --border-strong: #d8a9bd;

  --accent:        #e84a8e;   /* rich kawaii pink — the action color */
  --accent-strong: #c93675;
  --accent-soft:   rgba(232, 74, 142, 0.14);

  --hover:    rgba(232, 74, 142, 0.05);
  --active:   rgba(232, 74, 142, 0.09);
  --focus:    rgba(232, 74, 142, 0.45);

  --status-active:    #e84a8e;   /* pink */
  --status-on-hold:   #b59aa3;   /* desaturated pink-grey */
  --status-complete:  #8a6c93;   /* dusty plum-purple as a "done" tone */
  --status-archived:  #c9b5bb;

  --danger:       #c4475e;       /* desaturated to fit the pink palette */
  --danger-soft:  rgba(196, 71, 94, 0.12);
  --warning:      #f4b733;       /* the functional yellow accent */
  --warning-soft: rgba(244, 183, 51, 0.14);

  --shadow:    0 4px 12px rgba(60, 20, 35, 0.12);

  --color-scheme:  light;
  --picker-invert: 0;

  /* Hero panel goes to the rich accent pink so .surface--hero widgets pop
     against the pale-pink body without going dark. White text reads on it. */
  --surface-hero: #c93675;
  --ink-hero:     #ffffff;
  --surface-inset: #ffffff;
  --ink-inset:     #3d1f2c;

}

/* Sanrio chrome scope override — top nav becomes deep blue (the overalls,
   reframed darker). The body's heavy-pink --accent is intentionally NOT
   overridden here so that chrome elements that read --accent (timer pill,
   bell badge, tab counts, brand mark) render as pink-on-deep-blue —
   that's the "light pop on the taskbar" effect: the same heavy pink that
   anchors body actions lights up against the dark navbar. White text
   inherits via --ink for everything that isn't a pink badge. */
:root[data-theme="sanrio"] .nav-top {
  --bg:            #1e3a5f;   /* deep blue — dark enough that the body's
                                 pink --accent pops dramatically when it
                                 leaks into chrome elements */
  --surface:       #1e3a5f;
  --surface-2:     #2a4f7a;   /* lifted (avatar bg, hover) */
  --ink:           #ffffff;
  --ink-2:         #c7d8e8;
  --ink-3:         #93a7c1;
  --ink-disabled:  #3d5e88;
  --border:        #2a4f7a;
  --border-strong: #3d5e88;
  --hover:         rgba(255, 255, 255, 0.10);
  --active:        rgba(255, 255, 255, 0.15);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}