/*
 * CallAi Dashboard — Design Tokens
 * Canonical source of truth for all visual variables.
 * Import this file first in every page/component.
 *
 * Font stack:
 *   Body/UI  → Schibsted Grotesk (Scandinavian, clean, humanist)
 *   Chrome   → JetBrains Mono   (labels, metrics, code, timestamps)
 *
 * Color model: OKLCH where noted; HEX aliases for browser compat.
 */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ═══════════════════════════════════════════════
   ROOT TOKENS
═══════════════════════════════════════════════ */
:root {

  /* ─── Typography ─────────────────────────────── */
  --font-sans:  'Schibsted Grotesk', -apple-system, 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-feat-mono: "tnum", "zero", "ss01";

  /* Scale: base 15px, 1.25 minor-third */
  --t-mega:     clamp(3.5rem, 8vw, 7rem);     /* hero numbers */
  --t-display:  clamp(1.75rem, 3vw, 2.5rem);  /* page headline */
  --t-h1:       clamp(1.25rem, 2vw, 1.5rem);  /* section heading */
  --t-h2:       1.125rem;                      /* card heading */
  --t-body:     0.9375rem;                     /* 15px — base */
  --t-small:    0.8125rem;                     /* 13px — secondary */
  --t-micro:    0.6875rem;                     /* 11px — labels, caps */

  /* Line heights */
  --lh-tight:   1.2;
  --lh-base:    1.5;
  --lh-loose:   1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-caps:     0.14em;  /* uppercase mono labels */

  /* ─── Colour — Neutrals ─────────────────────── */
  /* Warm charcoal scale (slight yellow undertone = #0E0E0C) */
  --ink:          #0E0E0C;   /* oklch(8% 0.005 90) */
  --ink-soft:     #555552;   /* oklch(38% 0.004 90) */
  --ink-faint:    #8B8B86;   /* oklch(58% 0.004 90) */
  --ink-ghost:    #B8B8B3;   /* oklch(74% 0.003 90) — disabled text */

  --bg:           #FAFAF7;   /* oklch(98% 0.005 100) — warm off-white */
  --surface:      #FFFFFF;   /* cards, modals */
  --surface-alt:  #F4F4F0;   /* table stripes, hover fills */
  --surface-raised: #FFFFFF; /* elevated panels */

  --rule:         #0E0E0C;   /* strong border (1.5px) */
  --rule-mid:     #D4D4CF;   /* standard dividers */
  --rule-faint:   #EAEAE6;   /* subtle separators */
  --rule-w:       1.5px;
  --rule-w-emph:  2px;

  /* ─── Colour — Brand ────────────────────────── */
  --orange:         #FF5000;   /* primary accent */
  --orange-hover:   #E64800;   /* darker on hover */
  --orange-active:  #CC4000;   /* pressed/active */
  --orange-tint:    #FFF3EE;   /* backgrounds, highlights */
  --orange-tint-md: #FFD9C7;   /* stronger orange bg */

  /* ─── Colour — Semantic ─────────────────────── */
  --success:        #1A7F4B;   /* oklch(50% 0.13 155) */
  --success-tint:   #EDFAF3;
  --success-border: #B3E8CC;

  --warning:        #B45309;   /* oklch(50% 0.14 70) */
  --warning-tint:   #FFFBEB;
  --warning-border: #FCD34D;

  --danger:         #C53030;   /* oklch(42% 0.16 27) */
  --danger-tint:    #FEF2F2;
  --danger-border:  #FECACA;

  --info:           #1D4ED8;   /* oklch(40% 0.20 265) */
  --info-tint:      #EFF6FF;
  --info-border:    #BFDBFE;

  --neutral-tint:   #F4F4F0;
  --neutral-border: #D4D4CF;

  /* ─── Colour — Status pills ─────────────────── */
  --status-live:    var(--success);
  --status-busy:    var(--warning);
  --status-offline: var(--ink-ghost);
  --status-error:   var(--danger);

  /* ─── Spacing — 4pt scale ───────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ─── Layout constants ──────────────────────── */
  --sidebar-w:  240px;
  --topbar-h:    64px;
  --demobar-h:   36px;
  --content-max: 1400px;
  --content-pad: var(--sp-8);   /* 32px left/right in main */

  /* ─── Radius ────────────────────────────────── */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-full: 999px;  /* pills */

  /* ─── Elevation / Shadow ────────────────────── */
  /* Editorial: shadows use warm ink, NOT neutral grey */
  --shadow-sm:  0 1px 3px oklch(8% 0.005 90 / 0.10);
  --shadow-md:  0 4px 12px oklch(8% 0.005 90 / 0.10),
                0 1px 3px oklch(8% 0.005 90 / 0.06);
  --shadow-lg:  0 8px 24px oklch(8% 0.005 90 / 0.12),
                0 2px 6px oklch(8% 0.005 90 / 0.06);
  --shadow-xl:  0 16px 48px oklch(8% 0.005 90 / 0.14),
                0 4px 12px oklch(8% 0.005 90 / 0.06);
  --shadow-focus: 0 0 0 3px oklch(55% 0.22 35 / 0.25); /* orange ring */

  /* ─── Z-index semantic scale ────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    1;    /* cards on hover */
  --z-dropdown: 10;   /* dropdowns, tooltips */
  --z-sticky:   20;   /* sidebar, topbar */
  --z-overlay:  30;   /* demobar */
  --z-modal:    40;   /* modals, drawers */
  --z-toast:    50;   /* toasts */
  --z-top:     100;   /* critical alerts */

  /* ─── Animation timings ─────────────────────── */
  --dur-instant:  80ms;   /* micro-feedback (checkbox click) */
  --dur-fast:    120ms;   /* hover colour, icon swap */
  --dur-base:    200ms;   /* state transitions */
  --dur-slow:    300ms;   /* layout shifts, panel open */
  --dur-enter:   350ms;   /* page entrance stagger */
  --dur-modal:   400ms;   /* modal/drawer */

  /* ─── Easing ────────────────────────────────── */
  --ease-out:      cubic-bezier(0.00, 0.00, 0.20, 1.00); /* default */
  --ease-in:       cubic-bezier(0.40, 0.00, 1.00, 1.00);
  --ease-in-out:   cubic-bezier(0.40, 0.00, 0.20, 1.00);
  --ease-spring:   cubic-bezier(0.34, 1.10, 0.64, 1.00); /* subtle spring, non-elastic */
  --ease-linear:   linear;
}

