/* SmartLogis — tokens de marca. Generado desde tokens.json; edita tokens.json y vuelve a generar. */
@font-face { font-family: 'Archivo'; src: url('../fonts/Archivo-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-Variable.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --brand: #12355B;
  --brand-strong: #0C2744;
  --brand-soft: #E1E9F2;
  --on-brand: #FFFFFF;
  --accent: #E8A33D;
  --on-accent: #0B1B2B;
  --ai: #13796E;
  --on-ai: #FFFFFF;
  --ai-soft: #E3F2EF;
  --warn: #8A560E;
  --warn-soft: #FBEFD9;
  --danger: #B3261E;
  --danger-soft: #F8E3E1;
  --ink: #0B1B2B;
  --ink-muted: #4A5868;
  --surface-100: #F7F5F0;
  --surface-raised: #FFFFFF;
  --surface-deep: #0B1B2B;
  --on-deep: #FFFFFF;
  --border: #DCD6CA;
  --border-control: #8F887A;
  --focus: var(--brand);
  --shadow-card: 0 1px 2px rgba(11,27,43,0.06), 0 4px 12px rgba(11,27,43,0.06);
  --shadow-pop: 0 8px 28px rgba(11,27,43,0.16);
}

/* Modo oscuro: por atributo (control manual) o por preferencia del sistema */
[data-theme="dark"] {
  --brand: #6FA8DC;
  --brand-strong: #9CC4EA;
  --brand-soft: #16304D;
  --on-brand: #0A1724;
  --accent: #F0B254;
  --on-accent: #0A1724;
  --ai: #4FC3B1;
  --on-ai: #0A1724;
  --ai-soft: #10332F;
  --warn: #F0B254;
  --warn-soft: #3A2A10;
  --danger: #F28B82;
  --danger-soft: #3A1A1A;
  --ink: #ECF1F6;
  --ink-muted: #A3B1C2;
  --surface-100: #0A1724;
  --surface-raised: #11243A;
  --surface-deep: #050E17;
  --on-deep: #FFFFFF;
  --border: #22384F;
  --border-control: #6B829C;
  --focus: var(--accent);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-pop: 0 8px 28px rgba(0,0,0,0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #6FA8DC;
    --brand-strong: #9CC4EA;
    --brand-soft: #16304D;
    --on-brand: #0A1724;
    --accent: #F0B254;
    --on-accent: #0A1724;
    --ai: #4FC3B1;
    --on-ai: #0A1724;
    --ai-soft: #10332F;
    --warn: #F0B254;
    --warn-soft: #3A2A10;
    --danger: #F28B82;
    --danger-soft: #3A1A1A;
    --ink: #ECF1F6;
    --ink-muted: #A3B1C2;
    --surface-100: #0A1724;
    --surface-raised: #11243A;
    --surface-deep: #050E17;
    --on-deep: #FFFFFF;
    --border: #22384F;
    --border-control: #6B829C;
    --focus: var(--accent);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-pop: 0 8px 28px rgba(0,0,0,0.6);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Estilos tipográficos */
.text-display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.text-display-lg { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.015em; }
.text-heading-1 { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.01em; }
.text-heading-2 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; }
.text-heading-3 { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
.text-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.text-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.text-button { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.text-data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-data-sm { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; }