:root {
  /* ── Escala de azul ── */
  --blue-50:  #eef4fa;
  --blue-100: #d7e6f4;
  --blue-200: #b0cce8;
  --blue-300: #80acd7;
  --blue-400: #5089c4;
  --blue-500: #306cb4;
  --blue-600: #2a5d9c;
  --blue-700: #244e83;
  --blue-800: #1f4069;
  --blue-900: #18304d;

  /* ── Texto ── */
  --text-strong: #0c1726;
  --text-body:   #1e3047;
  --text-muted:  #6c7894;

  /* ── Superficies ── */
  --surface-page:   #f5f7fb;
  --surface-card:   #ffffff;
  --surface-sunken: #eef1f7;

  /* ── Bordes ── */
  --border-subtle: #e1e6ef;
  --border-normal: #cdd5e3;

  /* ── Semánticos ── */
  --success:     #16a35a;
  --success-bg:  #e8f8ef;
  --warning:     #f2a312;
  --warning-bg:  #fff5e3;
  --error:       #e0413d;
  --error-bg:    #fdecec;
  --info:        #306cb4;
  --info-bg:     #eef4fa;

  /* ── Gradientes ── */
  --gradient-brand: linear-gradient(135deg, #2a5d9c 0%, #306cb4 55%, #5089c4 100%);
  --gradient-ink:   linear-gradient(150deg, #0c1726 0%, #18304d 100%);

  /* ── Sombras ── */
  --shadow-card:   0 2px 6px rgba(12,23,38,.07);
  --shadow-button: 0 10px 26px rgba(48,108,180,.34);
  --shadow-modal:  0 20px 60px rgba(12,23,38,.18);

  /* ── Radios ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 68px;
  --topbar-height: 60px;

  /* ── Tipografía ── */
  --font-display: 'Sora', sans-serif;
  --font-ui:      'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Transiciones ── */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --transition: 180ms var(--ease);

  /* ── Alias de compatibilidad ────────────────────────────────────────────────
     Hay ~106 usos repartidos en app.css/index.html/app.js que referencian nombres
     que NUNCA se definieron (--primary, --border, --surface-2, --radius…). Una
     var() sin definir no aplica NADA, así que esos estilos caían en silencio: el
     caso visible fue `.toggle-pill.active`, que quedaba con texto blanco sobre
     fondo blanco en tema claro (no se distinguía Nuevo de Usado).
     Se definen como alias en vez de reescribir los 106 usos: así quedan
     correctos en ambos temas de una sola vez. Para código NUEVO usar los tokens
     reales de arriba; estos alias existen para no romper lo ya escrito. */
  --primary:        var(--blue-500);
  --primary-50:     var(--blue-50);
  --border:         var(--border-subtle);
  --border-base:    var(--border-normal);
  --border-strong:  var(--border-normal);
  --surface:        var(--surface-card);
  --surface-2:      var(--surface-sunken);
  --surface-base:   var(--surface-card);
  --surface-raised: var(--surface-card);
  --surface-subtle: var(--surface-sunken);
  --surface-hover:  var(--surface-sunken);
  --bg-secondary:   var(--surface-sunken);
  --bg-tertiary:    var(--surface-page);
  --bg-hover:       var(--surface-sunken);
  --text:           var(--text-body);
  --text-primary:   var(--text-strong);
  --text-secondary: var(--text-muted);
  --danger:         var(--error);
  --danger-bg:      var(--error-bg);
  --warning-border: var(--warning);
  --radius:         var(--radius-md);
  --radius-full:    var(--radius-pill);

  /* ── Sistema iOS (2026-08-14) ──────────────────────────────────────────────
     Valores tomados de los que ya se validaron en el action sheet .photo-src-*
     (css/app.css) para no crear una segunda paleta paralela. Radios y curva
     son tokens NUEVOS, no reasignaciones de --radius-sm/md/lg: esos tienen
     ~755 usos y cambiarlos movería toda la app de escritorio. */
  --hairline:       rgba(60,60,67,.20);
  --tint-ios:       var(--blue-500);
  --surface-chrome: rgba(252,252,254,.86);
  --blur-chrome:    saturate(180%) blur(20px);
  --fill-1:         rgba(120,120,128,.20);
  --fill-2:         rgba(120,120,128,.16);
  --fill-3:         rgba(120,120,128,.12);
  --fill-4:         rgba(120,120,128,.08);
  --label-4:        #c7cdd9;
  --radius-ios-sm:  10px;
  --radius-ios-md:  14px;
  --radius-ios-lg:  20px;
  --ease-ios:       cubic-bezier(.32,.72,0,1);
  --transition-ios: 300ms var(--ease-ios);
  --row-h:          44px;
  --row-h-lg:       56px;

  /* ── Estados de neumático (2026-08-14) ── — antes hex crudo en .status-*
     (css/app.css), sin variante oscura. mounted/evaluation ya usaban
     --info-bg/--blue-600 y se dejan así; el resto se tokeniza aquí. */
  --status-stock-bg:            #dcfce7; --status-stock-fg:            #166534;
  --status-desarmado-bg:        #d1fae5; --status-desarmado-fg:        #065f46;
  --status-evaluation-bg:       #dbeafe; --status-evaluation-fg:       #1d4ed8;
  --status-pending-repair-bg:   #fef9c3; --status-pending-repair-fg:   #92400e;
  --status-repair-bg:           #ffedd5; --status-repair-fg:           #c2410c;
  --status-pending-retread-bg:  #ede9fe; --status-pending-retread-fg:  #6d28d9;
  --status-retread-bg:          #c4b5fd; --status-retread-fg:          #3b0764;
  --status-scrapped-bg:         #fee2e2; --status-scrapped-fg:         #dc2626;
  --status-recycling-bg:        #dfe6dc; --status-recycling-fg:        #45573f;

  /* ── Semáforo de daño G1/G2/G3 (2026-08-14) ── — unifica 3 paletas casi
     duplicadas (.dmg-grade-btn / .dmg-grade-badge / .dmg-chip-g* / .dmg-grade-G*)
     que traían hex ligeramente distintos entre sí. */
  --grade-1-bg: #fee2e2; --grade-1-fg: #b91c1c; --grade-1-border: #f87171;
  --grade-2-bg: #ffedd5; --grade-2-fg: #c2410c; --grade-2-border: #fb923c;
  --grade-3-bg: #fef9c3; --grade-3-fg: #92400e; --grade-3-border: #facc15;

  --btn-warning-bg: #f59e0b; --btn-warning-bg-hover: #d97706;
}

[data-theme="dark"] {
  --surface-page:   #0f1623;
  --surface-card:   #1a2235;
  --surface-sunken: #141d2e;
  --text-strong:    #e8edf5;
  --text-body:      #b8c4d8;
  --text-muted:     #6c7e9a;
  --border-subtle:  #243047;
  --border-normal:  #2e3d58;
  --shadow-card:    0 2px 8px rgba(0,0,0,.30);
  --shadow-modal:   0 20px 60px rgba(0,0,0,.50);

  /* ── Sistema iOS — oscuro ── */
  --hairline:       rgba(255,255,255,.13);
  --tint-ios:       #64a9ee;
  --surface-chrome: rgba(42,49,64,.88);
  --fill-1:         rgba(255,255,255,.36);
  --fill-2:         rgba(255,255,255,.32);
  --fill-3:         rgba(255,255,255,.24);
  --fill-4:         rgba(255,255,255,.18);
  --label-4:        #3a4761;

  /* ── Estados de neumático — oscuro ── */
  --status-stock-bg:            rgba(34,197,94,.18);  --status-stock-fg:            #4ade80;
  --status-desarmado-bg:        rgba(16,185,129,.18); --status-desarmado-fg:        #34d399;
  --status-evaluation-bg:       rgba(59,130,246,.20); --status-evaluation-fg:       #60a5fa;
  --status-pending-repair-bg:   rgba(245,158,11,.20); --status-pending-repair-fg:   #fbbf24;
  --status-repair-bg:           rgba(249,115,22,.20); --status-repair-fg:           #fb923c;
  --status-pending-retread-bg:  rgba(139,92,246,.20); --status-pending-retread-fg:  #a78bfa;
  --status-retread-bg:          rgba(124,58,237,.28); --status-retread-fg:          #c4b5fd;
  --status-scrapped-bg:         rgba(239,68,68,.20);  --status-scrapped-fg:         #f87171;
  --status-recycling-bg:        rgba(107,124,98,.24); --status-recycling-fg:        #a8b89c;

  /* ── Semáforo de daño — oscuro ── */
  --grade-1-bg: rgba(239,68,68,.20);  --grade-1-fg: #f87171; --grade-1-border: rgba(248,113,113,.55);
  --grade-2-bg: rgba(249,115,22,.20); --grade-2-fg: #fb923c; --grade-2-border: rgba(251,146,60,.55);
  --grade-3-bg: rgba(234,179,8,.20);  --grade-3-fg: #fbbf24; --grade-3-border: rgba(250,204,21,.55);
}

/* ── Tipografía del sistema, solo táctil (2026-08-14) ──────────────────────
   En teléfono/tablet la fuente pasa a ser la del sistema operativo (SF Pro en
   iOS, Roboto en Android): es lo que hace que el texto "se sienta" nativo, y
   además no carga tipografías web en faena. Sora se conserva para el logo y
   los títulos de marca (fijado explícito ahí, no vía --font-display). Nunca
   por ancho: la frontera del proyecto es hover/pointer. */
@media (hover: none) and (pointer: coarse) {
  :root {
    --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  }
}