/* ==========================================================================
   Draco Staff Development — v8 Design Tokens
   The single source of visual truth. Every color, size, and shadow used
   anywhere in the platform is defined here. Do not hard-code values in
   component CSS — reference these variables.
   See docs/DESIGN-STANDARDS.md for usage rules.
   ========================================================================== */

:root {
  /* Light is the default corporate look, so say so. The dark blocks below override this. Declaring
     it explicitly matters for the INVERSE case: an OS set to dark while the reader has chosen the
     Light theme — without this, the browser would paint native controls dark on our light surfaces. */
  color-scheme: light;

  /* ---- Brand palette (carries the v1–v7 Draco DNA, refined) ------------- */
  --brand-navy:        #1e3a5f; /* primary — headers, primary buttons        */
  --brand-navy-700:    #24466e; /* hover / lighter navy                       */
  --brand-navy-800:    #16304f; /* pressed                                    */
  --brand-navy-900:    #112741; /* deep surfaces                             */
  --brand-navy-950:    #0b1b2e; /* footer, darkest surface                    */
  --brand-slate:       #2c3e50; /* secondary dark                            */

  --brand-sky:         #5b9bd5; /* accent — links, highlights, active         */
  --brand-sky-bright:  #7db4e6; /* accent on dark backgrounds                 */
  --brand-blue:        #4a7fb8; /* mid blue                                   */
  --brand-teal:        #0e7490; /* info / secondary accent                    */
  --brand-gold:        #c7a252; /* warm accent — used sparingly (indicators)  */
  --brand-gold-soft:   #e4cf9a;

  /* ---- Accent (the ONE semantic accent every surface references) -------
     Aliased to the ACTIVE PALETTE's accent (themes.css redefines --brand-sky per
     palette on the same :root element, so this resolves per palette). Until now
     this token did not exist, so 28 usages across cron/compliance/calendar/…
     silently fell back to a fixed blue and no palette change reached them. Now a
     palette change re-colours every element written against --accent. */
  /* Accent VIVIDNESS — a saturation multiplier set by the Appearance "Accent vividness" slider
     (0.4–1.6; 1 = the chosen colour untouched). */
  --accent-sat:  1;
  /* Raw accent FIRST (a valid fallback where CSS relative colour is unsupported), THEN the
     saturation-adjusted accent — unsupported browsers keep the raw value, so it never breaks. */
  --accent:      var(--brand-sky);
  --accent:      hsl(from var(--brand-sky) h calc(s * var(--accent-sat)) l);
  --accent-2:    var(--brand-sky-bright);
  --accent-ink:  var(--brand-navy);   /* readable text/icon on an accent-tinted chip */
  /* A DARKER shade of the exact accent (mixed toward black, NOT white) — the far end of the themed
     gradient bands, so a band runs "selected colour → darker" and never toward pink. */
  --accent-deep: color-mix(in srgb, var(--accent) 68%, #000);
  /* ICON accent — the colour of accent-tinted icons + the active nav highlight. Independent of the
     accent (the theme studio can set it), and BRIGHTER than --accent on dark by default so a dark
     accent (e.g. a deep red) stays legible as a small foreground glyph. Overridden in the dark block. */
  --icon-accent: var(--icon-color-user, var(--accent));
  /* HOVER colour for nav/menu icons. Defaults to --brand-blue (which itself tracks a custom accent),
     and the studio can set it outright — mode-aware through --brand-blue, so one definition suffices. */
  --icon-accent-hover: var(--icon-hover-user, var(--brand-blue));

  /* SECTION-TITLE BAND — its own base colour (independent of the accent; the studio can set it) and
     STRENGTH (0.5–1, set by the "Section title strength" slider; mixes toward the surface, lower =
     softer). ONE reusable gradient token, so every section header (form-sec__h, panel__head,
     settings-card__head, table thead) stays uniform and responds to the slider platform-wide. */
  --band-base:  var(--band-color-user, var(--accent));
  /* The band paints from a DEEPENED accent, not the raw hue. Many palette accents (amber, sky, forest,
     the monochromes…) are too light for the band's WHITE heading + subtext — white-on-raw-accent runs
     ~2.1–3.7:1. Mixing ~38–55% toward black lifts white to WCAG AA (≥4.5:1) on ALL 24 palettes while
     keeping the accent's hue, so the bands read as rich/deep rather than washed. Measured, not guessed
     (tools + tmp/palaudit.js). band-fill = light stop, band-deep = dark stop; both blend toward the
     surface by --sect-band-alpha (the "Section title strength" slider). */
  --band-fill:  color-mix(in srgb, var(--band-base) 62%, #000);
  --band-deep:  color-mix(in srgb, var(--band-base) 45%, #000);
  --sect-band-alpha: 1;
  --sect-band: linear-gradient(135deg,
     color-mix(in srgb, var(--band-fill) calc(var(--sect-band-alpha) * 100%), var(--surface)) 0%,
     color-mix(in srgb, var(--band-deep) calc(var(--sect-band-alpha) * 100%), var(--surface)) 100%);

  /* ---- Neutral scale (slate) ------------------------------------------- */
  --white:  #ffffff;
  --n-50:   #f8fafc;
  --n-100:  #f1f5f9;
  --n-200:  #e2e8f0;
  --n-300:  #cbd5e1;
  --n-400:  #94a3b8;
  --n-500:  #64748b;
  --n-600:  #475569;
  --n-700:  #334155;
  --n-800:  #1e293b;
  --n-900:  #0f172a;
  --n-950:  #0b1220;

  /* ---- Semantic status ------------------------------------------------- */
  --success:      #15803d;  --success-bg: #dcfce7;  --success-border: #86efac;
  --warning:      #b45309;  --warning-bg: #f1f5f9;  --warning-border: #fcd34d;
  --danger:       #b91c1c;  --danger-bg:  #fee2e2;  --danger-border:  #fca5a5;
  --info:         #0e7490;  --info-bg:    #cffafe;  --info-border:    #67e8f9;

  /* ---- Semantic surface / text (LIGHT theme — default) ----------------- */
  /* Surfaces carry a WHISPER of the active palette's brand so a theme change is felt across the whole
     canvas — not only on links and buttons (the "everything is warm grey regardless of theme" fix).
     --brand-navy is redefined per palette on this same :root, so each theme tints its own surfaces;
     cards stay pure white so they pop against the tinted background. Dark palettes set their own
     surfaces in themes.css and override these. */
  --bg:            color-mix(in srgb, var(--brand-navy) 6%, #eef2f7);   /* app background        */
  --surface:       #ffffff;                                            /* cards, panels — crisp */
  --surface-2:     color-mix(in srgb, var(--brand-navy) 4%, #f8fafc);  /* subtle raised/striped */
  --surface-3:     color-mix(in srgb, var(--brand-navy) 5%, #f1f5f9);  /* inset                 */
  --border:        color-mix(in srgb, var(--brand-navy) 8%, #e2e8f0);
  --border-strong: color-mix(in srgb, var(--brand-navy) 12%, #cbd5e1);
  /* Form container tint — a hair off --surface so white input wells pop (the
     global form standard, see DESIGN-STANDARDS §7). Token-based, so it re-tints
     per theme automatically: darker than the field in light, lighter (raised)
     in dark — the correct elevation direction in both. Defined once; do NOT
     hard-code #fff on fields, or the dark inversion breaks. */
  --form-surface:  color-mix(in srgb, var(--border) 24%, var(--surface));

  --text:          #16233a;  /* primary text                              */
  --text-2:        #475569;  /* secondary text                            */
  --text-3:        var(--text-muted-user, #5b6b82);  /* muted / captions; studio-overridable */
  --text-invert:   #ffffff;
  --link:          #2d5a87;
  --link-hover:    #1e3a5f;

  --header-bg:     #1e3a5f;  /* standardized header                       */
  --header-text:   #ffffff;
  --footer-bg:     #0b1b2e;  /* corporate footer                          */
  --footer-text:   #c7d3e2;
  --app-footer-bg: color-mix(in srgb, var(--brand-navy) 9%, #e6ebf2);  /* dashboard footer — a touch darker than bg, palette-tinted */

  --ring:          rgba(91, 155, 213, 0.55); /* focus ring                 */
  --overlay:       rgba(11, 27, 46, 0.55);   /* modal / drawer scrim       */
  --watermark-opacity: 0.035;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-brand: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-hero: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --fw-regular:  400;

  /* ONE height for every control that can share a toolbar row — search input, select,
     button, checkbox pill. Introduced 8.196.0: there was no such token, and base .input has
     only padding and no height, so every toolbar had to override it and they drifted to
     36/38/40px side by side. */
  --control-h:   38px;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.08em;
  --tracking-brand:  0.14em;  /* the DRACO wordmark                        */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ---- Shadows (soft, layered — corporate, not harsh) ------------------ */
  --shadow-xs:  0 1px 2px rgba(16, 33, 58, 0.06);
  --shadow-sm:  0 1px 3px rgba(16, 33, 58, 0.08), 0 1px 2px rgba(16, 33, 58, 0.06);
  --shadow-md:  0 4px 12px rgba(16, 33, 58, 0.08), 0 2px 4px rgba(16, 33, 58, 0.05);
  --shadow-lg:  0 12px 28px rgba(16, 33, 58, 0.12), 0 4px 10px rgba(16, 33, 58, 0.06);
  --shadow-xl:  0 24px 48px rgba(16, 33, 58, 0.16), 0 8px 16px rgba(16, 33, 58, 0.08);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* ---- Layout metrics -------------------------------------------------- */
  --header-h:        68px;   /* desktop/tablet header height               */
  --header-h-mobile: 58px;
  --sidebar-w:       268px;  /* expanded desktop sidebar                   */
  --sidebar-w-rail:  76px;   /* collapsed icon rail                        */
  --bottomnav-h:     64px;   /* mobile bottom tab bar                      */
  --content-max:     1280px; /* marketing/public content width (landing only)*/
  --reading-max:     72ch;

  /* ---- Motion ---------------------------------------------------------- */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

  --z-header:   1000;
  --z-sidebar:  900;
  --z-drawer:   1100;
  --z-overlay:  1090;
  --z-dropdown: 1200;
  --z-toast:    1300;
  --z-modal:    1400;
}

/* ============================ DARK THEME =================================
   Applied via [data-theme="dark"] on <html>. The Settings page toggles this.
   ======================================================================== */
:root[data-theme="dark"] {
  /* TELL THE BROWSER WHICH SCHEME IT IS PAINTING. Without this the browser draws every NATIVE
     control in its light styling regardless of our tokens — so the date field's calendar button
     rendered near-black on a dark input and effectively disappeared, and the same applied to
     scrollbars, dropdown arrows and autofill. Our own CSS cannot reach inside those controls;
     this property is the only thing that does. 58 date/time inputs were affected. */
  color-scheme: dark;
  /* --accent stays the RAW chosen accent (--brand-sky) in dark too — do NOT alias it to
     --brand-sky-bright, which mixes the colour toward WHITE and turned a red accent pink. */
  /* But ICONS/nav ARE foreground glyphs on a dark surface, so they use the brighter accent to stay
     legible (owner: the dark red works for band backgrounds but not for icons/menu highlight). */
  --icon-accent:   var(--icon-color-user, var(--accent-2));
  --bg:            #0b1220;
  --surface:       #131c2e;
  --surface-2:     #172236;
  --surface-3:     #1e2b42;
  --border:        #26344c;
  --border-strong: #34455f;

  --text:          #e6edf6;
  --text-2:        #aebacb;
  --text-3:        var(--text-muted-user, #8494ab);
  --link:          #7db4e6;
  --link-hover:    #a9cef0;

  --header-bg:     #0d1a2c;
  --header-text:   #eaf1fa;
  --footer-bg:     #070f1a;
  --footer-text:   #9fb0c4;
  --app-footer-bg: #0e1728;

  --ring:          rgba(125, 180, 230, 0.55);
  --overlay:       rgba(3, 8, 15, 0.66);
  --watermark-opacity: 0.05;

  /* Status foregrounds lightened so they clear contrast on dark tinted bgs */
  --success: #4ade80; --warning: #fbbf24; --danger: #ff5c5c; --info: #38bdf8;
  --success-bg: #10331f; --warning-bg: #1e2a3d; --danger-bg: #3a1414; --info-bg: #0a2c33;
  --success-border: #14532d; --warning-border: #713f12; --danger-border: #7f1d1d; --info-border: #155e75;

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.55);
}

/* Respect OS preference when the user has not chosen explicitly.
   Full mirror of the dark set so the auto path never half-applies. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;   /* same reason as the explicit dark block — native controls need telling */
    --bg: #0b1220; --surface: #131c2e; --surface-2: #172236; --surface-3: #1e2b42;
    --border: #26344c; --border-strong: #34455f;
    --text: #e6edf6; --text-2: #aebacb; --text-3: var(--text-muted-user, #8494ab);
    --link: #7db4e6; --link-hover: #a9cef0;
    --header-bg: #0d1a2c; --header-text: #eaf1fa; --footer-bg: #070f1a; --footer-text: #9fb0c4;
    --app-footer-bg: #0e1728;
    --ring: rgba(125, 180, 230, 0.55); --overlay: rgba(3, 8, 15, 0.66); --watermark-opacity: 0.05;
    --success: #4ade80; --warning: #fbbf24; --danger: #ff5c5c; --info: #38bdf8;
    --success-bg: #10331f; --warning-bg: #1e2a3d; --danger-bg: #3a1414; --info-bg: #0a2c33;
    --success-border: #14532d; --warning-border: #713f12; --danger-border: #7f1d1d; --info-border: #155e75;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 28px rgba(0,0,0,0.5); --shadow-xl: 0 24px 48px rgba(0,0,0,0.55);
  }
}