/*
 * Cielo de Margaritas — Design Tokens v0.12
 * Mobile first.
 *
 * Colores base extraídos de la paleta visual compartida:
 * P.271  RGB 152 154 201 -> #989AC9
 * P.210  RGB 230 164 196 -> #E6A4C4
 * P.2368 RGB 95 96 163   -> #5F60A3
 * P.2254 RGB 180 212 182 -> #B4D4B6
 * Plata  RGB 188 204 216 -> #BCCCD8
 *
 * Cream e Ink son tonos digitales auxiliares y pueden ajustarse.
 */

:root {
	/* Brand */
	--cielo-lavender: #989ac9;
	--cielo-pink: #e6a4c4;
	--cielo-violet: #5f60a3;
	--cielo-mint: #b4d4b6;
	--cielo-silver: #bcccd8;
	--cielo-black: #000000;

	/* Digital supporting neutrals */
	--cielo-cream: #f7f1e8;
	--cielo-cream-soft: #fbf8f3;
	--cielo-ink: #2f2d4a;
	--cielo-white: #fffdf9;

	/* Semantic */
	--cielo-bg: var(--cielo-cream-soft);
	--cielo-text: var(--cielo-ink);
	--cielo-accent: var(--cielo-pink);
	--cielo-focus: var(--cielo-violet);

	/* Type — actual font files can be connected later */
	--cielo-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--cielo-font-body: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Fluid type */
	--cielo-fs-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
	--cielo-fs-sm: clamp(0.88rem, 0.84rem + 0.18vw, 0.98rem);
	--cielo-fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
	--cielo-fs-lead: clamp(1.08rem, 1rem + 0.45vw, 1.35rem);
	--cielo-fs-h3: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
	--cielo-fs-h2: clamp(2rem, 1.55rem + 2.2vw, 3.5rem);
	--cielo-fs-h1: clamp(2.45rem, 1.8rem + 3.2vw, 5.4rem);

	/* Space */
	--cielo-space-1: 0.5rem;
	--cielo-space-2: 0.75rem;
	--cielo-space-3: 1rem;
	--cielo-space-4: 1.5rem;
	--cielo-space-5: 2rem;
	--cielo-space-6: 3rem;
	--cielo-space-7: 4.5rem;
	--cielo-space-8: 7rem;

	/* Layout */
	--cielo-shell: 78rem;
	--cielo-reading: 42rem;
	--cielo-gutter: clamp(1.25rem, 5vw, 4rem);


	/* Editorial rhythm — v0.12 */
	--cielo-section-tight: clamp(2.75rem, 7vw, 4.5rem);
	--cielo-section-normal: clamp(3.75rem, 9vw, 6.5rem);
	--cielo-section-wide: clamp(5rem, 12vw, 8.5rem);
	--cielo-block-gap: clamp(1.25rem, 3vw, 2.25rem);
	--cielo-flow-gap: clamp(2.5rem, 7vw, 5.25rem);

	/* Reading / component widths */
	--cielo-copy-narrow: 31rem;
	--cielo-copy-wide: 42rem;

	/* Optical radii */
	--cielo-radius-photo: clamp(1.25rem, 3vw, 2.1rem);
	--cielo-radius-ui: 1rem;

	/* Radius */
	--cielo-radius-sm: 0.8rem;
	--cielo-radius-md: 1.4rem;
	--cielo-radius-lg: 2.25rem;
	--cielo-radius-pill: 999px;

	/* Shadow */
	--cielo-shadow-soft: 0 1.2rem 3.5rem rgba(47, 45, 74, 0.12);
	--cielo-shadow-card: 0 1rem 3rem rgba(47, 45, 74, 0.14);

	/* Motion */
	--cielo-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--cielo-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--cielo-motion-fast: 420ms;
	--cielo-motion-normal: 820ms;
	--cielo-motion-slow: 1600ms;
}