/* ============================================================
CSS CUSTOM PROPERTIES — DESIGN TOKENS
============================================================ */
:root {
  /* Colors */
  --primary: #2563EB;
  --primary-dark: #1D4EDB;
  --primary-light: #EFF6FF;
  --success: #16A34A;
  --success-light: #F0FDF4;
  --success-text: #166534;
  --success-border: #BBF7D0;
  --warning: #F59E0B;
  --warning-light: #FFFBEB;
  --warning-text: #92400E;
  --warning-border: #FDE68A;
  --danger: #EF4444;
  --danger-light: #FEF2F2;
  --danger-text: #991B1B;
  --danger-border: #FECACA;
  --info-text: #1E40AF;
  --info-border: #BFDBFE;

  /* Neutrals */
  --n900: #0F172A;
  --n800: #1E293B;
  --n700: #334155;
  --n600: #475569;
  --n500: #64748B;
  --n400: #94A3B8;
  --n300: #CBD5E1;
  --n200: #E2E8F0;
  --n100: #F1F5F9;
  --n50: #F8FAFC;
  --white: #FFFFFF;

  /* Brand CTA Buy */
  --cta-buy: #FF5722;
  --cta-buy-dark: #E64A19;
  --cta-buy-darker: #D84315;
  --cta-buy-rgb: 255, 87, 34;

  /* Indigo & Status Waiting */
  --indigo-light: #EEF2FF;
  --indigo-dark: #4338CA;
  --indigo-dot: #6366F1;
  --status-waiting-bg: var(--indigo-light);
  --status-waiting-text: var(--indigo-dark);
  --status-waiting-dot: var(--indigo-dot);

  /* Surface Soft Primary (To prevent visual drift from --primary-light which is #EFF6FF) */
  --surface-primary-soft: #F0F7FF;

  /* Hero Gradient & Accent */
  --hero-bg-start: #0F172A;
  --hero-bg-mid: #1E3A8A;
  --hero-bg-end: #1D4EDB;
  --hero-accent-light: #93C5FD;
  --hero-accent: #60A5FA;

  /* RGB Values for Shadows & Overlays */
  --primary-rgb: 37, 99, 235;
  --success-rgb: 22, 163, 74;
  --danger-rgb: 239, 68, 68;
  --n900-rgb: 15, 23, 42;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --border-swatch: rgba(var(--black-rgb), 0.07);


  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 28px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .09), 0 4px 8px rgba(0, 0, 0, .05);
  --shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), .18);
}