/* Tokens de DESIGN.md (Mediterráneo Virtual), por nombre. Único archivo con valores
   literales de color, tipografía, espaciado y radios: los componentes (app.css) solo
   usan var(--…). */

/* Fuentes de DESIGN.md servidas desde /estaticos/fuentes/ (licencia en fuentes/OFL.txt):
   nunca por red. Sin el archivo, cae a system-ui / ui-monospace (ver --font-*). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/estaticos/fuentes/Inter-400.woff2") format("woff2");
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/estaticos/fuentes/Inter-600.woff2") format("woff2");
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/estaticos/fuentes/IBMPlexMono-400.woff2") format("woff2");
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/estaticos/fuentes/IBMPlexMono-600.woff2") format("woff2");
}

:root {
  /* colors */
  --color-surface-base: #FAF9F4;
  --color-surface-raised: #FFFFFF;
  --color-border-hairline: #E7E5E4;
  --color-ink-primary: #1C1917;
  --color-ink-secondary: #6B655E;
  --color-ink-disabled: #A8A29E;
  --color-sidebar-base: #18181B;
  --color-sidebar-text: #F4F4F5;
  --color-sidebar-text-muted: #8E8E93;
  /* Fondo del ítem activo del sidebar (Story 1.8b): apenas más claro que sidebar-base. */
  --color-sidebar-active-bg: #27272A;
  --color-accent-rust: #C2410C;
  --color-focus-ring: var(--color-accent-rust);
  --color-focus-ring-on-dark: var(--color-sidebar-text);
  --color-action-primary: #18181B;
  --color-action-primary-text: #FFFFFF;
  --color-impact-alto-bg: #FDE8E8;
  --color-impact-alto-text: #B42318;
  --color-impact-medio-bg: #FEF0E1;
  --color-impact-medio-text: #9A5B13;
  --color-impact-bajo-bg: #E3EEFB;
  --color-impact-bajo-text: #2554A3;
  --color-status-ok: #16A34A;
  --color-status-danger: #DC2626;
  --color-status-pending: #78716C;
  --color-status-stale-bg: #FEF0E1;
  --color-status-stale-text: #9A5B13;
  --color-chart-primary: #3F3F46;
  --color-chart-threshold: #DC2626;
  --color-demo-bar-bg: #FEF3C7;
  --color-demo-bar-border: #FDE68A;
  --color-demo-bar-text: #92400E;

  /* typography (fuentes locales, @font-face arriba: nunca se cargan por red) */
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  --font-sans: 'Inter', system-ui, sans-serif;
  --eyebrow-font-size: 11px;
  --eyebrow-letter-spacing: 0.06em;
  --eyebrow-font-weight: 600;
  --stat-value-font-size: 28px;
  --stat-value-font-weight: 600;
  --body-font-size: 14px;
  --body-line-height: 1.5;
  --code-font-size: 13px;
  /* Título de la banda de encabezado y de sección (Story 1.8b). */
  --page-title-font-size: 20px;
  --section-title-font-size: 16px;

  /* rounded */
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-full: 9999px;

  /* spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-gutter: var(--spacing-6);

  /* foco y layout */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --border-width-hairline: 1px;
  --sidebar-width: 280px;
  --nav-icon-size: 16px;
  --nav-active-border-width: 3px;
  /* Giro del chevron de un grupo de área (Story 5.5); reduced motion lo anula. */
  --transition-short: 150ms;
  --login-width: 360px;
  --admin-form-width: 560px;
  --disabled-opacity: 0.4;
  --solo-lector-size: 1px;
  /* Lugar que se reserva arriba al llevar el foco o un ancla bajo la barra de demo
     sticky (WCAG 2.4.11); cubre hasta dos líneas de barra. */
  --demo-bar-reserva: 4rem;
}