/* ========================================
   ASTROVIA DESIGN TOKENS - CORE
   Single Source of Truth
   Version: 3.0.0 - Calm Unified System
   ======================================== */

:root {
  /* ========================================
     COLOR PRIMITIVES - NEUTRAL SCALE
     ======================================== */
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFBFC;
  --neutral-100: #F4F6F8;
  --neutral-150: #EEF1F5;
  --neutral-200: #E5E8ED;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  --neutral-950: #0A0A0B;

  /* ========================================
     COLOR PRIMITIVES - ASTROVIA BLUE
     ======================================== */
  --blue-50: #EEF3FF;
  --blue-100: #DCE6FF;
  --blue-200: #B8CCFF;
  --blue-300: #7FA8FF;
  --blue-400: #4D7EF7;
  --blue-500: #1F51F6;
  --blue-600: #1A45D9;
  --blue-700: #1539B8;
  --blue-800: #102D8F;
  --blue-900: #0C2270;

  /* ========================================
     COLOR PRIMITIVES - PURPLE (AUTO-PAY, PREMIUM)
     ======================================== */
  --purple-50: #F3E8FF;
  --purple-100: #EDE9FE;
  --purple-200: #DDD6FE;
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;
  --purple-500: #7C3AED;
  --purple-600: #6D28D9;
  --purple-700: #5B21B6;

  /* ========================================
     SEMANTIC TOKENS - BACKGROUNDS
     ======================================== */
  --bg-app: var(--neutral-100);
  --bg-primary: #FAFBFF;
  --bg-surface: var(--neutral-0);
  --bg-surface-subtle: var(--neutral-50);
  --bg-surface-muted: var(--neutral-100);
  --bg-interactive: var(--blue-50);
  --bg-interactive-hover: var(--blue-100);
  --bg-input: var(--neutral-50);
  --bg-input-focus: var(--neutral-0);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-hover: rgba(255, 255, 255, 0.85);

  /* ========================================
     SEMANTIC TOKENS - TEXT
     ======================================== */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-500);
  --text-tertiary: var(--neutral-400);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-brand: var(--blue-500);
  --text-link: var(--blue-500);
  --text-link-hover: var(--blue-600);
  --text-disabled: var(--neutral-400);
  --text-placeholder: var(--neutral-400);

  /* ========================================
     SEMANTIC TOKENS - DISABLED STATES
     ======================================== */
  --bg-disabled: var(--neutral-100);
  --border-disabled: var(--neutral-200);
  --opacity-disabled: 0.5;

  /* ========================================
     SEMANTIC TOKENS - BORDERS
     Refined for better contrast against off-white backgrounds
     Phase 1 Polish: Increased to 10% for clear card separation
     ======================================== */
  --border-default: var(--neutral-200);
  --border-subtle: rgba(0, 0, 0, 0.10);         /* 10% opacity - cards clearly separate from background */
  --border-muted: var(--neutral-150);
  --border-strong: var(--neutral-300);
  --border-focus: var(--blue-500);
  --border-accent: rgba(31, 81, 246, 0.2);
  --border-hover: rgba(31, 81, 246, 0.15);      /* Brand-tinted hover state */
  
  /* Card-specific borders - stronger for clear separation */
  --border-card: rgba(0, 0, 0, 0.10);           /* Visible card edge */
  --border-card-hover: rgba(31, 81, 246, 0.25); /* Brand-tinted hover strengthens border */

  /* ========================================
     SEMANTIC TOKENS - STATUS COLORS
     Complete green family for unified success/trust states
     ======================================== */
  /* Success Green Family - Unified for Enrolled, Connected, Verified, Completed */
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-bg: #ECFDF5;
  --success-border: transparent;
  --success-text: #059669;
  --success-dark: #059669;
  --success-light: #ECFDF5;
  --success-tint: #ECFDF5;
  --success-icon: var(--success-600);
  --success-gradient: linear-gradient(135deg, var(--success-tint) 0%, rgba(34, 197, 94, 0.08) 100%);
  --success-border-accent: rgba(34, 197, 94, 0.2);
  --success-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);

  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --warning-text: #92400E;
  --warning-icon: #F59E0B;

  --error-bg: #FEF2F2;
  --error-border: #FECACA;
  --error-text: #991B1B;
  --error-icon: #EF4444;

  --info-bg: var(--blue-50);
  --info-border: var(--blue-200);
  --info-text: var(--blue-700);
  --info-icon: var(--blue-500);

  /* ========================================
     RADIUS SCALE - UNIFIED
     ======================================== */
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-hero: 20px;
  --radius-full: 9999px;
  
  /* Component-specific radius aliases */
  --radius-accordion: var(--radius-lg);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-md);
  --radius-toggle: var(--radius-full);
  
  /* ========================================
     COMPONENT TOKENS - TOGGLE
     Canonical toggle switch tokens
     ======================================== */
  --toggle-width: 44px;
  --toggle-height: 24px;
  --toggle-knob-size: 18px;
  --toggle-knob-offset: 3px;
  --toggle-bg-off: var(--neutral-300);
  --toggle-bg-on: var(--blue-500); /* Astrovia blue - clean toggle state */
  
  /* ========================================
     COMPONENT TOKENS - CARD
     Unified card styling tokens
     ======================================== */
  --card-padding: var(--space-6);
  --card-padding-sm: var(--space-4);
  --card-padding-lg: var(--space-8);
  
  /* ========================================
     COMPONENT TOKENS - INPUT
     Unified input field tokens
     ======================================== */
  --input-height: 44px;
  --input-height-sm: 36px;
  --input-height-lg: 52px;
  --input-font-size: 15px;
  --input-padding-x: 14px;
  --input-padding-y: 0;
  --input-line-height: 44px;
  --dropdown-chevron-size: 16px;
  
  /* ========================================
     COMPONENT TOKENS - BUTTON
     Touch-friendly sizing (44px base = Apple HIG minimum)
     ======================================== */
  --btn-height-sm: 36px;
  --btn-height: 44px;
  --btn-height-lg: 52px;
  --btn-padding-sm: var(--space-3);
  --btn-padding: var(--space-4);
  --btn-padding-lg: var(--space-6);

  /* ========================================
     COMPONENT TOKENS - AVATAR
     Consistent avatar sizing across the app
     ======================================== */
  --avatar-xs: 24px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 56px;
  --avatar-xl: 77px;

  /* ========================================
     COMPONENT TOKENS - ICON
     Standard icon container sizes
     ======================================== */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 36px;
  --icon-xl: 48px;
  --icon-2xl: 56px;
  --icon-3xl: 80px;

  /* ========================================
     SHADOW SCALE - Apple-level, tighter and crisper
     Phase 1 Polish: Lower blur for "placed" feel, not floaty
     ======================================== */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-1-hover: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 16px 32px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);

  /* ========================================
     FOCUS RING - UNIFIED (Apple/Stripe standard)
     ======================================== */
  --focus-ring: 0 0 0 3px rgba(31, 81, 246, 0.25);
  --focus-ring-strong: 0 0 0 4px rgba(31, 81, 246, 0.35);
  --focus-ring-inset: inset 0 0 0 2px var(--blue-500);
  
  /* Blue/Brand shadow */
  --blue-shadow: 0 8px 32px rgba(31, 81, 246, 0.25);

  /* ========================================
     SPACING SCALE
     ======================================== */
  --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;
  --space-12: 48px;
  --space-16: 64px;

  /* ========================================
     TYPOGRAPHY SCALE
     ======================================== */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
  
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;
  --font-size-4xl: 36px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ========================================
     LETTER SPACING (TRACKING) - Apple standard
     ======================================== */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.08em;

  /* ========================================
     MOTION TOKENS - UNIFIED
     ======================================== */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-layout: 0.35s;

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

  /* ========================================
     LEGACY COMPATIBILITY ALIASES
     Map old token names to new tokens
     Remove after full migration
     ======================================== */
  
  /* Background aliases */
  --bg-white: var(--bg-surface);
  --bg-secondary: var(--bg-surface-subtle);
  --bg-tertiary: var(--bg-surface-muted);
  --surface-primary: var(--bg-surface);
  --surface-secondary: var(--bg-surface-subtle);
  
  /* Astrovia brand color aliases */
  --astrovia-blue: var(--blue-500);
  --astrovia-blue-hover: var(--blue-600);
  --astrovia-blue-light: var(--blue-300);
  --astrovia-blue-light-bg: var(--blue-50);
  --astrovia-blue-subtle: rgba(31, 81, 246, 0.06);
  --astrovia-blue-border: rgba(31, 81, 246, 0.15);
  --astrovia-gradient: linear-gradient(135deg, var(--blue-500) 0%, #3B5CE8 100%);
  
  /* Card aliases */
  --card-surface: var(--bg-surface);
  --card-surface-hover: var(--bg-surface-subtle);
  --card-surface-solid: var(--neutral-150);
  --card-border: var(--border-card);
  --card-border-hover: var(--border-card-hover);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);
  --card-interactive-hover-border: var(--border-card-hover);
  
  /* Border aliases */
  --border-light: var(--border-subtle);
  --border-lighter: rgba(0, 0, 0, 0.08);
  --border-medium: var(--border-strong);
  --border-glass: rgba(255, 255, 255, 0.5);
  
  /* Filter/input aliases */
  --filter-bg: var(--bg-surface);
  --filter-hover-bg: var(--blue-50);
  --filter-hover-border: var(--border-card-hover);
  --filter-hover-text: var(--blue-500);
  
  /* Spacing aliases (for legacy files) */
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-5);
  --space-xl: var(--space-6);
  --space-2xl: var(--space-8);
  
  /* Shadow aliases */
  --shadow-xs: var(--shadow-1);
  --shadow-sm: var(--shadow-1);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}