/* mySERV.IS Design System — CSS tokens */
/* Production palette: primary #357aff, accent #f78929 */

/* ──────────────────────────────────────────────────────────────────────────
   1. CANONICAL TOKENS — light theme
   Anything a view needs should exist here. Values below are the originals,
   unchanged; only additions were made (marked "added").
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --primary-bg:         #1f2937;
  --primary-accent:     #526279;
  --text-accent:        #f78929;
  --primary-color:      #357aff;
  --primary-color-dark: #1a5fd4;
  --primary-color-light:#eef3ff;
  --secondary-color:    #ffd7bb;
  /* Text/icon colour on a --primary-color fill. Dark theme lifts the fill for
     legibility against a dark ground, which leaves white text at only 3:1 — so
     dark flips this to ink instead (6.4:1). */
  --on-primary:         #ffffff;
  --accent-color:       #e7973c;  /* added — distinct from --text-accent; used by dashboard/help */

  /* Semantic */
  --success:       #10b981;
  --success-light: #ecfdf5;
  --danger:        #ef4444;
  --danger-light:  #fef2f2;
  --warning:       #f59e0b;
  --warning-light: #fffbeb;
  --purple:        #8b5cf6;
  --teal:          #14b8a6;
  --pink:          #ec4899;

  /* Status tints — the pale panel + dark label pairing used all over training and diary.
     Both halves have to flip together: on a dark ground a pale tint stays bright and its
     dark label becomes unreadable, which is exactly what made those views unusable. */
  --tint-success:    #f0fdf4;
  --on-tint-success: #166534;
  --tint-danger:     #fef2f2;
  --on-tint-danger:  #991b1b;
  --tint-warning:    #fffbeb;
  --on-tint-warning: #92400e;
  --tint-info:       #eff6ff;
  --on-tint-info:    #1e40af;

  /* Navigation section accents. Same two-part shape as the tints above and for the
     same reason: the hue paints the chip, the "on-" value is what's legible ON it.
     Using one value for both put the teal and orange icons at 1.8:1 on their own
     wash in light mode — a mid-tone hue is not readable against a pale tint of
     itself. Sections come from config/navigation.js. */
  --nav-core:            #357aff;
  --nav-tools:           #8b5cf6;
  --nav-places:          #14b8a6;
  --nav-integrations:    #f78929;
  --nav-account:         #526279;
  --nav-admin:           #ec4899;
  --on-nav-core:         #1d4ed8;
  --on-nav-tools:        #6d28d9;
  --on-nav-places:       #0f766e;
  --on-nav-integrations: #b45309;
  --on-nav-account:      #3f4c5f;
  --on-nav-admin:        #be185d;
}

/* The section → colour mapping, declared once. Any element carrying
   data-nav-section picks up the pair: a sidebar group, a drawer group, or a single
   shortcut tile that needs the hue of the section it came from rather than the
   hue of the group it is sitting in. */
[data-nav-section]                    { --nav-accent: var(--nav-core);         --nav-ink: var(--on-nav-core); }
[data-nav-section="tools"]            { --nav-accent: var(--nav-tools);        --nav-ink: var(--on-nav-tools); }
[data-nav-section="places"]           { --nav-accent: var(--nav-places);       --nav-ink: var(--on-nav-places); }
[data-nav-section="integrations"]     { --nav-accent: var(--nav-integrations); --nav-ink: var(--on-nav-integrations); }
[data-nav-section="account"]          { --nav-accent: var(--nav-account);      --nav-ink: var(--on-nav-account); }
[data-nav-section="admin"]            { --nav-accent: var(--nav-admin);        --nav-ink: var(--on-nav-admin); }