/* ═══════════════════════════════════════════════
   GLOBAL RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a  { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
input, select, textarea { font: inherit; }

/* ─── Utility classes ───────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feat-mono);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════
   DARK MODE — SYSTEM PREFERENCE
   Applies when OS prefers dark AND no explicit
   [data-theme="light"] override on <html>.
═══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Neutrals (warm-tinted dark) */
    --ink:           #FAFAF7;   /* cream on charcoal — 18.3:1 ✅ */
    --ink-soft:      #A8A8A3;   /* 8.1:1 ✅ */
    --ink-faint:     #80807B;   /* 4.9:1 ✅ */
    --ink-ghost:     #5A5A56;   /* disabled only — intentionally low */

    --bg:            #0E0E0C;
    --surface:       #1A1A18;
    --surface-alt:   #242420;
    --surface-raised:#2A2A28;

    --rule:          #3C3C38;
    --rule-mid:      #2C2C28;
    --rule-faint:    #1E1E1C;

    /* Brand — orange tints for dark surfaces */
    --orange-tint:    #1C0A00;   /* oklch(~8% 0.05 35) — very dark warm orange */
    --orange-tint-md: #2D1400;   /* slightly lighter for hover states */

    /* Semantic — all verified WCAG AA on #0E0E0C */
    --success:        #4ADE80;   /* green-400  — 9.0:1 ✅ */
    --success-tint:   #052E16;
    --success-border: #166534;

    --warning:        #FBBF24;   /* amber-400  — 9.9:1 ✅ */
    --warning-tint:   #1C1200;
    --warning-border: #713F12;

    --danger:         #F87171;   /* red-400    — 4.6:1 ✅ */
    --danger-tint:    #200808;   /* slightly lighter than before for row contrast */
    --danger-border:  #7F1D1D;

    --info:           #93C5FD;   /* blue-300   — 8.4:1 ✅ */
    --info-tint:      #0C1A2E;
    --info-border:    #1E3A5F;

    --neutral-tint:   #1E1E1C;
    --neutral-border: #2C2C28;

    /* Shadows: pure black — more visible on dark surfaces */
    --shadow-sm:  0 1px 3px #00000066;
    --shadow-md:  0 4px 12px #00000077, 0 1px 3px #00000044;
    --shadow-lg:  0 8px 24px #00000088, 0 2px 6px #00000055;
    --shadow-xl:  0 16px 48px #00000099, 0 4px 12px #00000066;
    --shadow-focus: 0 0 0 3px oklch(55% 0.22 35 / 0.40);
  }
}

/* ═══════════════════════════════════════════════
   DARK MODE — EXPLICIT [data-theme="dark"]
   Higher cascade position beats the @media block.
   Allows forcing dark even on light-preferring OS.
═══════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink:           #FAFAF7;
  --ink-soft:      #A8A8A3;
  --ink-faint:     #80807B;
  --ink-ghost:     #5A5A56;

  --bg:            #0E0E0C;
  --surface:       #1A1A18;
  --surface-alt:   #242420;
  --surface-raised:#2A2A28;

  --rule:          #3C3C38;
  --rule-mid:      #2C2C28;
  --rule-faint:    #1E1E1C;

  /* Brand — orange tints for dark surfaces */
  --orange-tint:    #1C0A00;
  --orange-tint-md: #2D1400;

  --success:        #4ADE80;
  --success-tint:   #052E16;
  --success-border: #166534;

  --warning:        #FBBF24;
  --warning-tint:   #1C1200;
  --warning-border: #713F12;

  --danger:         #F87171;
  --danger-tint:    #200808;
  --danger-border:  #7F1D1D;

  --info:           #93C5FD;
  --info-tint:      #0C1A2E;
  --info-border:    #1E3A5F;

  --neutral-tint:   #1E1E1C;
  --neutral-border: #2C2C28;

  --shadow-sm:  0 1px 3px #00000066;
  --shadow-md:  0 4px 12px #00000077, 0 1px 3px #00000044;
  --shadow-lg:  0 8px 24px #00000088, 0 2px 6px #00000055;
  --shadow-xl:  0 16px 48px #00000099, 0 4px 12px #00000066;
  --shadow-focus: 0 0 0 3px oklch(55% 0.22 35 / 0.40);
}

/* Smooth theme transition (non-motion-sensitive) */
html { transition: background-color 200ms ease, color 200ms ease; }