/* ==========================================================================
   variables.css — Identidad gráfica: ule educativo
   Todas las custom properties del sistema de diseño.
   ========================================================================== */

:root {
  /* ---------- Color base ---------- */
  --color-principal: #058A41;
  --color-secundario: #63372C;
  --color-fondo-claro: #fdfdff;
  --color-fondo-oscuro: #1E352F;
  --color-texto-claro: #282828;
  --color-texto-oscuro: #c3d4d0;

  /* Fondos de card */
  --color-card-claro: #F7F3EB;          /* tono hueso / piedra clara */
  --color-card-oscuro: #162A25;         /* gris muy oscuro, ligeramente más profundo que el fondo */

  /* Texto sobre cards */
  --color-titulo-card: var(--color-principal-texto);
  --color-cuerpo-card-claro: #2C2C2C;   /* contraste AA sobre #F7F3EB */
  --color-cuerpo-card-oscuro: #D0DDD9;  /* contraste AA sobre #162A25 */

  /* Verde para TEXTO y para rellenos con texto blanco.
     --color-principal (#058A41) queda para elementos decorativos/rellenos
     sin texto: sólo alcanza 4.38:1 sobre el fondo claro y 4.02:1 sobre la
     card clara (AA exige 4.5:1), y 2.9:1 sobre el fondo oscuro. Estos tokens
     conservan el mismo tono pero cumplen AA en ambos temas. */
  --color-principal-texto: #047538;     /* claro: 5.7:1 sobre fondo, 5.3:1 sobre card */
  --color-principal-accion: #047538;    /* fondo de botones con texto blanco: 5.9:1 */
  --color-principal-accion-hover: #046B32; /* hover de botones (6.7:1 con texto blanco, en ambos temas) */

  /* Estados de link */
  --color-link: var(--color-principal-texto);
  --color-link-hover: #046B32;          /* 6.5:1 sobre fondo claro */
  --color-link-visitado: #4A6B5A;
  --color-link-focus: var(--color-principal-texto);

  /* Paleta fija de badges — Periodo */
  --badge-periodo-preclasico: #8B5E3C;
  --badge-periodo-clasico: #A0601F;    /* antes #C17A3A (3.4:1 con texto blanco); ahora 5.0:1 */
  --badge-periodo-posclasico: #5C3A21;

  /* Paleta fija de badges — Cultura */
  --badge-cultura-olmeca: #3A5F4A;
  --badge-cultura-golfo: #4A7A6A;
  --badge-cultura-cacaxtla: #6B4A3A;
  --badge-cultura-maya: #2E5A4A;
  --badge-cultura-azteca: #5A3A2A;

  /* Paleta — tipo de juego / región / superficie / material (contraste AA con texto blanco) */
  --badge-tipo-cadera: #2F6B4F;
  --badge-tipo-mazo: #7A4E2A;
  --badge-tipo-antebrazo: #3D5A6B;
  --badge-region-sinaloa: #1F6B5C;
  --badge-region-michoacan: #6B3A4A;
  --badge-superficie-tierra: #8B6B3C;
  --badge-superficie-cemento: #5A6A6E;
  --badge-material-piedra: #5C5A52;
  --badge-material-ceramica: #8B5A3C;
  --badge-material-obsidiana: #3A3A48;
  --badge-material-piedra-caliza: #6A6E5C;

  /* ---------- Tipografía ---------- */
  --font-principal: "Ubuntu", system-ui, sans-serif;
  --font-anotaciones: "Helvetica", Arial, sans-serif;

  /* Escala tipográfica — mobile first */
  --fs-h1: 1.75rem;          /* 28px */
  --fs-h2: 1.375rem;         /* 22px */
  --fs-h3: 1.125rem;         /* 18px */
  --fs-cuerpo: 1rem;         /* 16px */
  --fs-anotacion: 0.875rem;  /* 14px */
  --lh-cuerpo: 1.6;
  --lh-titulo: 1.25;

  /* ---------- Bordes, radios y espaciado ---------- */
  --radius-sm: 0.375rem;     /* 6px — badges, botones pequeños */
  --radius-md: 0.75rem;      /* 12px — cards */
  --radius-lg: 1rem;         /* 16px — contenedores grandes */
  --radius-pill: 999px;      /* píldora */

  --space-xs: 0.25rem;       /* 4px */
  --space-sm: 0.5rem;        /* 8px */
  --space-md: 1rem;          /* 16px */
  --space-lg: 1.5rem;        /* 24px */
  --space-xl: 2.5rem;        /* 40px */
  --space-2xl: 4rem;         /* 64px */

  /* Sombras ligeras */
  --shadow-card-claro: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-oscuro: 0 2px 10px rgba(0, 0, 0, 0.35);

  /* ---------- Breakpoints (referencia; se usan en media queries) ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- Tema por defecto (modo claro) ---------- */
  --color-fondo: var(--color-fondo-claro);
  --color-texto: var(--color-texto-claro);
  --color-card: var(--color-card-claro);
  --color-cuerpo-card: var(--color-cuerpo-card-claro);
  --shadow-card: var(--shadow-card-claro);
  --color-icono: var(--color-principal);
}

/* ---------- Tema oscuro ---------- */
:root[data-theme="dark"] {
  --color-fondo: var(--color-fondo-oscuro);
  --color-texto: var(--color-texto-oscuro);
  --color-card: var(--color-card-oscuro);
  --color-cuerpo-card: var(--color-cuerpo-card-oscuro);
  --shadow-card: var(--shadow-card-oscuro);
  --color-icono: var(--color-texto-oscuro);

  /* Verde legible sobre fondo/card oscuros (≥ 6:1) */
  --color-principal-texto: #4CC57F;
  --color-link-hover: #8BE5B3;
  --color-link-visitado: #8FB8A3;       /* el verde apagado claro daba 2.2:1 sobre oscuro */
}

/* ---------- Desktop typography (≥ 768px) ---------- */
@media (min-width: 768px) {
  :root {
    --fs-h1: 2.25rem;        /* 36px */
    --fs-h2: 1.75rem;        /* 28px */
    --fs-h3: 1.25rem;        /* 20px */
    --fs-cuerpo: 1.0625rem;  /* 17px */
  }
}