/* Tokens del Eng-Support Design System. Valores copiados tal cual de
   lib/documento/plantillas/estilos/*.css (fuente: el design system en Claude Design); si cambian
   allá, se copian aquí. Lo de abajo de "Tema nocturno" es propio del portal. */

:root {
  --navy-900: #00344F; --navy-800: #00446B; --navy-700: #0A5580; --navy-600: #1D6690;
  --blue-700: #007EC7; --blue-600: #0091DE; --blue-500: #00AAFF; --blue-100: #E3F4FF;
  --orange-600: #E86800; --orange-500: #FF7200; --orange-400: #FF8A2E; --orange-100: #FFE9D6;
  --brand-mark-blue: #1B4F9C;
  --white: #FFFFFF;
  --gray-950: #0B1620; --gray-900: #101E2B; --gray-800: #1B2E40; --gray-700: #2E4457;
  --gray-600: #4B6273; --gray-500: #6C8294; --gray-400: #94A7B5; --gray-300: #BECBD4;
  --gray-200: #DCE4E9; --gray-100: #EEF2F5; --gray-50: #F6F9FA;
  --success: #2E8B57; --warning: #FFC000; --danger: #D63B2F;

  --text-heading: var(--navy-900); --text-body: var(--gray-800); --text-muted: var(--gray-600); --text-inverse: var(--white);
  --surface-page: var(--white); --surface-sunken: var(--gray-50); --surface-card: var(--white); --surface-dark: var(--navy-900);
  --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--navy-800);
  --accent-primary: var(--orange-500); --accent-primary-hover: var(--orange-600);
  --accent-secondary: var(--blue-700); --accent-secondary-hover: var(--navy-800);
  --link: var(--blue-700); --link-hover: var(--navy-800);
  --focus-ring: var(--blue-500);
  --danger-surface: #FCE9E7;

  /* Geomini es la tipografía de marca; mientras lleguen los .ttf se usa Inter, igual que el design system. */
  --font-display: 'Geomini', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --text-caption: 12px; --text-small: 14px; --text-body-size: 16px; --text-lead: 18px;
  --text-h5: 20px; --text-h4: 24px; --text-h3: 32px; --text-h2: 44px;
  --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5;
  --tracking-tight: -0.02em; --tracking-wide: 0.08em; --tracking-wider: 0.16em;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --container-max: 1200px; --gutter: 24px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,52,79,0.08);
  --shadow-md: 0 4px 12px rgba(0,52,79,0.10);
  --shadow-card: 0 1px 3px rgba(0,52,79,0.08), 0 1px 2px rgba(0,52,79,0.06);
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* propio del portal: respuesta inmediata al tocar */
  --duration-fast: 120ms; --duration-base: 200ms;

  color-scheme: light;
}

/* Tema nocturno: el del sistema operativo si la persona no eligió, o el que eligió (cookie "tema"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-heading: #E8F1F7; --text-body: var(--gray-200); --text-muted: var(--gray-400);
    --surface-page: var(--gray-950); --surface-sunken: #08111A; --surface-card: var(--gray-900); --surface-dark: #021B29;
    --border-subtle: var(--gray-800); --border-default: var(--gray-700); --border-strong: var(--blue-600);
    --link: var(--blue-500); --link-hover: #7FD0FF;
    --accent-secondary: var(--blue-600);
    --danger-surface: #3A1714;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --text-heading: #E8F1F7; --text-body: var(--gray-200); --text-muted: var(--gray-400);
  --surface-page: var(--gray-950); --surface-sunken: #08111A; --surface-card: var(--gray-900); --surface-dark: #021B29;
  --border-subtle: var(--gray-800); --border-default: var(--gray-700); --border-strong: var(--blue-600);
  --link: var(--blue-500); --link-hover: #7FD0FF;
  --accent-secondary: var(--blue-600);
  --danger-surface: #3A1714;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  color-scheme: dark;
}