/**
 * tokens.css - Design System Variables
 * Part of Web Admin UI Design System
 */

:root {
  /* Color — semantic (Deep Indigo Theme) */
  --color-primary: #6366f1;
  --color-primary-rgb: 99, 102, 241;
  --color-primary-dark: #4f46e5;
  --color-primary-light: #eef2ff;
  --color-success: #10b981;
  --color-success-rgb: 16, 185, 129;
  --color-warning: #f59e0b;
  --color-warning-rgb: 245, 158, 11;
  --color-danger:  #ef4444;
  --color-danger-rgb: 239, 68, 68;
  --color-info:    #0ea5e9;
  --color-info-rgb: 14, 165, 233;

  /* Color — neutral */
  --color-bg:        #f8fafc;   /* page bg */
  --color-surface:   #ffffff;   /* card / panel bg */
  --color-surface-2: #f1f5f9;   /* nested / hover */
  --color-border:    #e2e8f0;
  --color-text:      #0f172a;
  --color-text-soft: #475569;
  --color-muted:     #94a3b8;

  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 12px;

  /* Spacing — 4px scale */
  --sp-0: 0;   --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;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  /* Typography — size */
  --font-sans: 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, Monaco, monospace;
  --fs-xs: 0.75rem;   --fs-sm: 0.875rem; --fs-md: 1rem;
  --fs-lg: 1.125rem;  --fs-xl: 1.25rem;  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem; --fs-4xl: 2.25rem;

  /* Typography — weight */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700;    --fw-extrabold: 800;

  /* Line height */
  --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.75;

  /* Shadow */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0 0 0 / 0.1), 0 10px 10px -5px rgba(0 0 0 / 0.04);

  /* Transition */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Z-index scale */
  --z-base: 1; --z-sticky: 100; --z-dropdown: 500;
  --z-modal: 1000; --z-toast: 2000;

  /* Layout */
  --container-max: 1400px;
  --sidebar-w: 288px;
}

/* Dark Mode Overrides */
[data-theme="dark"] {
  --color-bg: #0f172a;             /* slate-900 */
  --color-surface: #1e293b;        /* slate-800 */
  --color-surface-2: #334155;
  --color-border: #334155;
  --color-muted: #94a3b8;
  --color-text: #f1f5f9;
  --color-text-soft: #cbd5e1;
  --color-primary-light: #1e3a8a;

  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5);
}