/* ============================================================
   THEMES — color roles (Tier 2)
   ------------------------------------------------------------
   Maps semantic color roles onto palette values. The UI only
   ever references these roles, never raw paints. A new theme is
   just another [data-theme="..."] block mapping the same roles.

   Roles:
     --canvas    app background / wallpaper
     --go        traffic light: maximize (+)   [green family]
     --stop      traffic light: close    (x)   [red family]
     --pause     traffic light: minimize (-)   [yellow family]
     --title     app title + headings
     --text      primary text
     --subtext   secondary / dim text
     --ink-2     the SECOND PLATE: one spot color printed slightly
                 out of register behind cards and menus. Only the
                 Press skin prints it (skin.css), but the choice is
                 the THEME's — which of its own accents survives as
                 a solid 4px block on that theme's stock. Lilac and
                 Green pick their pink/magenta over a washed-out
                 mint or fern; Sepia's terracotta is the classic riso
                 red on parchment; Black & Yellow and Black & Red
                 print their hi-vis signature straight; Moonlight,
                 whose accents are all near-white, mixes its silver
                 back toward the canvas so the plate reads as a tone
                 rather than a headlight.
   ============================================================ */

/* ── Runtime album roles (ALBUM-COLOR.md) ─────────────────────
   A fourth color source ABOVE theme: JS sets real per-track values
   as inline custom props on the NP card; these theme-owned fallbacks
   keep the props resolvable, so with no album loaded the aurora is
   theme-accent-sourced. Declared once — each var() resolves against
   the ACTIVE theme's roles. No album hex ever lives in CSS. */
:root {
  --album-bg: var(--surface);
  --album-c1: var(--go);
  --album-c2: var(--stop);

  /* Second-plate fallback: a theme that never names --ink-2 still prints
     Press's offset in its own "go" accent. */
  --ink-2: var(--go);

  /* Status lights — deliberately THEME-INDEPENDENT (Aditya, 2026-09-14).
     A status reading must say ok / warn / fail at a glance on every theme,
     and the monochrome themes' own traffic lights can't (Moonlight's are
     white → gray). So these are Sepia's three lights, declared once here
     and never redefined per theme. Used by the DeetsMusic status dot and
     check strip only; toasts and chips keep the theme's --go/--pause/--stop. */
  --status-ok:   var(--paint-olive-leaf);
  --status-warn: var(--paint-amber-glow);
  --status-fail: var(--paint-terracotta);
}

[data-theme="lilac"] {
  color-scheme: light;
  --canvas:  var(--paint-dewy-lilac);
  --go:      var(--paint-fae-mint);
  --stop:    var(--paint-purple-cactus-flower);
  --pause:   var(--paint-lemon-chrome);
  --traffic-glyph: rgba(0, 0, 0, 0.55);  /* sigil stroke on the light fills */
  --title:   var(--paint-dusk-plum);
  --text:    var(--paint-violet-ink);
  --subtext: var(--paint-lavender-ink);

  --ink-2:   var(--stop);   /* cactus-flower magenta on dewy lilac */

  /* surfaces — floating panels (menus, popovers) above the canvas */
  --surface:       var(--paint-lilac-white);
  --surface-hover: var(--paint-lilac-tint);
  --border:        rgba(67, 48, 107, 0.16);  /* plum @ low alpha */

  /* panel edge — bento grouper hairline (the fill is a skin decision now) */
  --panel-border: rgba(67, 48, 107, 0.30);

  /* scrollbar thumb (our own, replacing the OS bar) */
  --scrollbar:       rgba(67, 48, 107, 0.26);
  --scrollbar-hover: rgba(67, 48, 107, 0.44);
}

[data-theme="green"] {
  color-scheme: light;
  --canvas:  var(--paint-dewy-chartreuse);
  --go:      var(--paint-fern);
  --stop:    var(--paint-foxglove);
  --pause:   var(--paint-lemon-chrome);
  --traffic-glyph: rgba(0, 0, 0, 0.55);  /* sigil stroke on the light fills */
  --title:   var(--paint-deep-forest);
  --text:    var(--paint-moss-ink);
  --subtext: var(--paint-sage-ink);

  --ink-2:   var(--stop);   /* foxglove pink against the green stock */

  /* surfaces — floating panels (menus, popovers) above the canvas */
  --surface:       var(--paint-chartreuse-white);
  --surface-hover: var(--paint-chartreuse-tint);
  --border:        rgba(30, 77, 43, 0.16);   /* forest @ low alpha */

  /* panel edge — bento grouper hairline (the fill is a skin decision now) */
  --panel-border: rgba(30, 77, 43, 0.30);

  /* scrollbar thumb (our own, replacing the OS bar) */
  --scrollbar:       rgba(30, 77, 43, 0.26);
  --scrollbar-hover: rgba(30, 77, 43, 0.44);
}