:root {

  /* Neutrals */
  --bg:            #f8f9fa;
  --card-bg:       #ffffff;
  --border:        #e2e8f0;
  --border-hover:  #cbd5e0;
  --text:          #1f2937;
  --muted:         #718096;
  --faint:         #a0aec0;
  --overlay:       rgba(255,255,255,0.95);  /* added */

  /* Shape */
  --radius:        16px;
  --radius-sm:     10px;
  --radius-xs:     6px;
  --radius-lg:     24px;   /* added */
  --radius-pill:   999px;  /* added */

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:     0 10px 25px rgba(0,0,0,0.10);
  --shadow-xl:     0 20px 40px rgba(0,0,0,0.12);  /* added */

  /* Typography */
  --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:       0.70rem;
  --text-sm:       0.80rem;
  --text-base:     0.875rem;
  --text-md:       1rem;
  --text-lg:       1.125rem;
  --text-xl:       1.25rem;
  --text-2xl:      1.5rem;
  --text-3xl:      1.875rem;  /* added */
  --text-4xl:      2.25rem;   /* added */
  --fw-normal:     400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-heavy:      800;
  --lh-tight:      1.2;
  --lh-base:       1.5;
  --lh-loose:      1.75;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;  /* added */
  --space-16: 64px;  /* added */

  /* Z-index. These were aspirational — the app had grown its own bands that the scale
     didn't describe, so the values below now match what pages actually use:
     page-level controls (Leaflet's own controls, map toolbars, tab bars) sit at 1000–1200,
     page modals at 2000–3000, toasts at 9999. --z-topbar has to clear the control band,
     or map UI paints over the top bar and its dropdown. */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-page-ui:  1000;  /* Leaflet default control layer; page chrome shares it */
  --z-topbar:   1500;  /* app chrome: top bar + bottom nav — above page UI, below modals */
  --z-modal:    2000;
  --z-toast:    9999;

  /* Layout */
  --bottom-nav-h: 60px;

  /* App chrome — moved here from top-bar.css, which declared its own :root
     block after this file and so silently overrode the palette. */
  --top-bar-h:       calc(60px + env(safe-area-inset-top, 0px));
  --top-bar-bg:      #111827;                 /* solid — html/overscroll ground */
  --top-bar-surface: rgba(17, 24, 39, 0.92);  /* translucent — the bar itself, backdrop-filter */
  /* Floating panels that sit ON a map (filter sheets, zoom controls, basemap toggle, stat
     strips). Deliberately translucent so the map reads through, so these can't use the opaque
     --card-bg — they need a themed translucent surface of their own. */
  --panel-surface:   rgba(255, 255, 255, 0.95);
  --primary-text:    #ffffff;
  --hover-text:      #d1d5db;
  --button-bg:       #dc2626;
  --button-hover-bg: #b91c1c;
  --logo-bg:         #f3f4f6;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. LEGACY ALIASES
   The views grew four names for a border, three for a radius and two type
   scales. Rather than rename ~614 usages across 40 templates, every legacy
   name resolves to its canonical token here.

   These are declared once and NOT repeated per theme: because each is a
   var() reference resolved against the same element, redefining the
   canonical token in section 3 carries the alias with it automatically.

   A view that still declares one of these in its own <style> wins over this
   block (same specificity, later in source order) — so nothing breaks, but
   that view also won't follow the theme until its local copy is removed.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces & lines */
  --line:                 var(--border);
  --border-color:         var(--border);
  --border-subtle:        var(--border);
  --panel:                var(--card-bg);
  --card:                 var(--card-bg);
  --card-background:      var(--card-bg);
  --background-primary:   var(--card-bg);
  --background-color:     var(--bg);
  --background-secondary: var(--bg);
  --background-overlay:   var(--overlay);

  /* Text */
  --ink:                  var(--text);
  --text-color:           var(--text);
  --text-primary:         var(--text);
  --text-secondary:       var(--muted);
  --text-muted:           var(--muted);
  --muted-text:           var(--muted);

  /* Brand */
  --brand:                var(--primary-color);
  --primary:              var(--primary-color);
  --accent:               var(--text-accent);

  /* Semantic */
  --success-color:        var(--success);
  --danger-color:         var(--danger);
  --warning-color:        var(--warning);

  /* pro-required.ejs uses these with hardcoded fallbacks, so it renders either
     way — mapping them here is what lets that page follow the theme. */
  --color-accent:         var(--warning);
  --color-text-secondary: var(--muted);

  /* Shape */
  --border-radius:        var(--radius);
  --border-radius-sm:     var(--radius-sm);
  --border-radius-lg:     var(--radius-lg);

  /* Shadow */
  --shadow:               var(--shadow-md);

  /* Typography */
  --font-family:          var(--font);
  --font-size-xs:         var(--text-xs);
  --font-size-sm:         var(--text-sm);
  --font-size-base:       var(--text-md);
  --font-size-lg:         var(--text-lg);
  --font-size-xl:         var(--text-xl);
  --font-size-2xl:        var(--text-2xl);
  --font-size-3xl:        var(--text-3xl);
  --font-size-4xl:        var(--text-4xl);

  /* Spacing */
  --spacing-xs:           var(--space-1);
  --spacing-sm:           var(--space-2);
  --spacing-md:           var(--space-4);
  --spacing-lg:           var(--space-6);
  --spacing-xl:           var(--space-8);
  --spacing-2xl:          var(--space-12);
  --spacing-3xl:          var(--space-16);
}

