/**
 * KPI Portal – Design Tokens
 * Every colour, size, and shadow lives here. Nothing else imports values directly.
 */

:root {
  /* ── Sidebar (dark navy) ───────────────────────────────────────── */
  --sidebar-bg:           #0D1B2A;
  --sidebar-bg-hover:     #16283E;
  --sidebar-bg-active:    rgba(15, 98, 254, 0.18);
  --sidebar-border:       rgba(255,255,255,0.07);
  --sidebar-text:         #8FA3BF;
  --sidebar-text-active:  #FFFFFF;
  --sidebar-accent-line:  #0F62FE;
  --sidebar-width:        220px;
  --sidebar-width-sm:     60px;

  /* ── Main chrome ────────────────────────────────────────────────── */
  --topbar-bg:            #FFFFFF;
  --topbar-height:        56px;
  --topbar-border:        #E2E8F0;
  --page-bg:              #EEF2F7;
  --card-bg:              #FFFFFF;
  --card-bg-hover:        #F8FAFC;
  --card-border:          #E2E8F0;
  --card-radius:          10px;
  --card-radius-lg:       14px;

  /* ── Text ──────────────────────────────────────────────────────── */
  --text-primary:         #0F172A;
  --text-secondary:       #334155;
  --text-muted:           #64748B;
  --text-faint:           #94A3B8;
  --text-on-dark:         #F1F5F9;

  /* ── Brand / Accent ─────────────────────────────────────────────── */
  --accent:               #0052CC;
  --accent-hover:         #003D99;
  --accent-soft:          #E6EEFF;
  --accent-mid:           #CCDCff;

  /* ── Semantic ────────────────────────────────────────────────────── */
  --success:              #166534;
  --success-bg:           #DCFCE7;
  --success-border:       #86EFAC;
  --success-chart:        #16A34A;

  --warning:              #92400E;
  --warning-bg:           #FEF3C7;
  --warning-border:       #FCD34D;
  --warning-chart:        #D97706;

  --danger:               #991B1B;
  --danger-bg:            #FEE2E2;
  --danger-border:        #FCA5A5;
  --danger-chart:         #DC2626;

  --purple:               #5B21B6;
  --purple-bg:            #EDE9FE;
  --purple-border:        #C4B5FD;
  --purple-chart:         #7C3AED;

  --cyan-chart:           #0891B2;
  --cyan:                 #0891B2;

  /* ── Status dots ─────────────────────────────────────────────────── */
  --status-online:        #16A34A;   /* green */
  --status-in-chat:       #9333EA;   /* purple — 1 active chat */
  --status-multi-chat:    #06B6D4;   /* cyan — 2+ active chats */
  --status-offline:       #94A3B8;   /* grey */

  /* ── Shadows ─────────────────────────────────────────────────────── */
  --shadow-xs:            0 1px 3px rgba(15,23,42,0.07);
  --shadow-sm:            0 2px 6px rgba(15,23,42,0.08);
  --shadow-md:            0 4px 16px rgba(15,23,42,0.10);
  --shadow-lg:            0 8px 32px rgba(15,23,42,0.13);

  /* ── Borders ─────────────────────────────────────────────────────── */
  --border-color:         #E2E8F0;
  --border-light:         #F1F5F9;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --r-sm:                 6px;
  --r-md:                 10px;
  --r-lg:                 14px;
  --r-xl:                 20px;
  --r-pill:               999px;

  /* ── Transitions ─────────────────────────────────────────────────── */
  --ease-fast:            0.12s ease;
  --ease-std:             0.2s ease;
  --ease-slow:            0.35s ease;

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-ui:              'Manrope', system-ui, -apple-system, sans-serif;
  --font-data:            'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* ── Z-index ladder ──────────────────────────────────────────────── */
  --z-base:               1;
  --z-overlay:            100;
  --z-modal:              200;
  --z-toast:              300;

  /* ── Performance thresholds (for CPH coloring) ───────────────────── */
  --cph-excellent:        4.0;
  --cph-good:             3.0;
  --cph-low:              2.0;
  --aht-fast-max:         300;   /* seconds — under this = green */
  --aht-slow-min:         600;   /* seconds — over this = amber */
}