/**
 * Angel Travels Cab — design tokens (v2 — full prototype)
 * Mood board: angel-travels.figma.site
 */
:root {
  /* === Color — Sky Blue + Warm Gold === */
  --color-primary:        #0096D6;
  --color-primary-soft:   #00A3E0;
  --color-primary-light:  #E3F2FD;
  --color-accent:         #FFB300;
  --color-accent-soft:    #FFD54F;
  --color-accent-bg:      rgba(255,179,0,0.1);
  --color-surface:        #F8FBFF;
  --color-surface-2:      #EEF5FC;
  --color-surface-elevated: #ffffff;
  --color-text:           #1A2E3B;
  --color-text-muted:     #5A7A8A;
  --color-text-faint:     #8BA3B3;
  --color-border:         #D4E6F1;
  --color-border-strong:  #A8C4DC;
  --color-success:        #00BFA5;
  --color-success-bg:     #E0F7F4;
  --color-warning:        #FF9800;
  --color-warning-bg:     #FFF3E0;
  --color-danger:         #E53935;
  --color-danger-bg:      #FFEBEE;
  --color-info:           #2196F3;
  --color-info-bg:        #E3F2FD;
  --color-live:           #00C853;
  --color-live-bg:        #E8F5E9;

  /* === Gradients === */
  --grad-primary:  linear-gradient(160deg, #0096D6 0%, #0077B6 100%);
  --grad-accent:   linear-gradient(135deg, #FFB300 0%, #FFD54F 100%);
  --grad-hero:     linear-gradient(155deg, #0096D6 0%, #00A3E0 60%, #0077B6 100%);
  --grad-map:      linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);

  /* === Typography === */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --fs-hero:      clamp(1.75rem, 5vw, 2.1rem);
  --fs-h2:        1.375rem;
  --fs-title:     1.125rem;
  --fs-body:      0.9375rem;
  --fs-small:     0.8125rem;
  --fs-caption:   0.75rem;
  --lh-tight:     1.2;
  --lh-body:      1.5;

  /* === Spacing (4px 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;

  /* === Radius === */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-xs:   0 1px 4px  rgba(12,35,64,0.06);
  --shadow-card: 0 4px 24px rgba(12,35,64,0.08);
  --shadow-soft: 0 2px 12px rgba(12,35,64,0.06);
  --shadow-lg:   0 8px 40px rgba(12,35,64,0.14);
  --shadow-float:0 16px 48px rgba(12,35,64,0.20);

  /* === Transitions === */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.25,0.46,0.45,0.94);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;

  /* === Phone frame — iPhone 15 class === */
  --phone-width:  393px;
  --phone-height: 852px;
  --safe-top:    env(safe-area-inset-top,   44px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
  --nav-height:  80px;
  --header-height: 56px;
}