/**
 * Dixie Drive Go design tokens
 * Road palette: black · yellow · white (flipped per theme in theme.css)
 * Mobile-first: default values target phones; desktop overrides in layout.css
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

:root {
  /* Road brand (dark defaults, resolved in theme.css) */
  --ddg-road-yellow: #ffcc00;
  --ddg-road-yellow-hover: #e6b800;
  --ddg-road-yellow-bright: #ffe066;
  --ddg-yellow-rgb: 255, 204, 0;
  --ddg-edge-rgb: 245, 245, 245;

  --ddg-hero-bg: #0a0a0a;
  --ddg-hero-bg-end: #141414;
  --ddg-accent-gold: var(--ddg-road-yellow);
  --ddg-accent-gold-hover: var(--ddg-road-yellow-hover);
  --ddg-accent-gold-light: var(--ddg-road-yellow-bright);
  --ddg-accent-gold-muted: rgba(var(--ddg-yellow-rgb), 0.18);
  --ddg-sage: #d6d6d6;
  --ddg-sage-dark: #ffffff;
  --ddg-sage-muted: rgba(var(--ddg-edge-rgb), 0.1);
  --ddg-surface-warm: #141414;
  --ddg-surface-elevated: #1e1e1e;
  --ddg-text-on-dark: #ffffff;
  --ddg-text-muted-on-dark: #d6d6d6;
  --ddg-sheet: #0a0a0a;
  --ddg-sheet-elevated: #141414;
  --ddg-text: #ffffff;
  --ddg-text-muted: #d6d6d6;
  --ddg-border: rgba(255, 255, 255, 0.12);
  --ddg-border-on-dark: rgba(255, 255, 255, 0.14);
  --ddg-danger: #c73e3a;
  --ddg-success: var(--ddg-road-yellow);

  /* Typography */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.5rem, 5vw, 1.75rem);
  --text-2xl: clamp(1.625rem, 6vw, 2.25rem);
  --leading-tight: 1.15;
  --leading-normal: 1.5;

  /* Spacing (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  /* Radius & elevation */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-sheet: 16px 16px 0 0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 2px 14px rgba(var(--ddg-yellow-rgb), 0.28);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);

  /* Buttons (mobile tap targets) */
  --btn-h: 40px;
  --btn-h-sm: 34px;
  --btn-h-hero: 44px;
  --btn-px: 0.85rem;
  --btn-font: var(--text-base);
  --btn-font-sm: var(--text-sm);
  --btn-radius: var(--radius-md);
  --btn-fw: 600;

  /* Layout */
  --sheet-max-h: 72dvh;
  --topbar-h: 52px;
  --map-marker-route: var(--ddg-road-yellow);
  --map-marker-driver: #f5f5f5;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Legacy aliases (portal JS/CSS) */
  --uber-primary: var(--ddg-accent-gold);
  --uber-primary-dark: var(--ddg-sage-dark);
  --uber-primary-light: var(--ddg-accent-gold-light);
  --uber-accent: var(--ddg-sage-dark);
  --uber-bg: var(--ddg-surface-warm);
  --uber-surface: var(--ddg-surface-elevated);
  --uber-sheet: rgba(10, 10, 10, 0.96);
  --uber-sheet-text: var(--ddg-text-on-dark);
  --uber-text: var(--ddg-text);
  --uber-text-muted: var(--ddg-text-muted);
  --uber-success: var(--ddg-success);
  --uber-danger: var(--ddg-danger);
  --uber-online: var(--ddg-success);
  --uber-offline: var(--ddg-danger);
  --uber-radius: var(--radius-lg);
  --uber-shadow: var(--shadow-md);
  --ddg-map-route: var(--map-marker-route);
  --ddg-map-driver: var(--map-marker-driver);
}