/* ============================================================================
   ZeeApps — "Aurora" Design Tokens
   apps.zeemedia.com · Enterprise Governance Platform

   The single source of truth for colour, space, type, elevation and motion.
   Nothing in this file styles an element; it only declares values. Component
   rules live in zee-ui.css, and pages compose those.

   RULES OF THE ROAD
   -----------------
   1. Never hard-code a hex value in a page or component. If a colour you need
      is missing, add a token here so it can be retuned in one place.
   2. Every colour is defined on bare :root first. Dark mode only *overrides*
      tokens — it never introduces a colour that light mode lacks.
   3. Accent families are numbered 50..900 like a ramp. Use 500/600 for fills,
      100/200 for pastel washes, 700+ for text on a pastel wash.
   ========================================================================= */

:root {
    /* ── Brand ────────────────────────────────────────────────────────────
       Zee red is reserved for the corporate mark itself. It is deliberately
       NOT the UI accent — at scale it reads as an error state.            */
    --zee-brand:            #e30613;
    --zee-brand-ink:        #a4040e;

    /* ── Primary: vibrant violet ─────────────────────────────────────── */
    --violet-50:            #f5f3ff;
    --violet-100:           #ede9fe;
    --violet-200:           #ddd6fe;
    --violet-300:           #c4b5fd;
    --violet-400:           #a78bfa;
    --violet-500:           #8b5cf6;
    --violet-600:           #7c3aed;
    --violet-700:           #6d28d9;
    --violet-800:           #5b21b6;
    --violet-900:           #4c1d95;

    /* ── Accent families ─────────────────────────────────────────────────
       Ten hues, used to colour-code app categories, chart series and
       metric tiles so a dense screen stays scannable.                    */
    --sky-50:   #f0f9ff;  --sky-100:   #e0f2fe;  --sky-200:   #bae6fd;
    --sky-300:  #7dd3fc;  --sky-400:   #38bdf8;  --sky-500:   #0ea5e9;
    --sky-600:  #0284c7;  --sky-700:   #0369a1;  --sky-900:   #0c4a6e;

    --teal-50:  #f0fdfa;  --teal-100:  #ccfbf1;  --teal-200:  #99f6e4;
    --teal-300: #5eead4;  --teal-400:  #2dd4bf;  --teal-500:  #14b8a6;
    --teal-600: #0d9488;  --teal-700:  #0f766e;  --teal-900:  #134e4a;

    --mint-50:  #ecfdf5;  --mint-100:  #d1fae5;  --mint-200:  #a7f3d0;
    --mint-300: #6ee7b7;  --mint-400:  #34d399;  --mint-500:  #10b981;
    --mint-600: #059669;  --mint-700:  #047857;  --mint-900:  #064e3b;

    --amber-50: #fffbeb;  --amber-100: #fef3c7;  --amber-200: #fde68a;
    --amber-300:#fcd34d;  --amber-400: #fbbf24;  --amber-500: #f59e0b;
    --amber-600:#d97706;  --amber-700: #b45309;  --amber-900: #78350f;

    --rose-50:  #fff1f2;  --rose-100:  #ffe4e6;  --rose-200:  #fecdd3;
    --rose-300: #fda4af;  --rose-400:  #fb7185;  --rose-500:  #f43f5e;
    --rose-600: #e11d48;  --rose-700:  #be123c;  --rose-900:  #881337;

    --coral-50: #fff5f5;  --coral-100: #ffe8e8;  --coral-200: #ffcdcd;
    --coral-300:#ffa8a8;  --coral-400: #ff8787;  --coral-500: #ff6b6b;
    --coral-600:#f03e3e;  --coral-700: #c92a2a;  --coral-900: #8b1a1a;

    --indigo-50:#eef2ff;  --indigo-100:#e0e7ff;  --indigo-200:#c7d2fe;
    --indigo-300:#a5b4fc; --indigo-400:#818cf8;  --indigo-500:#6366f1;
    --indigo-600:#4f46e5; --indigo-700:#4338ca;  --indigo-900:#312e81;

    --fuchsia-50:#fdf4ff; --fuchsia-100:#fae8ff; --fuchsia-200:#f5d0fe;
    --fuchsia-300:#f0abfc;--fuchsia-400:#e879f9; --fuchsia-500:#d946ef;
    --fuchsia-600:#c026d3;--fuchsia-700:#a21caf; --fuchsia-900:#701a75;

    --orange-50:#fff7ed;  --orange-100:#ffedd5;  --orange-200:#fed7aa;
    --orange-300:#fdba74; --orange-400:#fb923c;  --orange-500:#f97316;
    --orange-600:#ea580c; --orange-700:#c2410c;  --orange-900:#7c2d12;

    --cyan-50:  #ecfeff;  --cyan-100:  #cffafe;  --cyan-200:  #a5f3fc;
    --cyan-300: #67e8f9;  --cyan-400:  #22d3ee;  --cyan-500:  #06b6d4;
    --cyan-600: #0891b2;  --cyan-700:  #0e7490;  --cyan-900:  #164e63;

    /* ── Neutrals ────────────────────────────────────────────────────── */
    --slate-0:   #ffffff;
    --slate-25:  #fcfcfd;
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #060b16;

    /* ── Semantic roles ───────────────────────────────────────────────────
       Pages reference THESE, not the ramps above, wherever the meaning is
       "primary action" or "danger" rather than "this specific hue".      */
    --accent:               var(--violet-600);
    --accent-hover:         var(--violet-700);
    --accent-soft:          var(--violet-100);
    --accent-softer:        var(--violet-50);
    --accent-ink:           var(--violet-700);
    --accent-ring:          rgb(139 92 246 / 0.35);
    --accent-rgb:           139 92 246;

    --success:              var(--mint-600);
    --success-soft:         var(--mint-100);
    --success-ink:          var(--mint-700);

    --warning:              var(--amber-500);
    --warning-soft:         var(--amber-100);
    --warning-ink:          var(--amber-700);

    --danger:               var(--rose-600);
    --danger-soft:          var(--rose-100);
    --danger-ink:           var(--rose-700);

    --info:                 var(--sky-600);
    --info-soft:            var(--sky-100);
    --info-ink:             var(--sky-700);

    /* ── Surfaces ────────────────────────────────────────────────────── */
    --canvas:               #f7f6fd;   /* page background, faintly violet   */
    --canvas-alt:           var(--slate-50);
    --surface:              var(--slate-0);
    --surface-raised:       var(--slate-0);
    --surface-sunken:       var(--slate-50);
    --surface-hover:        var(--slate-50);
    --surface-active:       var(--slate-100);

    /* Frosted panels. Split into background + border + blur so a component
       can opt into the glass look without restating three values.        */
    --glass-bg:             rgb(255 255 255 / 0.72);
    --glass-bg-strong:      rgb(255 255 255 / 0.88);
    --glass-border:         rgb(255 255 255 / 0.65);
    --glass-blur:           blur(20px) saturate(180%);

    /* ── Text ────────────────────────────────────────────────────────── */
    --ink:                  var(--slate-900);
    --ink-secondary:        var(--slate-600);
    --ink-muted:            var(--slate-500);
    --ink-faint:            var(--slate-400);
    --ink-on-accent:        #ffffff;

    /* ── Borders ─────────────────────────────────────────────────────── */
    --border:               var(--slate-200);
    --border-soft:          var(--slate-100);
    --border-strong:        var(--slate-300);
    --border-accent:        var(--violet-200);

    /* ── Gradients ────────────────────────────────────────────────────────
       Named by intent so a page never re-derives one by hand.           */
    --grad-accent:      linear-gradient(135deg, var(--violet-500), var(--violet-700));
    --grad-accent-soft: linear-gradient(135deg, var(--violet-100), var(--violet-200));
    --grad-sunrise:     linear-gradient(135deg, var(--amber-400), var(--coral-500));
    --grad-ocean:       linear-gradient(135deg, var(--sky-400),   var(--indigo-600));
    --grad-meadow:      linear-gradient(135deg, var(--mint-400),  var(--teal-600));
    --grad-berry:       linear-gradient(135deg, var(--fuchsia-500), var(--violet-700));
    --grad-candy:       linear-gradient(135deg, var(--rose-400),  var(--fuchsia-500));
    --grad-citrus:      linear-gradient(135deg, var(--amber-400), var(--orange-500));

    /* The animated rainbow edge used on hero bars. */
    --grad-spectrum: linear-gradient(90deg,
        var(--violet-500), var(--sky-500), var(--mint-500),
        var(--amber-500),  var(--coral-500), var(--violet-500));

    /* Page-level pastel aurora wash. Applied as a background-image. */
    --aurora:
        radial-gradient(ellipse 80% 60% at 12% 8%,  rgb(139 92 246 / 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 88% 12%, rgb(14 165 233 / 0.13)  0%, transparent 60%),
        radial-gradient(ellipse 70% 70% at 78% 88%, rgb(244 63 94 / 0.10)   0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 18% 92%, rgb(16 185 129 / 0.10)  0%, transparent 60%);

    /* ── Elevation ───────────────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-sm:  0 1px 3px rgb(15 23 42 / 0.06),  0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-md:  0 4px 12px rgb(15 23 42 / 0.07), 0 2px 4px rgb(15 23 42 / 0.04);
    --shadow-lg:  0 10px 28px rgb(15 23 42 / 0.09), 0 4px 8px rgb(15 23 42 / 0.04);
    --shadow-xl:  0 20px 48px rgb(15 23 42 / 0.12), 0 8px 16px rgb(15 23 42 / 0.05);
    --shadow-2xl: 0 32px 72px rgb(15 23 42 / 0.16);
    --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.9);

    /* Accent-tinted glows, for hover states on coloured surfaces. */
    --glow-accent: 0 8px 24px rgb(var(--accent-rgb) / 0.30);
    --glow-soft:   0 4px 16px rgb(var(--accent-rgb) / 0.16);

    /* Focus ring — one definition, used by every interactive element. */
    --ring: 0 0 0 3px var(--accent-ring);

    /* ── Radius ──────────────────────────────────────────────────────── */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  20px;
    --r-2xl: 26px;
    --r-full: 999px;

    /* ── Space — 4px base ────────────────────────────────────────────── */
    --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;   --s-6: 24px;   --s-7: 28px;  --s-8: 32px;
    --s-10: 40px;  --s-12: 48px;  --s-14: 56px; --s-16: 64px;
    --s-20: 80px;  --s-24: 96px;

    /* ── Typography ──────────────────────────────────────────────────── */
    --font-sans:    'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Roboto, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-2xs:  10px;
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;
    --fs-md:   14px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  28px;
    --fs-4xl:  34px;
    --fs-5xl:  44px;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    --lh-tight:  1.2;
    --lh-snug:   1.4;
    --lh-normal: 1.6;
    --lh-loose:  1.8;

    --ls-tighter: -0.03em;
    --ls-tight:   -0.015em;
    --ls-normal:  0;
    --ls-wide:     0.04em;
    --ls-widest:   0.14em;

    /* ── Motion ───────────────────────────────────────────────────────────
       Blazor Server round-trips already cost latency, so UI feedback that
       can be pure CSS should be pure CSS — and quick.                   */
    --dur-instant: 90ms;
    --dur-fast:   150ms;
    --dur-base:   220ms;
    --dur-slow:   360ms;
    --dur-slower: 600ms;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Entrance stagger: components multiply this by their index. */
    --stagger: 55ms;

    /* ── Layout ──────────────────────────────────────────────────────── */
    --sidebar-w:        264px;
    --sidebar-w-collapsed: 72px;
    --topbar-h:         64px;
    --content-max:     1480px;

    /* ── Z-index ─────────────────────────────────────────────────────── */
    --z-base:      1;
    --z-sticky:   100;
    --z-drawer:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-tooltip:  600;
}

/* ============================================================================
   DARK THEME
   Overrides only. Explicit [data-theme] wins in both directions so a manual
   toggle can override the OS preference either way.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --canvas:          var(--slate-950);
        --canvas-alt:      #0b1220;
        --surface:         #111a2b;
        --surface-raised:  #162033;
        --surface-sunken:  #0b1220;
        --surface-hover:   #1a2438;
        --surface-active:  #202c44;

        --glass-bg:        rgb(22 32 51 / 0.72);
        --glass-bg-strong: rgb(22 32 51 / 0.90);
        --glass-border:    rgb(255 255 255 / 0.09);

        --ink:             #eef2f9;
        --ink-secondary:   #a9b6cc;
        --ink-muted:       #7e8da6;
        --ink-faint:       #5b6880;

        --border:          rgb(255 255 255 / 0.10);
        --border-soft:     rgb(255 255 255 / 0.06);
        --border-strong:   rgb(255 255 255 / 0.18);
        --border-accent:   rgb(var(--accent-rgb) / 0.35);

        --accent:          var(--violet-500);
        --accent-hover:    var(--violet-400);
        --accent-soft:     rgb(var(--accent-rgb) / 0.16);
        --accent-softer:   rgb(var(--accent-rgb) / 0.08);
        --accent-ink:      var(--violet-300);

        --success-soft:    rgb(16 185 129 / 0.16);
        --success-ink:     var(--mint-300);
        --warning-soft:    rgb(245 158 11 / 0.16);
        --warning-ink:     var(--amber-300);
        --danger-soft:     rgb(244 63 94 / 0.16);
        --danger-ink:      var(--rose-300);
        --info-soft:       rgb(14 165 233 / 0.16);
        --info-ink:        var(--sky-300);

        --shadow-xs:  0 1px 2px rgb(0 0 0 / 0.30);
        --shadow-sm:  0 1px 3px rgb(0 0 0 / 0.36), 0 1px 2px rgb(0 0 0 / 0.24);
        --shadow-md:  0 4px 12px rgb(0 0 0 / 0.40), 0 2px 4px rgb(0 0 0 / 0.24);
        --shadow-lg:  0 10px 28px rgb(0 0 0 / 0.46), 0 4px 8px rgb(0 0 0 / 0.28);
        --shadow-xl:  0 20px 48px rgb(0 0 0 / 0.54), 0 8px 16px rgb(0 0 0 / 0.30);
        --shadow-2xl: 0 32px 72px rgb(0 0 0 / 0.60);
        --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.05);

        --aurora:
            radial-gradient(ellipse 80% 60% at 12% 8%,  rgb(139 92 246 / 0.20) 0%, transparent 62%),
            radial-gradient(ellipse 70% 60% at 88% 12%, rgb(14 165 233 / 0.15)  0%, transparent 62%),
            radial-gradient(ellipse 70% 70% at 78% 88%, rgb(217 70 239 / 0.13)  0%, transparent 62%),
            radial-gradient(ellipse 60% 60% at 18% 92%, rgb(20 184 166 / 0.12)  0%, transparent 62%);
    }
}

:root[data-theme="dark"] {
    --canvas:          var(--slate-950);
    --canvas-alt:      #0b1220;
    --surface:         #111a2b;
    --surface-raised:  #162033;
    --surface-sunken:  #0b1220;
    --surface-hover:   #1a2438;
    --surface-active:  #202c44;

    --glass-bg:        rgb(22 32 51 / 0.72);
    --glass-bg-strong: rgb(22 32 51 / 0.90);
    --glass-border:    rgb(255 255 255 / 0.09);

    --ink:             #eef2f9;
    --ink-secondary:   #a9b6cc;
    --ink-muted:       #7e8da6;
    --ink-faint:       #5b6880;

    --border:          rgb(255 255 255 / 0.10);
    --border-soft:     rgb(255 255 255 / 0.06);
    --border-strong:   rgb(255 255 255 / 0.18);
    --border-accent:   rgb(var(--accent-rgb) / 0.35);

    --accent:          var(--violet-500);
    --accent-hover:    var(--violet-400);
    --accent-soft:     rgb(var(--accent-rgb) / 0.16);
    --accent-softer:   rgb(var(--accent-rgb) / 0.08);
    --accent-ink:      var(--violet-300);

    --success-soft:    rgb(16 185 129 / 0.16);
    --success-ink:     var(--mint-300);
    --warning-soft:    rgb(245 158 11 / 0.16);
    --warning-ink:     var(--amber-300);
    --danger-soft:     rgb(244 63 94 / 0.16);
    --danger-ink:      var(--rose-300);
    --info-soft:       rgb(14 165 233 / 0.16);
    --info-ink:        var(--sky-300);

    --shadow-xs:  0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-sm:  0 1px 3px rgb(0 0 0 / 0.36), 0 1px 2px rgb(0 0 0 / 0.24);
    --shadow-md:  0 4px 12px rgb(0 0 0 / 0.40), 0 2px 4px rgb(0 0 0 / 0.24);
    --shadow-lg:  0 10px 28px rgb(0 0 0 / 0.46), 0 4px 8px rgb(0 0 0 / 0.28);
    --shadow-xl:  0 20px 48px rgb(0 0 0 / 0.54), 0 8px 16px rgb(0 0 0 / 0.30);
    --shadow-2xl: 0 32px 72px rgb(0 0 0 / 0.60);
    --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.05);

    --aurora:
        radial-gradient(ellipse 80% 60% at 12% 8%,  rgb(139 92 246 / 0.20) 0%, transparent 62%),
        radial-gradient(ellipse 70% 60% at 88% 12%, rgb(14 165 233 / 0.15)  0%, transparent 62%),
        radial-gradient(ellipse 70% 70% at 78% 88%, rgb(217 70 239 / 0.13)  0%, transparent 62%),
        radial-gradient(ellipse 60% 60% at 18% 92%, rgb(20 184 166 / 0.12)  0%, transparent 62%);
}

/* ============================================================================
   DENSITY
   The admin console shows far more per screen than the staff portal. Rather
   than two stylesheets, the admin shell sets .zee-dense and the shared
   components tighten themselves.
   ========================================================================= */

.zee-dense {
    --fs-base: 12.5px;
    --fs-md:   13px;
    --fs-lg:   15px;
    --fs-2xl:  19px;
    --fs-3xl:  24px;
    --r-lg:    12px;
    --r-xl:    14px;
    --s-6:     18px;
    --s-8:     24px;
    --stagger: 32ms;
}

/* ============================================================================
   ACCENT SWATCHES
   Put .zee-hue-teal (etc.) on any container and every accent-driven token
   inside it retunes. This is how app cards and metric tiles get their colour
   without a single hard-coded hex in the page.
   ========================================================================= */

.zee-hue-violet  { --accent: var(--violet-600);  --accent-hover: var(--violet-700);  --accent-soft: var(--violet-100);  --accent-ink: var(--violet-700);  --accent-rgb: 139 92 246;  --grad-hue: var(--grad-berry); }
.zee-hue-sky     { --accent: var(--sky-600);     --accent-hover: var(--sky-700);     --accent-soft: var(--sky-100);     --accent-ink: var(--sky-700);     --accent-rgb: 14 165 233;  --grad-hue: var(--grad-ocean); }
.zee-hue-teal    { --accent: var(--teal-600);    --accent-hover: var(--teal-700);    --accent-soft: var(--teal-100);    --accent-ink: var(--teal-700);    --accent-rgb: 20 184 166;  --grad-hue: var(--grad-meadow); }
.zee-hue-mint    { --accent: var(--mint-600);    --accent-hover: var(--mint-700);    --accent-soft: var(--mint-100);    --accent-ink: var(--mint-700);    --accent-rgb: 16 185 129;  --grad-hue: var(--grad-meadow); }
.zee-hue-amber   { --accent: var(--amber-500);   --accent-hover: var(--amber-600);   --accent-soft: var(--amber-100);   --accent-ink: var(--amber-700);   --accent-rgb: 245 158 11;  --grad-hue: var(--grad-citrus); }
.zee-hue-orange  { --accent: var(--orange-500);  --accent-hover: var(--orange-600);  --accent-soft: var(--orange-100);  --accent-ink: var(--orange-700);  --accent-rgb: 249 115 22;  --grad-hue: var(--grad-citrus); }
.zee-hue-rose    { --accent: var(--rose-600);    --accent-hover: var(--rose-700);    --accent-soft: var(--rose-100);    --accent-ink: var(--rose-700);    --accent-rgb: 244 63 94;   --grad-hue: var(--grad-candy); }
.zee-hue-coral   { --accent: var(--coral-500);   --accent-hover: var(--coral-600);   --accent-soft: var(--coral-100);   --accent-ink: var(--coral-700);   --accent-rgb: 255 107 107; --grad-hue: var(--grad-sunrise); }
.zee-hue-indigo  { --accent: var(--indigo-600);  --accent-hover: var(--indigo-700);  --accent-soft: var(--indigo-100);  --accent-ink: var(--indigo-700);  --accent-rgb: 99 102 241;  --grad-hue: var(--grad-ocean); }
.zee-hue-fuchsia { --accent: var(--fuchsia-600); --accent-hover: var(--fuchsia-700); --accent-soft: var(--fuchsia-100); --accent-ink: var(--fuchsia-700); --accent-rgb: 217 70 239;  --grad-hue: var(--grad-berry); }
.zee-hue-cyan    { --accent: var(--cyan-600);    --accent-hover: var(--cyan-700);    --accent-soft: var(--cyan-100);    --accent-ink: var(--cyan-700);    --accent-rgb: 6 182 212;   --grad-hue: var(--grad-ocean); }

/* Fallback so .zee-hue-* is optional — an uncoloured container still has one. */
:root { --grad-hue: var(--grad-accent); }