/* ============================================================
   WHY Admin Console — Design Tokens (Phase 0 Foundation)
   ------------------------------------------------------------
   Single source of truth for color, spacing, type, radius,
   shadow, z-index and motion. Import this BEFORE site.css.

   Values are the EXACT colors/sizes already in use so adopting
   tokens is visually neutral. Downstream stylesheets should
   reference these variables instead of hardcoded hex.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     COLOR PRIMITIVES — ramps (do not use directly in views;
     prefer the semantic aliases in site.css)
     -------------------------------------------------------- */

  /* Neutral / slate ramp */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Brand / indigo ramp */
  --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;

  /* Success / green */
  --green-50:  #f0fdf4;
  --green-100: #d1fae5;
  --green-200: #bbf7d0;
  --green-300: #a7f3d0;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #166534;
  --green-800: #065f46;

  /* Danger / red */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-800: #991b1b;

  /* Warning / amber */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-800: #92400e;

  /* Info / blue */
  --blue-50:  #eff6ff;
  --blue-100: #dde7ff;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* Pure surfaces */
  --white: #ffffff;
  --black: #000000;

  /* --------------------------------------------------------
     ALPHA / OVERLAY tokens
     -------------------------------------------------------- */
  --overlay-brand-10: rgba(79, 70, 229, 0.10);
  --overlay-brand-12: rgba(79, 70, 229, 0.12);
  --overlay-brand-20: rgba(79, 70, 229, 0.20);
  --overlay-white-06: rgba(255, 255, 255, 0.06);
  --overlay-white-80: rgba(255, 255, 255, 0.80);
  --overlay-black-04: rgba(0, 0, 0, 0.04);
  --overlay-black-06: rgba(0, 0, 0, 0.06);
  --overlay-black-08: rgba(0, 0, 0, 0.08);
  --overlay-black-15: rgba(0, 0, 0, 0.15);

  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;   /* app default */
  --text-md:  14px;
  --text-lg:  15px;
  --text-xl:  18px;
  --text-2xl: 22px;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.5;

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

  /* --------------------------------------------------------
     SPACING SCALE (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;

  /* --------------------------------------------------------
     RADIUS
     -------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-pill: 99px;
  --radius-full: 50%;

  /* --------------------------------------------------------
     SHADOWS
     -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px var(--overlay-black-04);
  --shadow-md: 0 1px 3px var(--overlay-black-06), 0 1px 2px var(--overlay-black-04);
  --shadow-lg: 0 4px 6px -1px var(--overlay-black-08), 0 2px 4px -1px var(--overlay-black-04);
  --shadow-xl: 0 20px 60px var(--overlay-black-15);

  /* --------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------- */
  --z-base:     1;
  --z-header:   50;
  --z-sidebar:  100;
  --z-dropdown: 1000;
  --z-fab:      1040;
  --z-modal:    1050;
  --z-toast:    9998;
  --z-spinner:  9999;

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.3s ease;

  /* --------------------------------------------------------
     FOCUS RING (accessibility)
     -------------------------------------------------------- */
  --focus-ring-color: var(--brand-600);
  --focus-ring-shadow: 0 0 0 3px var(--overlay-brand-10);
  --focus-ring-width: 2px;
}