/* ═══════════════════════════════════════════════════════════════════════════
   Web Push Platform — Design Tokens (the single source of truth)
   ---------------------------------------------------------------------------
   Nothing here is a component. Components live in app.css and may ONLY use the
   semantic tokens below, never a raw palette step and never a literal colour.
   Dark mode is a remap of the same semantic names — no component is repeated.

   Layers
     1. Palette      raw colour steps (brand / accent / neutral / semantic)
     2. Spacing      4px scale
     3. Typography   font families, size scale, weights, line heights
     4. Radius       corner scale
     5. Elevation    shadow scale + focus ring
     6. Motion       durations and easings (honours prefers-reduced-motion)
     7. Layers       z-index scale
     8. Semantic     surface / text / border / state tokens — what components use
     9. Dark theme   semantic remap only
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── 1. Palette ───────────────────────────────────────────────────────
       Brand: deep indigo (trustworthy, tech). Accent: vivid violet for CTAs. */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;
    --brand-950: #1e1b4b;

    --accent-50:  #faf5ff;
    --accent-100: #f3e8ff;
    --accent-200: #e9d5ff;
    --accent-300: #d8b4fe;
    --accent-400: #c084fc;
    --accent-500: #a855f7;
    --accent-600: #9333ea;
    --accent-700: #7e22ce;

    /* Secondary: teal — used for secondary charts, informational accents. */
    --teal-100: #ccfbf1;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;

    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-150: #eaeef4;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    --success-50:  #ecfdf5;
    --success-100: #d1fae5;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;

    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    --info-50:  #f0f9ff;
    --info-100: #e0f2fe;
    --info-400: #38bdf8;
    --info-500: #0ea5e9;
    --info-600: #0284c7;
    --info-700: #0369a1;

    /* RGB triplets for translucent fills (rgba() needs raw channels). */
    --brand-rgb:   99, 102, 241;
    --accent-rgb:  168, 85, 247;
    --success-rgb: 16, 185, 129;
    --warning-rgb: 245, 158, 11;
    --danger-rgb:  239, 68, 68;
    --info-rgb:    14, 165, 233;
    --gray-rgb:    100, 116, 139;
    --shadow-rgb:  15, 23, 42;

    /* ── 2. Spacing (4px base) ────────────────────────────────────────── */
    --space-0:  0;
    --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;
    --space-16: 64px;

    /* ── 3. Typography ────────────────────────────────────────────────── */
    --font-base: 'Cairo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;

    --text-2xs: 0.68rem;
    --text-xs:  0.74rem;
    --text-sm:  0.82rem;
    --text-md:  0.9rem;
    --text-base: 0.95rem;
    --text-lg:  1.05rem;
    --text-xl:  1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.9rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 1.75;

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

    /* ── 4. Radius ────────────────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ── 5. Elevation ─────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), .06);
    --shadow-sm: 0 1px 3px rgba(var(--shadow-rgb), .07), 0 1px 2px rgba(var(--shadow-rgb), .04);
    --shadow-md: 0 4px 12px rgba(var(--shadow-rgb), .08), 0 1px 3px rgba(var(--shadow-rgb), .05);
    --shadow-lg: 0 10px 30px rgba(var(--shadow-rgb), .12), 0 2px 8px rgba(var(--shadow-rgb), .06);
    --shadow-xl: 0 20px 50px rgba(var(--shadow-rgb), .18);
    --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), .28);
    --focus-ring-danger: 0 0 0 3px rgba(var(--danger-rgb), .25);

    /* ── 6. Motion ────────────────────────────────────────────────────── */
    --transition-fast: .15s ease;
    --transition-base: .25s ease;
    --transition-slow: .4s cubic-bezier(.4, 0, .2, 1);

    /* ── 7. Layers ────────────────────────────────────────────────────── */
    --z-sticky:   1020;
    --z-bulkbar:  1030;
    --z-backdrop: 1040;
    --z-drawer:   1050;
    --z-modal:    1055;
    --z-toast:    1080;

    /* ── 8. Semantic tokens — the only names components may use ───────── */
    --page-bg:        #f4f6fb;
    --page-bg-grad:   linear-gradient(135deg, #f4f6fb 0%, #eef1f8 100%);

    --surface:        #ffffff;   /* cards, tables, modals            */
    --surface-2:      var(--gray-50);   /* headers, hovered rows     */
    --surface-3:      var(--gray-100);  /* inset wells, code blocks  */
    --surface-input:  #ffffff;

    --border:         var(--gray-150);
    --border-strong:  var(--gray-300);

    --text:           var(--gray-900);
    --text-muted:     var(--gray-500);
    --text-subtle:    var(--gray-400);
    --text-heading:   var(--gray-900);
    --text-inverse:   #ffffff;
    --link:           var(--brand-600);
    --link-hover:     var(--brand-700);

    --primary:          var(--brand-600);
    --primary-hover:    var(--brand-700);
    --primary-soft:     var(--brand-50);
    --primary-contrast: #ffffff;

    --card-bg:      var(--surface);
    --card-border:  var(--border);
    --card-radius:  var(--radius-lg);
    --card-shadow:  var(--shadow-sm);
    --card-shadow-hover: var(--shadow-lg);

    --sidebar-width:      270px;
    --sidebar-bg:         linear-gradient(175deg, #1e1b4b 0%, #312e81 45%, #1e1b4b 100%);
    --sidebar-border:     rgba(255, 255, 255, .07);
    --sidebar-active-bg:  linear-gradient(135deg, var(--brand-500), var(--accent-600));
    --sidebar-hover-bg:   rgba(255, 255, 255, .08);
    --sidebar-text:       rgba(255, 255, 255, .72);
    --sidebar-text-strong:#ffffff;
    --sidebar-icon-color: var(--brand-300);

    /* Status tints — one place decides how a state looks everywhere. */
    --tint-success: rgba(var(--success-rgb), .12);
    --tint-warning: rgba(var(--warning-rgb), .14);
    --tint-danger:  rgba(var(--danger-rgb), .12);
    --tint-info:    rgba(var(--info-rgb), .12);
    --tint-primary: rgba(var(--brand-rgb), .12);
    --tint-neutral: rgba(var(--gray-rgb), .12);

    --on-success: var(--success-700);
    --on-warning: var(--warning-700);
    --on-danger:  var(--danger-700);
    --on-info:    var(--info-700);
    --on-primary: var(--brand-700);
    --on-neutral: var(--gray-600);

    --scrollbar-thumb: var(--gray-300);
}

/* ── 9. Dark theme — semantic remap only ──────────────────────────────── */
[data-bs-theme="dark"] {
    --page-bg:      #0b1120;
    --page-bg-grad: linear-gradient(135deg, #0b1120 0%, #0f172a 100%);

    --surface:       #131c31;
    --surface-2:     #17213a;
    --surface-3:     #1d2942;
    --surface-input: #0f1729;

    --border:        #253150;
    --border-strong: #35426a;

    --text:         #e8edf7;
    --text-muted:   #9fb0cd;
    --text-subtle:  #7c8cab;
    --text-heading: #f4f7fd;
    --link:         var(--brand-300);
    --link-hover:   var(--brand-200);

    --primary:       var(--brand-500);
    --primary-hover: var(--brand-400);
    --primary-soft:  rgba(var(--brand-rgb), .16);

    --card-shadow:       0 1px 3px rgba(0, 0, 0, .5);
    --card-shadow-hover: 0 12px 34px rgba(0, 0, 0, .55);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, .6);

    --sidebar-bg:     linear-gradient(175deg, #080d1a 0%, #111a30 45%, #080d1a 100%);
    --sidebar-border: rgba(255, 255, 255, .05);

    /* Tints need more punch on a dark ground, text needs the lighter step. */
    --tint-success: rgba(var(--success-rgb), .2);
    --tint-warning: rgba(var(--warning-rgb), .22);
    --tint-danger:  rgba(var(--danger-rgb), .2);
    --tint-info:    rgba(var(--info-rgb), .2);
    --tint-primary: rgba(var(--brand-rgb), .22);
    --tint-neutral: rgba(var(--gray-rgb), .22);

    --on-success: var(--success-400);
    --on-warning: var(--warning-400);
    --on-danger:  var(--danger-400);
    --on-info:    var(--info-400);
    --on-primary: var(--brand-300);
    --on-neutral: var(--gray-300);

    --scrollbar-thumb: #33405f;

    /* Bootstrap reads these for its own components (modals, dropdowns, forms). */
    --bs-body-bg: var(--page-bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-3);
    --bs-emphasis-color: var(--text-heading);
}

/* A visitor who never picked a theme follows the operating system. */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]):not([data-bs-theme="dark"]) {
        color-scheme: dark;
    }
}

/* Respect the user's motion preference across every component. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-slow: 0s;
    }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}