/**
 * TripLink Design Tokens — Phase 0
 * Source of truth for all surfaces: Passenger, Driver, Admin
 * Do not introduce arbitrary values outside this system.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ——— Brand: Deep TripLink Purple ——— */
  --tl-purple-50: #F6F3FF;
  --tl-purple-100: #EDE7FE;
  --tl-purple-200: #D9CFFC;
  --tl-purple-300: #B9A6F7;
  --tl-purple-400: #9374EE;
  --tl-purple-500: #6F4AE0;
  --tl-purple-600: #5A35C9;
  --tl-purple-700: #4A2AA8;
  --tl-purple-800: #3B2186;
  --tl-purple-900: #2D1966;
  --tl-purple-950: #1C0F42;

  /* ——— Brand: TripLink Orange ——— */
  --tl-orange-50: #FFF7ED;
  --tl-orange-100: #FFEDD5;
  --tl-orange-200: #FED7AA;
  --tl-orange-300: #FDBA74;
  --tl-orange-400: #FB923C;
  --tl-orange-500: #F97316;
  --tl-orange-600: #EA580C;
  --tl-orange-700: #C2410C;
  --tl-orange-800: #9A3412;
  --tl-orange-900: #7C2D12;

  /* ——— Semantic ——— */
  --tl-success-50: #ECFDF5;
  --tl-success-100: #D1FAE5;
  --tl-success-500: #10B981;
  --tl-success-600: #059669;
  --tl-success-700: #047857;
  --tl-success-fg: #065F46;

  --tl-warning-50: #FFFBEB;
  --tl-warning-100: #FEF3C7;
  --tl-warning-500: #F59E0B;
  --tl-warning-600: #D97706;
  --tl-warning-700: #B45309;
  --tl-warning-fg: #92400E;

  --tl-danger-50: #FEF2F2;
  --tl-danger-100: #FEE2E2;
  --tl-danger-500: #EF4444;
  --tl-danger-600: #DC2626;
  --tl-danger-700: #B91C1C;
  --tl-danger-fg: #991B1B;

  --tl-info-50: #EFF6FF;
  --tl-info-100: #DBEAFE;
  --tl-info-500: #3B82F6;
  --tl-info-600: #2563EB;
  --tl-info-700: #1D4ED8;
  --tl-info-fg: #1E40AF;

  /* ——— Neutral ——— */
  --tl-neutral-0: #FFFFFF;
  --tl-neutral-25: #FCFCFD;
  --tl-neutral-50: #F8F9FB;
  --tl-neutral-100: #F1F3F7;
  --tl-neutral-200: #E4E7EE;
  --tl-neutral-300: #CDD2DD;
  --tl-neutral-400: #9AA3B2;
  --tl-neutral-500: #6B7280;
  --tl-neutral-600: #4B5563;
  --tl-neutral-700: #374151;
  --tl-neutral-800: #1F2937;
  --tl-neutral-900: #111827;
  --tl-neutral-950: #0B1220;

  /* ——— Aliases ——— */
  --tl-color-bg: #F8F7F5;
  --tl-color-surface: #FFFFFF;
  --tl-color-surface-raised: #FFFFFF;
  --tl-color-border: #E9E6EC;
  --tl-color-border-strong: var(--tl-neutral-300);
  --tl-color-text: #15131A;
  --tl-color-text-secondary: #6F6A75;
  --tl-color-text-muted: var(--tl-neutral-400);
  --tl-color-text-inverse: #FFFFFF;
  --tl-color-primary: #4B168C;
  --tl-color-primary-hover: #3A1170;
  --tl-color-primary-active: #2D1966;
  --tl-color-primary-subtle: var(--tl-purple-50);
  --tl-color-primary-muted: var(--tl-purple-100);
  --tl-color-accent: #F36C21;
  --tl-color-accent-hover: #D95A14;
  --tl-color-accent-subtle: var(--tl-orange-50);
  --tl-color-focus: var(--tl-purple-500);
  --tl-color-sos: var(--tl-danger-600);
  --tl-color-verified: var(--tl-success-600);
  --tl-color-escrow-held: var(--tl-warning-600);
  --tl-color-escrow-released: var(--tl-success-600);

  /* ——— Severity ——— */
  --tl-severity-info: var(--tl-info-500);
  --tl-severity-warning: var(--tl-warning-500);
  --tl-severity-high: var(--tl-orange-600);
  --tl-severity-critical: var(--tl-danger-600);

  /* ——— Business states ——— */
  --tl-state-pending: var(--tl-warning-600);
  --tl-state-verified: var(--tl-success-600);
  --tl-state-rejected: var(--tl-danger-600);
  --tl-state-cancelled: var(--tl-neutral-500);
  --tl-state-expired: var(--tl-neutral-400);
  --tl-state-completed: var(--tl-success-700);
  --tl-state-failed: var(--tl-danger-700);
  --tl-state-in-progress: var(--tl-info-600);
  --tl-state-awaiting: var(--tl-orange-600);
  --tl-state-suspended: var(--tl-danger-500);
  --tl-state-under-review: var(--tl-purple-600);

  /* ——— Typography ——— */
  --tl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tl-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --tl-fw-regular: 400;
  --tl-fw-medium: 500;
  --tl-fw-semibold: 600;
  --tl-fw-bold: 700;

  --tl-text-display-lg: 40px / 48px;
  --tl-text-display-md: 32px / 40px;
  --tl-text-display-sm: 28px / 36px;
  --tl-text-h1: 24px / 32px;
  --tl-text-h2: 20px / 28px;
  --tl-text-h3: 18px / 26px;
  --tl-text-h4: 16px / 24px;
  --tl-text-body-lg: 16px / 24px;
  --tl-text-body-md: 14px / 20px;
  --tl-text-body-sm: 13px / 18px;
  --tl-text-label-lg: 14px / 20px;
  --tl-text-label-md: 13px / 18px;
  --tl-text-label-sm: 12px / 16px;
  --tl-text-caption: 12px / 16px;
  --tl-text-overline: 11px / 14px;
  --tl-text-button-lg: 16px / 24px;
  --tl-text-button-md: 14px / 20px;
  --tl-text-button-sm: 13px / 18px;
  --tl-text-numeric-lg: 28px / 36px;
  --tl-text-numeric-md: 18px / 26px;
  --tl-text-numeric-sm: 14px / 20px;

  /* ——— Spacing (8px base) ——— */
  --tl-space-0: 0px;
  --tl-space-0-5: 4px;
  --tl-space-1: 8px;
  --tl-space-1-5: 12px;
  --tl-space-2: 16px;
  --tl-space-3: 24px;
  --tl-space-4: 32px;
  --tl-space-5: 40px;
  --tl-space-6: 48px;
  --tl-space-8: 64px;
  --tl-space-10: 80px;
  --tl-space-12: 96px;

  /* ——— Sizing ——— */
  --tl-touch-min: 44px;
  --tl-icon-xs: 12px;
  --tl-icon-sm: 16px;
  --tl-icon-md: 20px;
  --tl-icon-lg: 24px;
  --tl-icon-xl: 32px;
  --tl-avatar-xs: 24px;
  --tl-avatar-sm: 32px;
  --tl-avatar-md: 40px;
  --tl-avatar-lg: 56px;
  --tl-avatar-xl: 80px;
  --tl-control-sm: 32px;
  --tl-control-md: 40px;
  --tl-control-lg: 48px;
  --tl-bottom-nav-h: 64px;
  --tl-admin-sidebar-w: 264px;
  --tl-admin-sidebar-collapsed-w: 72px;
  --tl-sos-size: 56px;

  /* ——— Radius (restrained) ——— */
  --tl-radius-none: 0px;
  --tl-radius-xs: 4px;
  --tl-radius-sm: 6px;
  --tl-radius-md: 8px;
  --tl-radius-lg: 12px;
  --tl-radius-xl: 16px;
  --tl-radius-2xl: 20px;
  --tl-radius-full: 9999px;

  /* ——— Borders ——— */
  --tl-border-hairline: 1px;
  --tl-border-thin: 1.5px;
  --tl-border-medium: 2px;
  --tl-border-thick: 3px;

  /* ——— Shadows / Elevation ——— */
  --tl-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --tl-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --tl-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
  --tl-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12), 0 4px 8px rgba(17, 24, 39, 0.06);
  --tl-shadow-xl: 0 24px 48px rgba(17, 24, 39, 0.16);
  --tl-shadow-focus: 0 0 0 3px rgba(111, 74, 224, 0.35);
  --tl-shadow-sos: 0 0 0 4px rgba(220, 38, 38, 0.25);
  --tl-shadow-map: 0 8px 24px rgba(28, 15, 66, 0.18);

  /* ——— Opacity ——— */
  --tl-opacity-disabled: 0.4;
  --tl-opacity-muted: 0.64;
  --tl-opacity-hover: 0.04;
  --tl-opacity-pressed: 0.08;
  --tl-opacity-scrim: 0.48;
  --tl-opacity-map-dim: 0.72;

  /* ——— Motion ——— */
  --tl-duration-instant: 0ms;
  --tl-duration-fast: 120ms;
  --tl-duration-normal: 200ms;
  --tl-duration-moderate: 280ms;
  --tl-duration-slow: 400ms;
  --tl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tl-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --tl-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --tl-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* ——— Breakpoints (reference; use in media queries) ——— */
  --tl-bp-sm: 480px;
  --tl-bp-md: 768px;
  --tl-bp-lg: 1024px;
  --tl-bp-xl: 1280px;
  --tl-bp-2xl: 1440px;

  /* ——— Z-index ——— */
  --tl-z-base: 0;
  --tl-z-raised: 10;
  --tl-z-sticky: 100;
  --tl-z-map-controls: 150;
  --tl-z-bottom-nav: 200;
  --tl-z-sheet: 300;
  --tl-z-dropdown: 400;
  --tl-z-overlay: 500;
  --tl-z-modal: 600;
  --tl-z-toast: 700;
  --tl-z-safety: 800;
  --tl-z-sos: 900;
  --tl-z-max: 999;

  /* ——— Map ——— */
  --tl-map-route-planned: var(--tl-purple-600);
  --tl-map-route-actual: var(--tl-info-600);
  --tl-map-route-deviation: var(--tl-danger-600);
  --tl-map-marker-driver: var(--tl-purple-800);
  --tl-map-marker-passenger: var(--tl-orange-500);
  --tl-map-marker-pickup: var(--tl-success-600);
  --tl-map-marker-destination: var(--tl-danger-600);
  --tl-map-route-planned-w: 4px;
  --tl-map-route-actual-w: 5px;
  --tl-map-route-deviation-w: 5px;

  /* ——— Grid ——— */
  --tl-gutter: var(--tl-space-2);
  --tl-page-margin: var(--tl-space-2);
  --tl-max-width: 1280px;
  --tl-admin-max-width: 1440px;
}

@media (min-width: 768px) {
  :root {
    --tl-gutter: var(--tl-space-3);
    --tl-page-margin: var(--tl-space-3);
  }
}

@media (min-width: 1024px) {
  :root {
    --tl-page-margin: var(--tl-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tl-duration-fast: 0.01ms;
    --tl-duration-normal: 0.01ms;
    --tl-duration-moderate: 0.01ms;
    --tl-duration-slow: 0.01ms;
  }
}