/* Meca Admin UI — Design Tokens v3.0 — Light Theme */
/* All CSS custom properties. No color values in other CSS files — use vars only. */

:root {
  /* === BRAND COLORS === */
  --color-indigo: #6366f1;
  --color-indigo-hover: #4f46e5;
  --color-indigo-light: #818cf8;
  --color-indigo-50: rgba(99, 102, 241, 0.08);
  --color-indigo-100: rgba(99, 102, 241, 0.15);
  --color-indigo-200: rgba(99, 102, 241, 0.25);

  --color-cyan: #22d3ee;
  --color-cyan-dark: #0891b2;
  --color-cyan-light: #a5f3fc;
  --color-cyan-50: rgba(34, 211, 238, 0.08);
  --color-cyan-100: rgba(34, 211, 238, 0.15);

  /* === SEMANTIC COLORS === */
  --color-green: #4ade80;
  --color-green-dark: #16a34a;
  --color-green-bg: rgba(74, 222, 128, 0.1);

  --color-amber: #f59e0b;
  --color-amber-dark: #d97706;
  --color-amber-bg: rgba(245, 158, 11, 0.1);

  --color-red: #ef4444;
  --color-red-dark: #dc2626;
  --color-red-bg: rgba(239, 68, 68, 0.1);

  /* Semantic aliases */
  --color-success: var(--color-green);
  --color-success-dark: var(--color-green-dark);
  --color-success-bg: var(--color-green-bg);
  --color-warning: var(--color-amber);
  --color-warning-dark: var(--color-amber-dark);
  --color-warning-bg: var(--color-amber-bg);
  --color-error: var(--color-red);
  --color-error-dark: var(--color-red-dark);
  --color-error-bg: var(--color-red-bg);
  --color-info: var(--color-indigo);
  --color-info-bg: var(--color-indigo-50);

  /* === NEUTRALS (Slate scale) === */
  --color-navy: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;
  --color-white: #ffffff;

  /* === SURFACES (light theme) === */
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-hover: #f8fafc;
  --bg-active: rgba(99, 102, 241, 0.08);
  --bg-overlay: rgba(15, 23, 42, 0.5);
  --bg-muted: #f1f5f9;

  /* === BORDERS === */
  --border-default: #e2e8f0;
  --border-light: #f1f5f9;
  --border-focus: #6366f1;
  --border-error: #ef4444;
  --border-subtle: #f1f5f9;

  /* === TEXT (light theme — dark text on light bg) === */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-disabled: #94a3b8;
  --text-accent: #6366f1;
  --text-link: #6366f1;
  --text-on-primary: #ffffff;

  /* === GRADIENTS === */
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  --gradient-primary-hover: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%);
  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --gradient-login: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --gradient-indigo: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);

  /* === TYPOGRAPHY === */
  --font-display: 'Courier Prime', 'Courier New', Courier, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes — spec scale */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  /* Legacy aliases for existing code */
  --text-display: 48px;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-h3: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --text-micro: 11px;

  /* Font weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.7;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* === SPACING (8px grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === BORDER RADIUS === */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* === SHADOWS (light theme — softer) === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-glow-indigo: 0 0 16px rgba(99, 102, 241, 0.25);
  --shadow-glow-cyan: 0 0 16px rgba(34, 211, 238, 0.2);

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX === */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* === LAYOUT === */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --header-height: 64px;
  --content-max-width: 1200px;
  --content-padding: var(--space-6);

  /* === BREAKPOINTS (for JS reference) === */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}