/* ============================================================
   Sistema de Diseño — App de Estudio del Evangelio (Sacravia)
   Tokens de diseño · v0.1
   ------------------------------------------------------------
   Variables CSS para color, tipografía, espaciado, radios,
   elevación y transiciones. Importar este archivo antes que
   cualquier otro CSS del proyecto.

   Fuentes (Google Fonts) — incluir en el <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">
   ============================================================ */

:root {
  /* ---- Marca: ámbar cálido ---- */
  --color-amber:        #F59324;  /* acento principal */
  --color-amber-deep:   #D97309;  /* hover / presionado / texto sobre fondo claro */
  --color-amber-soft:   #FEF0DC;  /* fondos suaves de acento */
  --color-amber-ring:   #FBD79E;  /* bordes y anillos de foco */
  --color-sobre-acento: #FFFFFF;  /* texto/iconos sobre fondos de acento (ambar, verde): blanco en modo claro */

  /* ---- Semánticos de gamificación (NO son el acento) ---- */
  --color-correct:      #34A853;  /* respuesta correcta */
  --color-correct-soft: #E4F5E7;
  --color-wrong:        #E23D3D;  /* respuesta incorrecta */
  --color-wrong-soft:   #FBE4E4;
  --color-streak:       #FF6B35;  /* racha / fuego — solo para rachas */
  --color-xp:           #7C5CE6;  /* experiencia / niveles */
  --color-xp-soft:      #EDE8FB;

  /* ---- Neutros (leve sesgo cálido) ---- */
  --color-bg:        #FBF8F4;  /* lienzo de la app */
  --color-surface:   #FFFFFF;  /* tarjetas, superficies */
  --color-surface-2: #F4EFE8;  /* superficies secundarias / rellenos */
  --color-ink:       #241E17;  /* texto principal */
  --color-ink-2:     #6E6459;  /* texto secundario */
  --color-ink-3:     #A79C8E;  /* texto terciario / placeholders */
  --color-line:      #EAE1D5;  /* bordes y divisores */

  /* componentes de sombra (RGB, para rgba()) */
  --shadow-rgb: 18 20 15;

  /* ---- Tipografía ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica */
  --fs-display: 44px;
  --fs-h1:      30px;
  --fs-h2:      22px;
  --fs-h3:      18px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-label:   11px;

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* ---- Espaciado (escala de 4px) ---- */
  --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;

  /* ---- Radios ---- */
  --radius-sm:   10px;  /* chips, elementos chicos */
  --radius:      16px;  /* botones, tarjetas, campos */
  --radius-lg:   24px;  /* contenedores grandes, modales */
  --radius-pill: 999px; /* píldoras, barras de progreso */

  /* ---- Elevación ---- */
  --elev-1: 0 1px 3px rgba(var(--shadow-rgb) / 0.12);  /* tarjetas */
  --elev-2: 0 6px 16px rgba(var(--shadow-rgb) / 0.14); /* menús, popovers */
  --elev-3: 0 14px 34px rgba(var(--shadow-rgb) / 0.18);/* modales */

  /* ---- Transiciones ---- */
  --t-fast: 0.12s ease;
  --t-base: 0.15s ease;
  --t-press: 0.06s ease;

  /* ---- Ancho de contenido ---- */
  --content-max: 760px;
}

/* ============================================================
   MODO OSCURO
   Dos bloques con los MISMOS valores: uno sigue la preferencia
   del sistema, el otro responde al toggle manual.
   Solo se redefinen los colores; el resto de tokens no cambia.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-amber:        #FBA94C;
    --color-amber-deep:   #F59324;
    --color-amber-soft:   #3A2A14;
    --color-amber-ring:   #6B4A1E;
    --color-sobre-acento: #241E17;  /* en modo oscuro el acento es mas claro: texto oscuro */
    --color-correct:      #5DD27C;
    --color-correct-soft: #1C3222;
    --color-wrong:        #FF6B6B;
    --color-wrong-soft:   #3A1E1E;
    --color-streak:       #FF8355;
    --color-xp:           #A78BFA;
    --color-xp-soft:      #2A2340;
    --color-bg:        #16130F;
    --color-surface:   #211C16;
    --color-surface-2: #2C261E;
    --color-ink:       #F4EEE4;
    --color-ink-2:     #BDB2A2;
    --color-ink-3:     #857A6C;
    --color-line:      #352E25;
    --shadow-rgb: 0 0 0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-amber:        #FBA94C;
  --color-amber-deep:   #F59324;
  --color-amber-soft:   #3A2A14;
  --color-amber-ring:   #6B4A1E;
  --color-sobre-acento: #241E17;  /* en modo oscuro el acento es mas claro: texto oscuro */
  --color-correct:      #5DD27C;
  --color-correct-soft: #1C3222;
  --color-wrong:        #FF6B6B;
  --color-wrong-soft:   #3A1E1E;
  --color-streak:       #FF8355;
  --color-xp:           #A78BFA;
  --color-xp-soft:      #2A2340;
  --color-bg:        #16130F;
  --color-surface:   #211C16;
  --color-surface-2: #2C261E;
  --color-ink:       #F4EEE4;
  --color-ink-2:     #BDB2A2;
  --color-ink-3:     #857A6C;
  --color-line:      #352E25;
  --shadow-rgb: 0 0 0;
  color-scheme: dark;
}

/* ============================================================
   Base mínima (opcional) — aplica el fondo y la tipografía
   de la app. Quitar si ya tenés tu propio reset.
   ============================================================ */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}