/* ===== watchcafe.eu — central theme definitions =====
   The default (Watch Café dark) theme lives inline in each page's <style>
   to prevent a flash on load. This file holds only the theme OVERRIDES,
   applied when <html data-theme="..."> is set by nav.js.

   To tweak a theme or add one, edit ONLY this file.
   Each block sets every variable used anywhere on the site; pages ignore
   the ones they don't use. --bg and --page are kept in sync (pages use one
   or the other). Functional colours (LED clock red, green watch clock,
   graph scale, position colours) are NOT themed and stay in the pages. */

/* ===== Legend: what each variable colours =====
   Surfaces
   --bg / --page    Page background behind everything (homepage + café use
                    --bg, the other pages --page; always the same value).
   --card           Main content card that holds a page; also nav dropdowns.
   --card2          Raised blocks inside a card: homepage tool tiles, café
                    report + event date tiles, guide TOC chips, PR clock box.
   --border         Thin outlines of cards, tiles, inputs, dividers, menus.

   Text
   --ink            Normal body text and headings.
   --muted          Secondary text: subtitles, hints, labels, dates.

   Accent (the theme's signature colour)
   --accent         Highlighted text and active states: page titles, links,
                    icons, hovered tile border, primary buttons, active
                    toggles/selected watch card, brand dot, menu check
                    mark, left stripe of café blocks and viewer tips.
   --accent-d       Second accent: viewer guide headings. Darker accent in
                    most themes, a contrast colour in Snowflake/Kermit (gold),
                    Speedy (white). Primary buttons no longer use it: they are
                    a tint of --accent (color-mix) instead of a solid fill.
   --accent-glow    Soft glow around accent items: brand dot, active clock
                    buttons (tick / fullscreen).
   --banner         Filled message strips: café "Next Café" block, saved/
                    info banners (Rate Meter, Power Reserve), checked
                    switch track in the viewer. Always with white text.

   Menu bar (nav.js)
   --nav-bg         Menu bar and mobile menu background.
   --nav-border     Line under the menu bar.
   --nav-hover      Hovered menu item / dropdown row.

   Clock panels
   --panel-1/-2     Top/bottom of the dark gradient behind the homepage LED
                    clock and the Rate Meter clock panel.
   --panel-border   Outline of the homepage clock panel.
   --led-on         Lit segments + colon of the homepage LED clock.
   --led-off        Unlit segments (shown faint) on homepage, Rate Meter and
                    privacy-page LED digits.
   --led-glow       Glow around lit homepage LED segments.
   --amber-on       Date text under the homepage clock.
   --amber-glow     Glow of that date text and of the Power Reserve LEDs.

   Power Reserve + Viewer LED readouts
   --amber          Lit Power Reserve LED digits/text and reserve hours.
   --amber-off      Unlit Power Reserve LED segments.
   --green / --green-off / --green-glow
                    Green Power Reserve LED (lit / unlit / glow). Same value
                    in every theme: it is the functional "watch" colour.
   --led-amber      Rate digits + sign of the Backup Viewer LED display.
   --led-amber-off  Unlit "ghost" digits behind that display. */