[data-theme="sepia"] {
  color-scheme: light;
  --canvas:  var(--paint-parchment);
  --go:      var(--paint-olive-leaf);
  --stop:    var(--paint-terracotta);
  --pause:   var(--paint-amber-glow);
  --traffic-glyph: rgba(0, 0, 0, 0.55);  /* sigil stroke on the light fills */
  --title:   var(--paint-espresso);
  --text:    var(--paint-cocoa-ink);
  --subtext: var(--paint-tan-ink);

  --ink-2:   var(--stop);   /* terracotta — the classic riso red */

  /* surfaces — floating panels (menus, popovers) above the canvas */
  --surface:       var(--paint-parchment-light);
  --surface-hover: var(--paint-parchment-tint);
  --border:        rgba(62, 44, 28, 0.16);   /* espresso @ low alpha */

  /* panel edge — bento grouper hairline (the fill is a skin decision now) */
  --panel-border: rgba(62, 44, 28, 0.30);

  /* scrollbar thumb (our own, replacing the OS bar) */
  --scrollbar:       rgba(62, 44, 28, 0.26);
  --scrollbar-hover: rgba(62, 44, 28, 0.44);
}

[data-theme="moonlight"] {
  color-scheme: dark;
  --canvas:  var(--paint-deep-slate);
  --go:      var(--paint-moonlight-white);   /* lights are monochrome here: */
  --stop:    var(--paint-moonlight-gray);    /* varying moonlight white → gray */
  --pause:   var(--paint-moonlight-silver);
  --traffic-glyph: rgba(0, 0, 0, 0.55);  /* sigil stroke on the white→gray fills */
  --title:   var(--paint-moon-bright);       /* title → subtext: bright → dim */
  --text:    var(--paint-moon-mid);
  --subtext: var(--paint-moon-dim);

  --ink-2:   color-mix(in srgb, var(--pause) 55%, var(--canvas));  /* muted silver plate */

  /* surfaces — floating panels (menus, popovers) above the canvas */
  --surface:       var(--paint-slate-surface);
  --surface-hover: var(--paint-slate-surface-tint);
  --border:        rgba(199, 211, 227, 0.14); /* slate blue-gray @ low alpha */

  /* panel edge — bento grouper hairline (the fill is a skin decision now) */
  --panel-border: rgba(199, 211, 227, 0.30);

  /* scrollbar thumb (our own, replacing the OS bar) */
  --scrollbar:       rgba(199, 211, 227, 0.22);
  --scrollbar-hover: rgba(199, 211, 227, 0.40);
}

[data-theme="black-yellow"] {
  color-scheme: dark;
  --canvas:  var(--paint-pitch);
  --go:      var(--paint-hazard);   /* monochrome yellow family — no green/red: */
  --stop:    var(--paint-straw);    /* hazard / amber / straw */
  --pause:   var(--paint-amber-wax);
  --traffic-glyph: rgba(0, 0, 0, 0.70);  /* crisper stroke on hi-vis yellow */
  --title:   var(--paint-hazard);
  --text:    var(--paint-paper-warm);
  --subtext: var(--paint-straw);

  --ink-2:   var(--go);     /* hazard yellow, printed straight */

  /* surfaces — floating panels (menus, popovers) above the canvas */
  --surface:       var(--paint-onyx);
  --surface-hover: var(--paint-onyx-tint);
  --border:        rgba(255, 212, 0, 0.14);  /* hazard @ low alpha — gold hairline */

  /* panel edge — bento grouper hairline (the fill is a skin decision now) */
  --panel-border: rgba(255, 212, 0, 0.30);

  /* scrollbar thumb (our own, replacing the OS bar) */
  --scrollbar:       rgba(255, 212, 0, 0.22);
  --scrollbar-hover: rgba(255, 212, 0, 0.40);
}

