/* ==========================================================================
   FL Academy — Tokens de diseño (clonados de franlledo.com)
   Modo oscuro por defecto (marca). Modo claro opcional con [data-theme=light].
   ========================================================================== */

/* ---- Fuentes self-hosted ---- */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/inter-tight-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: dark;

	/* Tipografía */
	--font-display: "Fraunces", Georgia, serif;
	--font-sans: "Inter Tight", system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* Acento (rojo de marca) */
	--color-accent: #e11d2e;
	--color-accent-hover: #c4162a;
	--color-accent-soft: #e11d2e1f; /* 12% alpha */

	/* Superficies (oscuro) */
	--color-bg: #0a0a0a;
	--color-surface: #151515;
	--color-surface-alt: #151515;
	--color-surface-elevated: #1c1c1c;
	--color-header-bg: #0a0a0ad9; /* 85% */

	/* Texto (oscuro) */
	--color-text: #f5f5f0;
	--color-muted: #a0a0a0;
	--color-dim: #8a8a8a;

	/* Bordes (oscuro) */
	--color-border: #262626;
	--color-border-strong: #3a3a3a;

	/* Radios */
	--radius-btn: 0.4rem;
	--radius-sm: 0.5rem;
	--radius-card: 0.6rem;

	/* Layout: max = catálogo/área privada, wide = shell de app (curso, lección,
	   header/footer), narrow = solo prosa. --measure acota la línea de lectura. */
	--container-max: 1200px;
	--container-narrow: 720px;
	--container-wide: 1440px;
	--container-pad: clamp(1.5rem, 4vw, 3rem);
	--sidebar-w: 360px;  /* índice de lecciones en la lección */
	--aside-w: 380px;    /* tarjeta de matrícula en el curso */
	--measure: 72ch;

	/* Transiciones */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="light"] {
	color-scheme: light;

	--color-accent: #d11425;
	--color-accent-hover: #a90f1d;
	--color-accent-soft: #d114251f;

	--color-bg: #faf8f3;
	--color-surface: #f0ede5;
	--color-surface-alt: #f0ede5;
	--color-surface-elevated: #e8e4d9;
	--color-header-bg: #faf8f3d1; /* ~82% */

	--color-text: #1b1b18;
	--color-muted: #56564f;
	--color-dim: #82827a;

	--color-border: #e4e0d5;
	--color-border-strong: #cdc8bb;
}