/**
 * DASH Design Tokens (production copy)
 * Canonical source: Design Elements/design/tokens.css
 *
 * Keep this file in sync with the canonical design tokens.
 * Run: .\scripts\sync-dash-design-mirror.ps1
 *
 * Usage (CSS):     @import './tokens.css';
 * Usage (.NET):    <link rel="stylesheet" href="css/dash/tokens.css" />
 */
:root {

  /* ── Brand colours ──────────────────────────────────────────── */
  --color-brand-blue:        #1078be;
  --color-brand-blue-dark:   #0c62a0;
  --color-brand-green:       #27b577;
  --color-brand-teal:        #5cc3dd;
  --color-brand-purple:      #6b4b9e;

  /* ── Sidebar ────────────────────────────────────────────────── */
  /* Note: sidebar gradient is hardcoded — never changes with theme */
  --sidebar-gradient:        linear-gradient(135deg, #6b4b9e 0%, #12b7d6 100%);
  --color-sidebar-text:      rgba(255, 255, 255, 0.80);
  --color-sidebar-text-active: #1078be;
  --color-sidebar-hover:     rgba(255, 255, 255, 0.10);
  --color-sidebar-active:    #ffffff;

  /* ── Page surface (light mode) ──────────────────────────────── */
  --color-page-bg:           #f3f7fb;
  --color-card-bg:           #ffffff;
  --color-card-border:       rgba(16, 120, 190, 0.10);

  /* ── Shell canvas (body background gradients) ───────────────── */
  /* Kept separate from --color-page-bg so products can opt in/out. */
  --dash-shell-background-base: #ddeef8;
  --dash-shell-background:
    radial-gradient(ellipse 65% 60% at  0% 50%, rgba(18, 183, 214, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 100%  5%, rgba(147, 112, 210, 0.50) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at  90% 95%, rgba(147, 112, 210, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at  50% 50%, rgba(180, 220, 240, 0.30) 0%, transparent 70%),
    var(--dash-shell-background-base);

  /* ── Text (light mode) ──────────────────────────────────────── */
  /* Slate navy (not near-black) — keeps hierarchy above secondary/muted */
  --color-text-primary:      #2f546a;
  --color-text-secondary:    #4a7a95;
  --color-text-muted:        #587f9b; /* 4.6:1 on white — WCAG AA at small sizes */

  /* ── Semantic colours ───────────────────────────────────────── */
  --color-positive:          #27b577;
  --color-negative:          #e05252;
  --color-warning:           #b07c10;

  /* ── Interactive surfaces ───────────────────────────────────── */
  --color-hover-bg:          rgba(16, 120, 190, 0.05);

  /* ── Topbar & subnav (light mode) ───────────────────────────── */
  --topbar-bg:               rgba(243, 247, 251, 0.92);
  --subnav-bg:               rgba(243, 247, 251, 0.92);
  --topbar-separator:        rgba(16, 120, 190, 0.25);
  --topbar-pill-bg:          #ffffff;
  --topbar-pill-border:      rgba(16, 120, 190, 0.35);
  --topbar-pill-color:       #1078be;
  --topbar-control-bg:       #ffffff;
  --topbar-control-border:   rgba(16, 120, 190, 0.35);
  --topbar-control-color:    #1078be;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-title:              'Montserrat', sans-serif;
  --font-body:               'Lato', sans-serif;

  /* ── Spacing scale (4pt base) ───────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --sidebar-width:           220px;
  --sidebar-collapsed-width: 56px;
  --topbar-height:           56px;

  /* ── Product extension tokens (documented, optional) ────────── */
  /* Ascent currently scales rem density via ascent-shell.css. */
  --ascent-ui-scale:         1;

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-btn:   8px;
  --radius-card:  18px;
  --radius-pill:  999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-card:   0 4px 24px rgba(16, 120, 190, 0.07), 0 1px 4px rgba(16, 120, 190, 0.04);
  --shadow-btn:    0 2px 6px rgba(16, 120, 190, 0.25);
  --shadow-btn-hover: 0 3px 10px rgba(16, 120, 190, 0.35);

  /* ── Transitions ────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-medium: 0.20s ease;

  /* ── Scrollbars (vertical + horizontal) ─────────────────────── */
  --scrollbar-size:              10px;
  --scrollbar-thumb:             rgba(71, 85, 105, 0.42);
  --scrollbar-thumb-hover:     rgba(71, 85, 105, 0.50);
  --scrollbar-thumb-active:    rgba(71, 85, 105, 0.64);
  --scrollbar-track:           transparent;

  /* Sidebar nav on gradient — narrower, light thumb */
  --scrollbar-sidebar-size:          6px;
  --scrollbar-sidebar-thumb:         rgba(255, 255, 255, 0.28);
  --scrollbar-sidebar-thumb-hover:   rgba(255, 255, 255, 0.38);
  --scrollbar-sidebar-thumb-active:  rgba(255, 255, 255, 0.48);
}


/* ── Dark mode overrides ────────────────────────────────────── */
[data-theme="dark"] {
  --color-page-bg:           #0b1f30;
  --color-card-bg:           #0f2a3f;
  --color-card-border:       rgba(255, 255, 255, 0.07);

  --color-text-primary:      #e4f0f8;
  --color-text-secondary:    #7ab0cc;
  --color-text-muted:        #8fbdd4; /* lifted for AA contrast on dark card bg */

  --color-hover-bg:          rgba(255, 255, 255, 0.06);

  --topbar-bg:               rgba(8, 24, 41, 0.92);
  --subnav-bg:               rgba(8, 24, 41, 0.92);
  --topbar-separator:        rgba(255, 255, 255, 0.20);
  --topbar-pill-bg:          rgba(255, 255, 255, 0.08);
  --topbar-pill-border:      rgba(255, 255, 255, 0.15);
  --topbar-pill-color:       #e4f0f8;
  --topbar-control-bg:       rgba(255, 255, 255, 0.08);
  --topbar-control-border:   rgba(255, 255, 255, 0.15);
  --topbar-control-color:    #e4f0f8;

  --dash-shell-background-base: #0b1f30;
  --dash-shell-background:
    radial-gradient(ellipse 55% 45% at 60% 25%, rgba(16, 78, 120, 0.40) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 92%  8%, rgba(55, 25, 85, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 88% 90%, rgba(18, 72, 48, 0.40) 0%, transparent 65%),
    var(--dash-shell-background-base);

  --scrollbar-thumb:           rgba(143, 189, 212, 0.38);
  --scrollbar-thumb-hover:     rgba(143, 189, 212, 0.50);
  --scrollbar-thumb-active:    rgba(143, 189, 212, 0.62);
}

/* System preference — follow OS via media query (CSS fallback when data-theme-preference=system). */
@media (prefers-color-scheme: dark) {
  html[data-theme-preference="system"] {
    --color-page-bg:           #0b1f30;
    --color-card-bg:           #0f2a3f;
    --color-card-border:       rgba(255, 255, 255, 0.07);

    --color-text-primary:      #e4f0f8;
    --color-text-secondary:    #7ab0cc;
    --color-text-muted:        #8fbdd4;

    --color-hover-bg:          rgba(255, 255, 255, 0.06);

    --topbar-bg:               rgba(8, 24, 41, 0.92);
    --subnav-bg:               rgba(8, 24, 41, 0.92);
    --topbar-separator:        rgba(255, 255, 255, 0.20);
    --topbar-pill-bg:          rgba(255, 255, 255, 0.08);
    --topbar-pill-border:      rgba(255, 255, 255, 0.15);
    --topbar-pill-color:       #e4f0f8;
    --topbar-control-bg:       rgba(255, 255, 255, 0.08);
    --topbar-control-border:   rgba(255, 255, 255, 0.15);
    --topbar-control-color:    #e4f0f8;

    --dash-shell-background-base: #0b1f30;
    --dash-shell-background:
      radial-gradient(ellipse 55% 45% at 60% 25%, rgba(16, 78, 120, 0.40) 0%, transparent 70%),
      radial-gradient(ellipse 40% 35% at 92%  8%, rgba(55, 25, 85, 0.30) 0%, transparent 60%),
      radial-gradient(ellipse 45% 40% at 88% 90%, rgba(18, 72, 48, 0.40) 0%, transparent 65%),
      var(--dash-shell-background-base);

    --scrollbar-thumb:           rgba(143, 189, 212, 0.38);
    --scrollbar-thumb-hover:     rgba(143, 189, 212, 0.50);
    --scrollbar-thumb-active:    rgba(143, 189, 212, 0.62);
  }
}

@media (prefers-color-scheme: light) {
  html[data-theme-preference="system"] {
    color-scheme: light dark;
  }
}


/* ── Dark mode activation ───────────────────────────────────── */
/*
  Apply [data-theme="dark"] to <html> to activate dark mode.
  Preference in localStorage key "dash-theme": "system" (default) | "light" | "dark".
  html[data-theme-preference] stores the preference; html[data-theme] is the resolved appearance ("light"|"dark").
  System mode uses prefers-color-scheme (light checked before dark) plus dash-theme-bootstrap.js in <head>.
  Also set documentElement.style.colorScheme to "light" or "dark" for native control chrome.

  <script>
    (function () {
      var t = localStorage.getItem('dash-theme');
      var pref = (t === 'light' || t === 'dark' || t === 'system') ? t : 'system';
      var dark = pref === 'dark'
        || (pref === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
      if (dark) document.documentElement.setAttribute('data-theme', 'dark');
    })();
  </script>
*/