/* ============================================================
   Testoria — Design tokens
   Variables CSS semánticas, compatibles con shadcn/ui.
   Tema claro en :root; oscuro en .dark y vía prefers-color-scheme
   (salvo que el documento fuerce .light).
   ============================================================ */

:root {
  color-scheme: light;

  /* — Marca: azul tinta — */
  --primary: #1E3A8A;
  --primary-hover: #1A337C;
  --primary-active: #152A67;
  --primary-foreground: #FFFFFF;
  --accent: #E9EEFA;               /* fondo suave de marca (selección, tab activa) */
  --accent-foreground: #1E3A8A;
  --ring: #1E3A8A;

  /* — Neutros fríos — */
  --background: #F5F6F8;
  --foreground: #161B23;
  --card: #FFFFFF;
  --card-foreground: #161B23;
  --popover: #FFFFFF;
  --popover-foreground: #161B23;
  --secondary: #ECEEF2;
  --secondary-foreground: #303845;
  --muted: #EFF1F4;
  --muted-foreground: #5C6573;
  --border: #E0E4EA;
  --input: #C9CFD9;
  --destructive: #B3261E;          /* errores de formulario/sistema (≠ rojo de corrección) */
  --destructive-foreground: #FFFFFF;

  /* — Semánticos de corrección (RESERVADOS: solo acierto/fallo/en blanco) — */
  --correct: #157347;
  --correct-bg: #E9F5EF;
  --correct-border: #A7D6BD;
  --incorrect: #B02A37;
  --incorrect-bg: #FBEDEE;
  --incorrect-border: #E8B7BC;
  --blank: #5C6573;
  --blank-bg: #EFF1F4;
  --blank-border: #C9CFD9;

  /* — Extracto-documento (única superficie cálida del sistema) — */
  --official-paper: #FBF7EC;
  --official-paper-foreground: #40382A;
  --official-paper-border: #EADFC6;
  --official-accent: #1E3A8A;      /* sello y borde izquierdo */

  /* — Guiño de oposición (llega como dato; SOLO distintivo/chip) — */
  --oposicion: #2F6547;            /* Guardia Civil: verde bosque */

  /* — Gráfica — */
  --chart-1: #1E3A8A;
  --chart-1-soft: #C9D6F1;
  --chart-grid: #E6E9EE;

  /* — Tipografía — */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-serif: "Literata", Georgia, serif;
  --text-display: 40px;  --leading-display: 1.1;
  --text-h1: 26px;       --leading-h1: 1.25;
  --text-h2: 20px;       --leading-h2: 1.3;
  --text-h3: 17px;       --leading-h3: 1.4;
  --text-body: 15.5px;   --leading-body: 1.55;
  --text-official: var(--text-body); --leading-official: 1.75; /* Literata, mismo cuerpo que el texto de la plataforma */
  --text-sm: 13.5px;     --leading-sm: 1.45;
  --text-caption: 12px;  --leading-caption: 1.35;
  --tabular: "tnum" 1, "lnum" 1;   /* font-feature-settings para stats y contadores */

  /* — Espaciado (base 4) — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* — Radios — */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* — Sombras — */
  --shadow-sm: 0 1px 2px rgba(22, 27, 35, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 27, 35, 0.08);
  --shadow-modal: 0 16px 48px rgba(22, 27, 35, 0.22);
}

.dark {
  color-scheme: dark;
  --primary: #8EABEF;
  --primary-hover: #A4BCF3;
  --primary-active: #7E9DE6;
  --primary-foreground: #101523;
  --accent: #1C2740;
  --accent-foreground: #A4BCF3;
  --ring: #8EABEF;
  --background: #0E1116;
  --foreground: #E6EAF1;
  --card: #151A22;
  --card-foreground: #E6EAF1;
  --popover: #1A2029;
  --popover-foreground: #E6EAF1;
  --secondary: #222936;
  --secondary-foreground: #D2D8E2;
  --muted: #1B212B;
  --muted-foreground: #96A0B0;
  --border: #29303C;
  --input: #39424F;
  --destructive: #E5695F;
  --destructive-foreground: #1A0F0E;
  --correct: #6CC998;
  --correct-bg: #122A1D;
  --correct-border: #2C5A41;
  --incorrect: #EE8E96;
  --incorrect-bg: #331A1E;
  --incorrect-border: #6B3038;
  --blank: #96A0B0;
  --blank-bg: #1B212B;
  --blank-border: #39424F;
  --official-paper: #211C12;       /* papel nocturno: cálido y digno, no un gris más */
  --official-paper-foreground: #E6DCC4;
  --official-paper-border: #3B3420;
  --official-accent: #8EABEF;
  --oposicion: #63A97F;
  --chart-1: #8EABEF;
  --chart-1-soft: #2C3A5C;
  --chart-grid: #232A35;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --primary: #8EABEF;
    --primary-hover: #A4BCF3;
    --primary-active: #7E9DE6;
    --primary-foreground: #101523;
    --accent: #1C2740;
    --accent-foreground: #A4BCF3;
    --ring: #8EABEF;
    --background: #0E1116;
    --foreground: #E6EAF1;
    --card: #151A22;
    --card-foreground: #E6EAF1;
    --popover: #1A2029;
    --popover-foreground: #E6EAF1;
    --secondary: #222936;
    --secondary-foreground: #D2D8E2;
    --muted: #1B212B;
    --muted-foreground: #96A0B0;
    --border: #29303C;
    --input: #39424F;
    --destructive: #E5695F;
    --destructive-foreground: #1A0F0E;
    --correct: #6CC998;
    --correct-bg: #122A1D;
    --correct-border: #2C5A41;
    --incorrect: #EE8E96;
    --incorrect-bg: #331A1E;
    --incorrect-border: #6B3038;
    --blank: #96A0B0;
    --blank-bg: #1B212B;
    --blank-border: #39424F;
    --official-paper: #211C12;
    --official-paper-foreground: #E6DCC4;
    --official-paper-border: #3B3420;
    --official-accent: #8EABEF;
    --oposicion: #63A97F;
    --chart-1: #8EABEF;
    --chart-1-soft: #2C3A5C;
    --chart-grid: #232A35;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}