/* ==========================================================================
   FIELDVOICE AI DESIGN SYSTEM - TOKENS
   Theme: Light / White Premium Interface with Plum Magenta Accent
   Evoltrizit (70%) & FieldVoice AI (30%)
   ========================================================================== */

:root {
  /* Color Palette - Light/White Core */
  --bg-primary: #FFFFFF;
  --bg-surface: #F8F9FA;
  --bg-surface-elevated: #FFFFFF;
  --bg-surface-subtle: #F1F3F5;
  --bg-surface-alt: #E9ECEF;
  --bg-dark: #0A0A0F;
  --bg-dark-surface: #14141E;
  --bg-dark-card: #1C1D24;

  /* Accent Tokens (Plum Magenta & Electric Highlights) */
  --accent-primary: #471848;
  --accent-primary-hover: #5E2060;
  --accent-light: #F7EEF8;
  --accent-subtle: rgba(71, 24, 72, 0.08);
  --accent-border: rgba(71, 24, 72, 0.2);
  --accent-gradient: linear-gradient(135deg, #471848 0%, #7A287B 100%);
  --accent-glow: 0 0 25px rgba(71, 24, 72, 0.15);

  /* Status Colors */
  --color-success: #059669;
  --color-success-bg: #ECFDF5;
  --color-warning: #D97706;
  --color-warning-bg: #FFFBEB;
  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --color-info: #2563EB;
  --color-info-bg: #EFF6FF;

  /* Typography Colors */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --text-on-dark: #F8FAFC;
  --text-on-dark-muted: #94A3B8;
  --text-on-accent: #FFFFFF;

  /* Borders & Dividers */
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.15);
  --border-strong: rgba(15, 23, 42, 0.25);
  --border-dark: rgba(255, 255, 255, 0.1);
  --border-dark-strong: rgba(255, 255, 255, 0.2);

  /* Elevation & Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 10px -3px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
  --shadow-dark: 0 20px 40px -10px rgba(0, 0, 0, 0.5);

  /* Radius Scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Typography Scale */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Transition Speeds */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Widths */
  --container-max: 1240px;
  --container-narrow: 840px;
  --container-wide: 1400px;
}