/**
 * DESIGN TOKENS — Botánica Cálida
 * ─────────────────────────────────────────────────────────────────
 * Este archivo es la fuente única para colores, tipografía, espaciado
 * y transiciones. Para cambiar la paleta de toda la marca, edita
 * únicamente los valores en :root.
 */

:root {
	/* ── Paleta ────────────────────────────────────────────────── */
	--c-rose-900:  #6E2130;
	--c-rose-800:  #8A3648;
	--c-rose-700:  #B04759;   /* primary */
	--c-rose-500:  #D68B99;
	--c-rose-300:  #EEC4CC;
	--c-rose-100:  #FBE7EB;

	--c-forest-900: #1B3227;
	--c-forest-700: #2F4F3E;  /* accent */
	--c-forest-500: #4A6B58;
	--c-forest-300: #8FA898;

	--c-cream-100: #FBF7F0;   /* fondo suave */
	--c-cream-200: #F5EFE6;   /* fondo por defecto */
	--c-cream-300: #EBE2D3;

	--c-ink-900:   #2A1E1E;   /* texto principal */
	--c-ink-700:   #4B3F3F;
	--c-ink-500:   #6B5D5D;
	--c-ink-300:   #A69A9A;

	--c-line:      #E5DDD1;
	--c-white:     #FFFFFF;
	--c-black:     #000000;

	--c-success:   #6B8E5A;
	--c-warning:   #C89B3C;
	--c-error:     #C74848;

	/* ── Roles semánticos ─────────────────────────────────────── */
	--color-bg:            var(--c-cream-200);
	--color-bg-alt:        var(--c-cream-100);
	--color-bg-invert:     var(--c-ink-900);
	--color-surface:       var(--c-white);
	--color-surface-alt:   var(--c-cream-100);

	--color-text:          var(--c-ink-900);
	--color-text-muted:    var(--c-ink-500);
	--color-text-invert:   var(--c-cream-100);
	--color-text-brand:    var(--c-rose-700);

	--color-primary:       var(--c-rose-700);
	--color-primary-hover: var(--c-rose-800);
	--color-primary-soft:  var(--c-rose-100);

	--color-accent:        var(--c-forest-700);
	--color-accent-hover:  var(--c-forest-900);

	--color-border:        var(--c-line);
	--color-border-strong: var(--c-ink-300);

	/* ── Tipografía ────────────────────────────────────────────── */
	--font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
	--font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono:  ui-monospace, "SFMono-Regular", Menlo, monospace;

	--fs-3xs: 0.6875rem;   /* 11 */
	--fs-2xs: 0.75rem;     /* 12 */
	--fs-xs:  0.8125rem;   /* 13 */
	--fs-sm:  0.9375rem;   /* 15 */
	--fs-base:1rem;        /* 16 */
	--fs-md:  1.125rem;    /* 18 */
	--fs-lg:  1.375rem;    /* 22 */
	--fs-xl:  1.75rem;     /* 28 */
	--fs-2xl: 2.25rem;     /* 36 */
	--fs-3xl: 3rem;        /* 48 */
	--fs-4xl: 4rem;        /* 64 */
	--fs-hero: clamp(2.5rem, 6vw + 1rem, 6rem);

	--lh-tight: 1.1;
	--lh-snug:  1.3;
	--lh-base:  1.55;
	--lh-loose: 1.75;

	--fw-light:  300;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semi:   600;
	--fw-bold:   700;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide:  0.04em;
	--tracking-wider: 0.12em;
	--tracking-widest: 0.24em;

	/* ── Espaciado ────────────────────────────────────────────── */
	--sp-0:   0;
	--sp-1:   0.25rem;
	--sp-2:   0.5rem;
	--sp-3:   0.75rem;
	--sp-4:   1rem;
	--sp-5:   1.5rem;
	--sp-6:   2rem;
	--sp-7:   2.5rem;
	--sp-8:   3rem;
	--sp-9:   4rem;
	--sp-10:  5rem;
	--sp-12:  6rem;
	--sp-16:  8rem;
	--sp-20:  10rem;

	/* ── Contenedor y layout ─────────────────────────────────── */
	--container-max:   1440px;
	--container-narrow: 960px;
	--container-wide:  1600px;
	--container-x:     clamp(1rem, 4vw, 3rem);
	--header-height:   84px;
	--header-height-scrolled: 64px;

	/* ── Radios ──────────────────────────────────────────────── */
	--radius-none:  0;
	--radius-xs:    2px;
	--radius-sm:    4px;
	--radius-md:    8px;
	--radius-lg:    16px;
	--radius-xl:    24px;
	--radius-full:  9999px;

	/* ── Sombras ─────────────────────────────────────────────── */
	--shadow-xs: 0 1px 2px rgba(42, 30, 30, 0.04);
	--shadow-sm: 0 2px 8px rgba(42, 30, 30, 0.06);
	--shadow-md: 0 8px 24px rgba(42, 30, 30, 0.08);
	--shadow-lg: 0 20px 48px rgba(42, 30, 30, 0.12);
	--shadow-glow: 0 0 0 4px var(--c-rose-100);

	/* ── Transiciones ─────────────────────────────────────────── */
	--ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast:     150ms;
	--dur-base:     250ms;
	--dur-slow:     400ms;
	--dur-page:     500ms;

	/* ── Z-index ─────────────────────────────────────────────── */
	--z-header:      100;
	--z-mega:        110;
	--z-drawer:      200;
	--z-modal:       300;
	--z-toast:       400;
	--z-max:         9999;
}