/* ──────────────────────────────────────────────────────────────────────────
   3. DARK THEME
   Opt-in only, via <html data-theme="dark">. Deliberately NOT wired to
   prefers-color-scheme yet: most views still carry hardcoded hex values that
   cannot follow a theme, so honouring the OS preference today would give
   every dark-mode user a half-dark app. Wire it up once view coverage lands.

   Only canonical tokens are redefined — section 2 follows automatically.
   ────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* Brand — lifted for contrast against a dark ground */
  --primary-bg:         #111827;
  /* Lifted from #6b7a94, which measured 3.76:1 on --bg — under AA, and it carries
     the page kicker on every view now that view-header is universal. */
  --primary-accent:     #93a1b8;
  --text-accent:        #f9a04f;
  --primary-color:      #5b92ff;
  --primary-color-dark: #357aff;
  --primary-color-light:rgba(91,146,255,0.16);
  --secondary-color:    #4a3a2a;
  --on-primary:         #0d1117;
  --accent-color:       #eda85c;

  /* Semantic */
  --success:       #34d399;
  --success-light: rgba(52,211,153,0.15);
  --danger:        #f87171;
  --danger-light:  rgba(248,113,113,0.15);
  --warning:       #fbbf24;
  --warning-light: rgba(251,191,36,0.15);
  --purple:        #a78bfa;
  --teal:          #2dd4bf;
  --pink:          #f472b6;

  /* Tints become a low-alpha wash of their own hue; labels lift to the pale end of it. */
  --tint-success:    rgba(52,211,153,0.14);
  --on-tint-success: #86efac;
  --tint-danger:     rgba(248,113,113,0.14);
  --on-tint-danger:  #fca5a5;
  --tint-warning:    rgba(251,191,36,0.14);
  --on-tint-warning: #fcd34d;
  --tint-info:       rgba(96,152,255,0.14);
  --on-tint-info:    #93c5fd;

  /* Nav accents: the hues lift for a dark ground, and the "on-" values go to the
     pale end of each hue rather than the deep end. */
  --nav-core:            #5b92ff;
  --nav-tools:           #a78bfa;
  --nav-places:          #2dd4bf;
  --nav-integrations:    #f9a04f;
  --nav-account:         #8b9ab3;
  --nav-admin:           #f472b6;
  --on-nav-core:         #bfdbfe;
  --on-nav-tools:        #ddd6fe;
  --on-nav-places:       #99f6e4;
  --on-nav-integrations: #fed7aa;
  --on-nav-account:      #dbe2ec;
  --on-nav-admin:        #fbcfe8;

  /* Neutrals — grounded in the palette help.ejs already ships */
  --bg:            #1a202c;
  --card-bg:       #2d3748;
  --border:        #4a5568;
  --border-hover:  #718096;
  --text:          #f7fafc;
  --muted:         #a0aec0;
  /* Lifted from #718096: on --card-bg that measured 2.99:1, i.e. the app's least
     prominent text was the one piece of it that couldn't be read. 4.58:1 clears AA. */
  --faint:         #94a1b5;
  --overlay:       rgba(45,55,72,0.95);

  /* Shadows carry further on dark grounds */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg:     0 10px 25px rgba(0,0,0,0.55);
  --shadow-xl:     0 20px 40px rgba(0,0,0,0.60);

  /* App chrome. Note --logo-bg is deliberately NOT overridden here: the top bar
     is dark in both themes, so the logo chip is not a themed surface. Darkening
     it just sank the mascot into the bar. */
  --top-bar-bg:      #0d1117;
  --top-bar-surface: rgba(13, 17, 23, 0.94);
  --panel-surface:   rgba(45, 55, 72, 0.94);   /* --card-bg at the same translucency */
  --hover-text:      #e2e8f0;
  --button-bg:       #ef4444;
  --button-hover-bg: #dc2626;
}

/* Explicit light, so the toggle can override a future prefers-color-scheme
   default in both directions rather than only turning dark on. */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}