/* /assets/js/styles/base/variables.css
 * Design tokens v2.0 — mxAURA Design System
 * Single source of truth for colors, typography, spacing, and component sizes.
 * Phase 1: Modern bold aesthetic — Inter + Slate neutrals + Indigo primary
 */

:root {
  /* ================================================================
     TYPOGRAPHY
     ================================================================ */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;

  /* Type scale — 4px grid aligned */
  --text-display: 32px;    /* Dashboard hero metrics */
  --text-h1: 24px;         /* Page titles */
  --text-h2: 20px;         /* Section headers, card group titles */
  --text-h3: 16px;         /* Card titles, table group headers */
  --text-body: 14px;       /* Default body text, form labels */
  --text-body-sm: 13px;    /* Table cells, secondary info */
  --text-caption: 12px;    /* Badges, metadata, timestamps */
  --text-overline: 11px;   /* Section labels (uppercase tracking) */

  /* Line heights */
  --leading-display: 40px;
  --leading-h1: 32px;
  --leading-h2: 28px;
  --leading-h3: 24px;
  --leading-body: 20px;
  --leading-body-sm: 18px;
  --leading-caption: 16px;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ================================================================
     COLOR PALETTE — Slate neutrals + semantic accents
     ================================================================ */

  /* --- Neutrals (Slate scale) --- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* --- Primary (Indigo) --- */
  --primary-50:  #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-300: #A5B4FC;
  --primary-400: #818CF8;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;
  --primary-700: #4338CA;

  /* --- Semantic: Success (Green) --- */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-500: #22C55E;
  --success-600: #16A34A;
  --success-700: #166534;

  /* --- Semantic: Warning (Amber) --- */
  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #92400E;

  /* --- Semantic: Error (Red) --- */
  --error-50:  #FEF2F2;
  --error-100: #FEE2E2;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-700: #991B1B;

  /* --- Semantic: Info (Blue) --- */
  --info-50:  #EFF6FF;
  --info-100: #DBEAFE;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1E40AF;

  /* --- Data visualization palette --- */
  --chart-1: #6366F1;
  --chart-2: #06B6D4;
  --chart-3: #8B5CF6;
  --chart-4: #F59E0B;
  --chart-5: #EC4899;
  --chart-6: #10B981;
  --chart-7: #F97316;
  --chart-8: #64748B;

  /* ================================================================
     SEMANTIC ALIASES (backward compat + convenience)
     ================================================================ */

  /* Brand */
  --mm-primary: var(--primary-500);
  --mm-primary-hover: var(--primary-600);
  --mm-navy: #0b1a33;
  --mm-navy-light: #1a3a6e;

  /* Text */
  --mm-text-primary: var(--slate-900);
  --mm-text-secondary: var(--slate-600);
  --mm-text-tertiary: var(--slate-500);
  --mm-text-muted: var(--slate-400);
  --mm-text-placeholder: var(--slate-400);

  /* Borders & Backgrounds */
  --mm-border: var(--slate-200);
  --mm-border-light: var(--slate-100);
  --mm-bg-white: #FFFFFF;
  --mm-bg-page: var(--slate-50);
  --mm-bg-subtle: var(--slate-50);
  --mm-bg-muted: var(--slate-100);
  --mm-bg-hover: var(--slate-100);

  /* Semantic */
  --mm-success: var(--success-600);
  --mm-success-bg: var(--success-50);
  --mm-danger: var(--error-600);
  --mm-danger-light: var(--error-500);
  --mm-danger-bg: var(--error-50);
  --mm-warning: var(--warning-500);
  --mm-warning-bg: var(--warning-100);
  --mm-info: var(--info-600);
  --mm-info-bg: var(--info-50);

  /* Disabled */
  --mm-disabled-bg: var(--slate-300);
  --mm-disabled-opacity: 0.4;

  /* ================================================================
     SPACING — 4px base 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;

  /* ================================================================
     SURFACES & SHADOWS
     ================================================================ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-float: 0 12px 36px rgba(0, 0, 0, 0.16);

  /* ================================================================
     COMPONENT TOKENS
     ================================================================ */

  /* Buttons */
  --btn-height: 36px;
  --btn-height-sm: 30px;
  --btn-height-lg: 44px;
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--text-body);
  --btn-font-weight: var(--weight-medium);

  /* Inputs */
  --input-height: 38px;
  --input-radius: var(--radius-md);
  --input-border: var(--slate-200);
  --input-focus-ring: var(--primary-300);

  /* Tables */
  --table-row-height: 48px;
  --table-row-compact: 36px;
  /* One step darker than the page surface so header rows read as a band
     rather than dissolving into the card. Every table and card header in the
     app resolves to this - change it here, nowhere else. */
  --table-header-bg: var(--slate-100);
  --table-header-color: var(--slate-400);
  --table-header-font: var(--text-caption);
  --table-header-weight: var(--weight-semibold);
  --table-border: var(--slate-200);
  --table-hover: var(--slate-50);
  --table-selected: var(--primary-50);

  /* Cards */
  --card-bg: var(--mm-bg-white);
  --card-border: var(--slate-200);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-6);

  /* Badges */
  --badge-height: 24px;
  --badge-radius: var(--radius-full);
  --badge-font-size: var(--text-caption);
  --badge-font-weight: var(--weight-medium);
  --badge-dot-size: 6px;
  --badge-padding: 4px 10px;

  /* Toggle (unchanged) */
  --mm-toggle-width: 36px;
  --mm-toggle-height: 20px;
  --mm-toggle-knob: 14px;
  --mm-toggle-offset: 3px;
  --mm-toggle-travel: 16px;

  /* ================================================================
     TRANSITIONS
     ================================================================ */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;
}