/* ==========================================================================
   Zain OS — Design Tokens
   Drop-in replacement for the current variables block in css/styles.css
   Dark mode only. Brand purity enforced: orange + warm-red (danger) + neutrals.
   ========================================================================== */

:root {
  /* ---------- Surfaces ---------- */
  --bg:               #1C1917;   /* page background */
  --sidebar-bg:       #141211;   /* sidebar */
  --card:             #252220;   /* cards, modals (was --white in legacy) */
  --hover:            #2C2926;   /* row + button hover */
  --table-header:     #201D1A;   /* table header strip */
  --border:           #332F2B;   /* default border */
  --border-light:     #2A2725;   /* subtle dividers */

  /* ---------- Text ---------- */
  --text:             #E8E0D8;   /* primary */
  --text-secondary:   #6B6058;   /* secondary / labels */
  --text-tertiary:    #4A4038;   /* placeholder / disabled */
  --nav-muted:        #8A7D72;   /* sidebar inactive */

  /* ---------- Brand (orange) ---------- */
  --brand:            #E8613A;
  --brand-hover:      #D4562F;
  --brand-soft:       rgba(232, 97, 58, 0.12);
  --brand-focus:      rgba(232, 97, 58, 0.15);
  --brand-subtle:     rgba(232, 97, 58, 0.08);

  /* Brand intensity ramp — for severity encoding without hue
     (use sparingly: dim = info, bright = urgent) */
  --brand-dim:        rgba(232, 97, 58, 0.55);
  --brand-mid:        rgba(232, 97, 58, 0.80);
  --brand-bright:     #E8613A;

  /* ---------- Danger (warm red) ----------
     Reserved for: destructive confirmations + genuine errors.
     NEVER for status pills, validation hints, or general warnings. */
  --danger:           #A13F28;
  --danger-soft:      rgba(161, 63, 40, 0.14);
  --danger-hover:     #8E3622;

  /* ---------- Type ---------- */
  --font-sans:        'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-arabic:      'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale (tokenized from current hardcoded use) */
  --fs-10:  10px;
  --fs-11:  11px;
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;   /* base */
  --fs-15:  15px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-22:  22px;
  --fs-24:  24px;

  --lh-tight:  1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* ---------- Radius ---------- */
  --r-sm:    8px;     /* default */
  --r-md:    12px;    /* cards, modals */
  --r-lg:    12px;    /* Modal Kit shell (design spec) */
  --r-pill:  9999px;  /* pills, badges */
  --r-chat:  22px;    /* chat input */
  --r-circle: 50%;

  /* ---------- Shadows ---------- */
  --shadow-flat:  none;
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-drag:  0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-glow:  0 0 6px rgba(232, 97, 58, 0.40);
  --ring-focus:   0 0 0 3px var(--brand-focus);

  /* ---------- Motion ---------- */
  --dur-fast:    100ms;
  --dur-default: 150ms;
  --dur-slow:    300ms;
  --ease:        cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Layout ---------- */
  --sidebar-w:        240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:         56px;
  --canvas-max:       1400px;
  --canvas-pad-x:     32px;
  --canvas-pad-y:     24px;

  /* ---------- Z-index ---------- */
  --z-sidebar:   40;
  --z-topbar:    50;
  --z-dropdown:  60;
  --z-modal:     80;
  --z-toast:     10000;
}

/* ---------- Breakpoints (reference) ----------
   --bp-lg: 1024px   (sidebar collapses)
   --bp-md:  768px   (sidebar becomes drawer, bottom tab bar appears)
   --bp-sm:  480px
   ============================================== */