[data-theme="black-red"] {
  color-scheme: dark;
  --canvas:  var(--paint-pitch);
  --go:      var(--paint-siren);    /* monochrome red family — no green/yellow: */
  --stop:    var(--paint-ember);    /* siren / blood / ember */
  --pause:   var(--paint-blood);
  --traffic-glyph: rgba(0, 0, 0, 0.70);  /* crisper stroke on hot red fills */
  --title:   var(--paint-siren);
  --text:    var(--paint-ash-white);
  --subtext: var(--paint-ember);

  --ink-2:   var(--go);     /* siren red, printed straight */

  /* surfaces — floating panels (menus, popovers) above the canvas */
  --surface:       var(--paint-onyx);
  --surface-hover: var(--paint-onyx-tint);
  --border:        rgba(255, 43, 43, 0.14);  /* siren @ low alpha — red hairline */

  /* panel edge — bento grouper hairline (the fill is a skin decision now) */
  --panel-border: rgba(255, 43, 43, 0.30);

  /* scrollbar thumb (our own, replacing the OS bar) */
  --scrollbar:       rgba(255, 43, 43, 0.22);
  --scrollbar-hover: rgba(255, 43, 43, 0.40);
}

/* ── Metal (the sixth skin; ported from DeetsMusic 0.31.0's themes.css) ─────────────
   Light and shade on the metal are the same in every theme (light is white, shade is
   black), stronger on the light aluminums. Each theme names its metal and the floor
   under it. Only the Metal skin reads these. */
:root {
  --metal-edge:     light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.12));
  --metal-edge-hi:  light-dark(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.16));
  --metal-edge-lo:  light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.6));
  --metal-contact:  rgba(0, 0, 0, 0.3);    /* a card's crisp contact shadow */
  --metal-cast:     rgba(0, 0, 0, 0.16);   /* its short cast shadow */
}
[data-theme="lilac"]        { --metal: var(--paint-lilac-aluminum); --metal-floor: var(--paint-lilac-aluminum-floor); }
[data-theme="green"]        { --metal: var(--paint-green-aluminum); --metal-floor: var(--paint-green-aluminum-floor); }
[data-theme="sepia"]        { --metal: var(--paint-brass);          --metal-floor: var(--paint-brass-floor); }
[data-theme="moonlight"]    { --metal: var(--paint-blue-steel);     --metal-floor: var(--paint-blue-steel-floor); }
[data-theme="black-yellow"] { --metal: var(--paint-dark-steel);     --metal-floor: var(--paint-dark-steel-floor); }
[data-theme="black-red"]    { --metal: var(--paint-blackened-steel); --metal-floor: var(--paint-blackened-floor); }

/* Metal's text roles where a theme's own fall short on the brushed plates. Each theme
   keeps its own hue; only the lightness moves. */
[data-skin="metal"][data-theme="black-yellow"] { --title: var(--paint-gold-leaf); }
[data-skin="metal"][data-theme="moonlight"] { --text: var(--paint-moon-steel-text); --subtext: var(--paint-moon-steel-subtext); }
[data-skin="metal"][data-theme="black-red"] { --title: var(--paint-anodized-red); --subtext: var(--paint-anodized-red-subtext); }
[data-skin="metal"][data-theme="lilac"] { --subtext: var(--paint-lilac-metal-subtext); }
[data-skin="metal"][data-theme="green"] { --text: var(--paint-green-metal-text); --subtext: var(--paint-green-metal-subtext); }
/* Metal over Sepia: brushed brass (his call in the app, 2026-10-20). Under Metal only,
   Sepia turns dark: the scheme, the plate and floor, and the text roles. */
[data-skin="metal"][data-theme="sepia"] {
  color-scheme: dark;
  --title:   var(--paint-brass-gold);
  --text:    var(--paint-brass-cream);
  --subtext: var(--paint-brass-sand);
  --border:        rgba(243, 231, 201, 0.14);   /* cream @ low alpha */
  --panel-border:  rgba(243, 231, 201, 0.28);
  --scrollbar:       rgba(233, 196, 106, 0.26);  /* brass gold @ low alpha */
  --scrollbar-hover: rgba(233, 196, 106, 0.46);
  --traffic-glyph: rgba(0, 0, 0, 0.6);
}