/* ============================================================
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 :
============================================================ */
: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: #FDF5F1; /* 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: 2.75rem;
--fs-h1: 1.875rem;
--fs-h2: 1.375rem;
--fs-h3: 1.125rem;
--fs-body: 0.9375rem;
--fs-small: 0.8125rem;
--fs-label: 0.6875rem;
/* 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: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* ---- Radios ---- */
--radius-sm: 0.625rem; /* chips, elementos chicos */
--radius: 1rem; /* botones, tarjetas, campos */
--radius-lg: 1.5rem; /* 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: #0C1612;
--color-surface: #15231C;
--color-surface-2: #1B2C24;
--color-ink: #F3EFE4;
--color-ink-2: #C3CBBF;
--color-ink-3: #8A968C;
--color-line: #25382E;
--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: #0C1612;
--color-surface: #15231C;
--color-surface-2: #1B2C24;
--color-ink: #F3EFE4;
--color-ink-2: #C3CBBF;
--color-ink-3: #8A968C;
--color-line: #25382E;
--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);
}
/* ============================================================
Marca Dedominio: tokens de la pantalla del curso (verde + rosa).
Mismos valores en claro y en oscuro (dos bloques, como arriba).
============================================================ */
:root {
--dd-fondo: #FDF5F1;
--dd-fondo-2: #FBEDE3;
--dd-superficie: #FEFAF6; /* tarjetas y barra inferior */
--dd-borde: #F0E4D8;
--dd-sombra: rgb(90 55 20 / 0.12);
--dd-anillo: #FFFFFF; /* anillo de los nodos */
--dd-tinta: #002312; /* titulos */
--dd-texto: #4F4E44; /* textos secundarios */
--dd-verde: #015731; /* banner de unidad */
--dd-sendero: #0B5A36;
--dd-blob-1: #BAD59B; /* formas decorativas del fondo */
--dd-blob-2: #0B6B3D;
--dd-rosa: #F54577;
--dd-rosa-2: #E02C67;
--dd-rosa-suave: #FEE2E2;
--dd-rosa-suave-2: #FFF4F1;
--dd-oro: #FFC21A;
--dd-bloqueada: #B9A57A;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--dd-fondo: #0C1612;
--dd-fondo-2: #09110E;
--dd-superficie: #14231B;
--dd-borde: #25392E;
--dd-sombra: rgb(0 0 0 / 0.45);
--dd-anillo: #1F3328;
--dd-tinta: #F3EFE4;
--dd-texto: #B4BEB1;
--dd-sendero: #5DBE8A;
--dd-blob-1: #123C2A;
--dd-blob-2: #0A2A1D;
--dd-rosa: #FF5C8A;
--dd-rosa-2: #E8336F;
--dd-rosa-suave: #3A1F2D;
--dd-rosa-suave-2: #2B1822;
--dd-bloqueada: #8D7F5E;
}
}
:root[data-theme="dark"] {
--dd-fondo: #0C1612;
--dd-fondo-2: #09110E;
--dd-superficie: #14231B;
--dd-borde: #25392E;
--dd-sombra: rgb(0 0 0 / 0.45);
--dd-anillo: #1F3328;
--dd-tinta: #F3EFE4;
--dd-texto: #B4BEB1;
--dd-sendero: #5DBE8A;
--dd-blob-1: #123C2A;
--dd-blob-2: #0A2A1D;
--dd-rosa: #FF5C8A;
--dd-rosa-2: #E8336F;
--dd-rosa-suave: #3A1F2D;
--dd-rosa-suave-2: #2B1822;
--dd-bloqueada: #8D7F5E;
}