/* ============================================================================
   dashboard-system.css — the --ds-* design-system TOKEN CONTRACT (base).
   Mirrors the mediuswatcher.com design system. Every portal page can reference
   these tokens; per-vertical values are supplied by verticals.theme_json (see
   dashboard.php), which overrides the :root defaults below.

   Defaults here reproduce the current marketscore/ShadeWatcher look, so if a
   vertical has no theme_json (or injection fails) the portal renders as before.
   A vertical's theme_json then re-skins the whole shell from one JSON blob.
   ============================================================================ */
:root {
  /* Fonts */
  --ds-font-display: 'DM Serif Display', Georgia, serif;
  --ds-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ds-font-hand: 'Homemade Apple', cursive;

  /* Palette (surface + accent) */
  --ds-wispy-air: #F7F9FC;
  --ds-fresh-mint: #EDF2FF;
  --ds-mint-wash: #F1F5FB;
  --ds-rule: #D5DEEA;
  --ds-rule-soft: #E8EDF4;
  --ds-fluoride: #00B894;
  --ds-fluoride-deep: #00D4AA;
  --ds-fluoride-pale: #D7F5EE;

  /* Text (ozone) */
  --ds-ozone: #0B1628;
  --ds-ozone-soft: #4A5568;
  --ds-ozone-muted: #8896AB;
  --ds-ozone-dark: #0B1628;

  /* Status semantics */
  --ds-good: #10b981;
  --ds-good-bg: rgba(16,185,129,0.12);
  --ds-good-border: rgba(16,185,129,0.35);
  --ds-warn: #B45309;
  --ds-warn-bg: rgba(245,158,11,0.12);
  --ds-warn-border: rgba(245,158,11,0.35);
  --ds-critical: #B91C1C;
  --ds-critical-bg: rgba(239,68,68,0.10);
  --ds-critical-border: rgba(239,68,68,0.35);

  /* Radii */
  --ds-radius-sm: 8px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 22px;
  --ds-radius-pill: 999px;

  /* Shadows */
  --ds-shadow-sm: 0 2px 8px rgba(11,22,40,0.06);
  --ds-shadow-md: 0 8px 32px rgba(11,22,40,0.10);
  --ds-shadow-lg: 0 20px 60px rgba(11,22,40,0.12);

  /* ── Chrome surfaces (bg/ink travel as PAIRS, so a vertical can go light OR dark
        from one theme_json blob). Defaults are a LIGHT editorial shell — the look
        both dental (white sidebar) and window_treatment (cream sidebar) reference.
        Each references an existing --ds-* token, so per-vertical values flow through
        automatically; a vertical only overrides what actually differs. */
  --ds-nav-bg:            var(--ds-wispy-air);
  --ds-nav-ink:           var(--ds-ozone);
  --ds-nav-chip-bg:       var(--ds-mint-wash);
  --ds-nav-line:          var(--ds-rule);
  --ds-sidebar-bg:        #FFFFFF;
  --ds-sidebar-ink:       var(--ds-ozone);
  --ds-sidebar-item:      var(--ds-ozone-soft);
  --ds-sidebar-muted:     var(--ds-ozone-muted);
  --ds-sidebar-hover-bg:  var(--ds-mint-wash);
  --ds-sidebar-active-bg: var(--ds-fluoride-pale);
  --ds-sidebar-line:      var(--ds-rule);
  --ds-surface:           #FFFFFF;
  --ds-surface-ink:       var(--ds-ozone);
  --ds-card-grad-1:       var(--ds-mint-wash);   /* ov-hero gradient stop 1 */
  --ds-card-grad-2:       var(--ds-fresh-mint);  /* ov-hero gradient stop 2 */

  /* ── Accent (links, pills, primary actions). Default = ink (dental link style);
        window_treatment overrides --ds-accent to clay via theme_json. ── */
  --ds-accent:      var(--ds-ozone);
  --ds-accent-ink:  #FFFFFF;
  --ds-accent-hover: var(--ds-ozone-soft);
  --ds-accent-tint: var(--ds-mint-wash);

  /* ── Categorical chart palette (FIXED — theme-neutral, the same across every vertical
        so multi-series charts stay distinct and readable). Chrome around charts still
        themes per vertical; only the data-series colors come from here. */
  --ds-chart-1: #4E79A7;  /* blue   */
  --ds-chart-2: #F28E2B;  /* orange */
  --ds-chart-3: #59A14F;  /* green  */
  --ds-chart-4: #E15759;  /* red    */
  --ds-chart-5: #B07AA1;  /* purple */
  --ds-chart-6: #76B7B2;  /* teal   */
  --ds-chart-7: #EDC948;  /* yellow */
  --ds-chart-8: #9C755F;  /* brown  */

  /* ── Legacy token aliases → --ds-* ──────────────────────────────────────────
     Page CSS (e.g. review-sentiment.php "First Light" panels) references these
     older per-vertical names. Aliasing them to --ds-* keeps those pages working
     AND makes them vertical-aware — they now follow each vertical's theme_json.
     (These names used to come straight from theme_json before the --ds-* contract.) */
  --loden: var(--ds-fluoride-deep);   /* positive / praise accent */
  --clay: var(--ds-critical);         /* negative / complaint accent */
  --clay-deep: var(--ds-critical);
  --brass: var(--ds-warn);
  --ink: var(--ds-ozone);
  --ink-soft: var(--ds-ozone-soft);
  --muted: var(--ds-ozone-muted);
  --paper: var(--ds-wispy-air);
  --card: var(--ds-mint-wash);
  --line: var(--ds-rule);
  --line-soft: var(--ds-rule-soft);
}