/*
 * Tokens de diseño — Insignias digitales CCHIA (propuesta, pendiente de aprobación de la Cámara).
 * Origen de colores: muestreo del logo oficial assets/logo/Logo_CCHIA.png (ver diseno.md, sección 2).
 * Todos los pares de texto y componentes están verificados en contraste-resultados.md (WCAG 2.2 AA).
 * Sin fuentes remotas: las fuentes se autoalojan (ver diseno.md, sección 3).
 */

:root {
  /* ---------- Color base: modo claro (por defecto) ---------- */
  --color-brand: #003464;            /* azul marino del logo: titulares, botón primario */
  --color-brand-accent: #00908C;     /* teal del logo: solo gráficos, nunca texto pequeño */
  --color-brand-accent-text: #00736F;/* variante del teal para texto e insignias (verificada AA) */
  --color-brand-strong: #00243F;     /* hover de botón primario */

  --color-bg: #FFFFFF;               /* fondo de página: blanco puro, nunca crema */
  --color-surface: #EAF2F8;          /* paneles y tarjetas: azul muy pálido */
  --color-surface-raised: #FFFFFF;   /* tarjetas sobre superficie */
  --color-border: #C9D5E0;           /* separadores decorativos (no son el único indicador) */
  --color-border-strong: #6B7785;    /* borde de campo de formulario (1.4.11) */

  --color-text: #1F2A37;             /* texto principal */
  --color-text-muted: #4B5767;       /* texto secundario, metadatos */
  --color-link: #0B5CAD;             /* enlaces en texto */
  --color-focus: #003464;            /* anillo de foco visible */

  --color-primary-text: #FFFFFF;     /* texto sobre --color-brand */
  --color-secondary-bg: #00736F;     /* botón secundario */
  --color-secondary-text: #FFFFFF;

  /* Estados de la verificación pública y mensajes */
  --color-valid: #0B6B3A;
  --color-valid-bg: #E3F4EA;
  --color-revoked: #A4262C;
  --color-revoked-bg: #FBE9EA;
  --color-expired: #7A4E00;
  --color-expired-bg: #FCF1DC;
  --color-notfound: #4B5767;
  --color-notfound-bg: #EEF1F4;

  --color-danger: #A4262C;           /* error de formulario, acción irreversible */
  --color-danger-text-on: #FFFFFF;   /* texto sobre --color-danger */

  /* ---------- Tipografía ---------- */
  --font-heading: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.875rem;   /* 14px: metadatos, nunca para texto de acción */
  --fs-sm: 1rem;       /* 16px: mínimo para texto de lectura y campos */
  --fs-base: 1.125rem; /* 18px: cuerpo en la página de verificación */
  --fs-md: 1.25rem;    /* 20px */
  --fs-lg: 1.5rem;     /* 24px: texto grande (umbral 3:1) */
  --fs-xl: 1.875rem;   /* 30px: titular de sección */
  --fs-2xl: 2.25rem;   /* 36px: titular de página, escritorio */

  --lh-body: 1.6;
  --lh-heading: 1.2;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Espaciado (base 4px) ---------- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px: margen lateral mínimo en 360px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ---------- Radios: sin píldoras ---------- */
  --radius-sm: 4px;    /* campos, insignias de estado */
  --radius-md: 6px;    /* botones y tarjetas */
  --radius-lg: 8px;    /* paneles grandes; máximo permitido */

  /* ---------- Sombras: mínimas; la separación se hace con borde ---------- */
  --shadow-1: 0 1px 2px rgba(0, 25, 50, 0.08);
  --shadow-2: 0 4px 12px rgba(0, 25, 50, 0.10);

  /* ---------- Foco y tamaño de objetivo ---------- */
  --focus-width: 3px;
  --focus-offset: 2px;
  --target-min: 44px;  /* WCAG 2.5.8 mínimo 24px; usamos 44px por uso con dedos */

  /* ---------- Ancho de lectura ---------- */
  --measure: 40rem;    /* ~65 caracteres */
  --container: 60rem;
}

/* Modo oscuro: automático según el sistema, salvo que la página fuerce el claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand: #8FD3FF;
    --color-brand-accent: #4FD1C9;
    --color-brand-accent-text: #4FD1C9;
    --color-brand-strong: #BDE7FF;

    --color-bg: #0C1B2A;
    --color-surface: #15283C;
    --color-surface-raised: #15283C;
    --color-border: #2E4259;
    --color-border-strong: #7D8FA3;

    --color-text: #E6EEF6;
    --color-text-muted: #A9B8C8;
    --color-link: #8FD3FF;
    --color-focus: #8FD3FF;

    --color-primary-text: #04141F;     /* botón primario oscuro: texto oscuro sobre teal */
    --color-secondary-bg: #4FD1C9;
    --color-secondary-text: #04141F;

    --color-valid: #7BE0A6;
    --color-valid-bg: #123524;
    --color-revoked: #FF9B94;
    --color-revoked-bg: #3A1C1E;
    --color-expired: #F5C96A;
    --color-expired-bg: #3A2F12;
    --color-notfound: #A9B8C8;
    --color-notfound-bg: #1B2A3A;

    --color-danger: #FF9B94;
    --color-danger-text-on: #04141F;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-brand: #8FD3FF;
  --color-brand-accent: #4FD1C9;
  --color-brand-accent-text: #4FD1C9;
  --color-brand-strong: #BDE7FF;

  --color-bg: #0C1B2A;
  --color-surface: #15283C;
  --color-surface-raised: #15283C;
  --color-border: #2E4259;
  --color-border-strong: #7D8FA3;

  --color-text: #E6EEF6;
  --color-text-muted: #A9B8C8;
  --color-link: #8FD3FF;
  --color-focus: #8FD3FF;

  --color-primary-text: #04141F;
  --color-secondary-bg: #4FD1C9;
  --color-secondary-text: #04141F;

  --color-valid: #7BE0A6;
  --color-valid-bg: #123524;
  --color-revoked: #FF9B94;
  --color-revoked-bg: #3A1C1E;
  --color-expired: #F5C96A;
  --color-expired-bg: #3A2F12;
  --color-notfound: #A9B8C8;
  --color-notfound-bg: #1B2A3A;

  --color-danger: #FF9B94;
  --color-danger-text-on: #04141F;

  color-scheme: dark;
}

/* Movimiento: duracion base; con movimiento reducido no hay transiciones */
:root {
  --motion-duration: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
  }
}