:root[data-theme="daydate"]{
  --bg:#171208; --page:#171208; --card:#241c0d; --card2:#2b2210; --border:#4a3a1c;
  --accent:#d4af52; --accent-d:#b8923a; --ink:#f0e9d8; --muted:#b3a582;
  --banner:#9a7c33;
  --nav-bg:#120e05; --nav-border:#3e3117; --nav-hover:#281f0d; --accent-glow:rgba(212,175,82,.6);
  --led-on:#ffcf5a; --led-off:#3a2a08; --led-glow:rgba(255,207,90,0.8);
  --amber-on:#e0c060; --amber-glow:rgba(212,175,82,.75);
  --panel-1:#181206; --panel-2:#0b0803; --panel-border:#3a2c14;
  --amber:#d4af52; --amber-off:#3a2a08; --green:#3be35b; --green-off:#0c2a17; --green-glow:rgba(59,227,91,.7);
  --led-amber:#d4af52; --led-amber-off:#3a2a08;
}
:root[data-theme="snowflake"]{
  --bg:#0a1830; --page:#0a1830; --card:#112448; --card2:#152c56; --border:#294a80;
  --accent:#5b9bff; --accent-d:#d9a441; --ink:#e7ecf4; --muted:#8ea3c4;
  --banner:#2b5a9e;
  --nav-bg:#081426; --nav-border:#234270; --nav-hover:#152c52; --accent-glow:rgba(91,155,255,.6);
  --led-on:#4d8bff; --led-off:#0b1a33; --led-glow:rgba(77,139,255,0.8);
  --amber-on:#d9a441; --amber-glow:rgba(91,155,255,.75);
  --panel-1:#111b2e; --panel-2:#080f1c; --panel-border:#243657;
  --amber:#5b9bff; --amber-off:#0e2138; --green:#3be35b; --green-off:#0c2a17; --green-glow:rgba(59,227,91,.7);
  --led-amber:#5b9bff; --led-amber-off:#0e2138;
}
:root[data-theme="speedy"]{
  --bg:#0f0f11; --page:#0f0f11; --card:#1b1b20; --card2:#212127; --border:#3a3a43;
  --accent:#e2483d; --accent-d:#f2f2f2; --ink:#ececee; --muted:#9a9aa2;
  --banner:#8a3a34;
  --nav-bg:#141416; --nav-border:#33333a; --nav-hover:#242429; --accent-glow:rgba(226,72,61,.6);
  --led-on:#f2f2f2; --led-off:#2a2a2e; --led-glow:rgba(255,255,255,0.7);
  --amber-on:#e2483d; --amber-glow:rgba(226,72,61,.75);
  --panel-1:#131316; --panel-2:#060608; --panel-border:#2a2a30;
  --amber:#e2483d; --amber-off:#3a1210; --green:#3be35b; --green-off:#0c2a17; --green-glow:rgba(59,227,91,.7);
  --led-amber:#e2483d; --led-amber-off:#3a1210;
}
:root[data-theme="monster"]{
  --bg:#1a1206; --page:#1a1206; --card:#26200f; --card2:#2d2513; --border:#4d3d1e;
  --accent:#ff8a2a; --accent-d:#e8641c; --ink:#efe9e1; --muted:#b0a48f;
  --banner:#a85e1e;
  --nav-bg:#140f06; --nav-border:#40331e; --nav-hover:#2a2210; --accent-glow:rgba(255,138,60,.6);
  --led-on:#ff7a1a; --led-off:#3a1c05; --led-glow:rgba(255,122,26,0.8);
  --amber-on:#ffb066; --amber-glow:rgba(255,138,42,.75);
  --panel-1:#16130f; --panel-2:#0a0806; --panel-border:#3a2c1c;
  --amber:#ff8a2a; --amber-off:#3a1c05; --green:#3be35b; --green-off:#0c2a17; --green-glow:rgba(59,227,91,.7);
  --led-amber:#ff8a2a; --led-amber-off:#3a1c05;
}
:root[data-theme="kermit"]{
  --bg:#0a160d; --page:#0a160d; --card:#122417; --card2:#162c1b; --border:#264d30;
  --accent:#48c777; --accent-d:#c7a24a; --ink:#e8ece4; --muted:#8ea88f;
  --banner:#2f7a4a;
  --nav-bg:#081108; --nav-border:#20402b; --nav-hover:#152c1b; --accent-glow:rgba(72,199,119,.55);
  --led-on:#2fd06a; --led-off:#0c2a17; --led-glow:rgba(47,208,106,0.75);
  --amber-on:#c7a24a; --amber-glow:rgba(72,199,119,.75);
  --panel-1:#101a12; --panel-2:#070f09; --panel-border:#20402b;
  --amber:#48c777; --amber-off:#0c2a17; --green:#3be35b; --green-off:#0c2a17; --green-glow:rgba(59,227,91,.7);
  --led-amber:#48c777; --led-amber-off:#0c2a17;
}
:root[data-theme="darkside"]{
  --bg:#0b0b0c; --page:#0b0b0c; --card:#18181a; --card2:#1d1d20; --border:#333336;
  --accent:#f2c230; --accent-d:#c99e22; --ink:#ececed; --muted:#9b9ba1;
  --banner:#8a7020;
  --nav-bg:#101011; --nav-border:#2c2c30; --nav-hover:#202023; --accent-glow:rgba(242,194,48,.55);
  --led-on:#ffd23a; --led-off:#2e2508; --led-glow:rgba(255,210,58,0.8);
  --amber-on:#f2c230; --amber-glow:rgba(242,194,48,.75);
  --panel-1:#151517; --panel-2:#060607; --panel-border:#2a2a2e;
  --amber:#f2c230; --amber-off:#2e2508; --green:#3be35b; --green-off:#0c2a17; --green-glow:rgba(59,227,91,.7);
  --led-amber:#f2c230; --led-amber-off:#2e2508;
}