/* Tokens del Design System Puerto Contenedores. Tema claro por defecto; oscuro opcional. */
:root{
  --surface: #F4F4F1;
  --surface-raised: #FFFFFF;
  --aluminio: #D5D8D6;
  --line: #C4C8C5;
  --ink: #15191C;
  --ink-muted: #56626B;
  --navy: #122435;
  --on-navy: #FFFFFF;
  --acero: #34495A;
  --timbre: #B04A17;
  --on-timbre: #FFFFFF;
  --timbre-soft: #FBF0E9;
  --disponible: #2F6B4A;
  --disponible-soft: #DDEEE3;
  --en-camino: #34495A;
  --en-camino-soft: #DCE4EA;
  --reservado: #45505A;
  --reservado-soft: #E4E6E4;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-plate: 6px;
  --radius-full: 9999px;
  --border-hairline: 1px;
  --border-plate: 2px;
  --shadow-float: 0 8px 24px #15191C33;
  --focus-ring: 0 0 0 2px #F4F4F1, 0 0 0 4px #B04A17;
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Tema oscuro (opcional: la landing puede quedarse solo en claro) */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --surface: #101820;
  --surface-raised: #17222C;
  --aluminio: #22303B;
  --line: #33424E;
  --ink: #EEF0EE;
  --ink-muted: #A7B2BA;
  --navy: #1E3A55;
  --on-navy: #FFFFFF;
  --acero: #8FA9BE;
  --timbre: #E0773F;
  --on-timbre: #1A0C04;
  --timbre-soft: #3A1E10;
  --disponible: #7FD1A3;
  --disponible-soft: #16301F;
  --en-camino: #A9C3D8;
  --en-camino-soft: #1B2C3A;
  --reservado: #C9D1D7;
  --reservado-soft: #26313A;
  --shadow-float: 0 8px 24px #000000b3;
  --focus-ring: 0 0 0 2px #101820, 0 0 0 4px #E0773F;
}}