/* ============================================================
 * tokens.css — Iron Route GPS v2.5 · Brand TruckerProfit
 * Single source of truth: palette + typography + spacing + motion
 * Owner: Cowork v25 build | 2026-05-02
 * ============================================================ */
:root {
  /* === BRAND PALETTE === */
  --color-navy-900:       #030D1C;   /* Primary canvas, headlines */
  --color-navy-800:       #0A1428;
  --color-navy-700:       #1A2440;
  --color-navy-600:       #2A3552;
  --color-gold-500:       #D4A84B;   /* Brand accent */
  --color-gold-400:       #E0B86A;
  --color-gold-600:       #B89438;
  --color-gold-700:       #8C6F1F;

  /* === SEMANTIC === */
  --color-bg:             var(--color-navy-900);
  --color-bg-elev:        #0A1024;
  --color-bg-card:        #0F1730;
  --color-surface:        #131C36;
  --color-text:           #E8ECF5;
  --color-text-muted:     #9DA8C2;
  --color-text-on-gold:   var(--color-navy-900);
  --color-border:         rgba(212,168,75,0.18);
  --color-border-strong:  rgba(212,168,75,0.4);
  --color-accent:         var(--color-gold-500);
  --color-accent-hover:   var(--color-gold-400);
  --color-accent-active:  var(--color-gold-600);

  /* === STATUS === */
  --color-success:        #2EAB6F;
  --color-warning:        #E8B14A;
  --color-danger:         #D9534F;
  --color-info:           #4A9FE8;

  /* === TYPOGRAPHY === */
  --font-display: 'Syne', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1:    clamp(2rem, 4vw, 2.75rem);
  --fs-h2:    clamp(1.5rem, 3vw, 2rem);
  --fs-h3:    1.25rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-tiny:  0.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-display: 700; /* Syne uses bold weights */

  --lh-tight:  1.15;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* === SPACING === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* === RADII === */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* === SHADOWS === */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.45);
  --shadow-gold: 0 0 0 1px rgba(212,168,75,0.5), 0 4px 12px rgba(212,168,75,0.18);

  /* === MOTION === */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-emphasized: cubic-bezier(.2,.8,.2,1);
  --dur-fast:     120ms;
  --dur-normal:   240ms;
  --dur-slow:     420ms;

  /* === LAYOUT === */
  --header-h:     56px;
  --sidebar-w:    380px;
  --sidebar-w-mobile: 100vw;
  --touch-min:    48px;
  --touch-driver: 64px;     /* Driver-mode tap targets, mejor que iOS HIG min */
}

/* === DARK FALLBACK (default since Iron Route is dark by default) === */
@media (prefers-color-scheme: light) {
  :root {
    /* Iron Route mantiene UX dark para reducir glare en cabin nocturno */
    /* No light theme; keep dark */
  }
}

/* === BASE TYPOGRAPHY === */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* === BUTTONS BASE === */
.btn-primary {
  background: var(--color-gold-500);
  color: var(--color-text-on-gold);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  min-height: var(--touch-min);
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover { background: var(--color-gold-400); }
.btn-primary:active { background: var(--color-gold-600); transform: translateY(1px); }
.btn-primary:focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 3px; }

/* === FOCUS RING (a11y) === */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-gold-400);
  outline-offset: 2px;
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === DRIVER MODE (HUD) === */
[data-mode="hud"] {
  --fs-body: 1.25rem;
  --fs-small: 1rem;
  --touch-min: var(--touch-driver);
}
[data-mode="hud"] h1 { font-size: 3rem; }
[data-mode="hud"] body { letter-spacing: 0.02em; }