/**
 * SITEBUILDER - Design Tokens
 * Complementa global.css (que ya define spacing/radius/shadow base).
 * Acá viven los tokens de la nueva capa premium: tipografía fluida,
 * paleta neutra extendida, elevación, contenedores y motion.
 */

:root {
    /* ============================================================
       TIPOGRAFÍA — familias
       ============================================================ */
    --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-number: 'Sora', var(--font-body);

    /* ============================================================
       TIPOGRAFÍA — escala fluida (clamp: mínimo, preferido, máximo)
       ============================================================ */
    --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
    --text-sm: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
    --text-lg: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
    --text-xl: clamp(1.35rem, 1.22rem + 0.5vw, 1.6rem);
    --text-2xl: clamp(1.65rem, 1.4rem + 1vw, 2.1rem);
    --text-3xl: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    --text-4xl: clamp(2.4rem, 1.85rem + 2.4vw, 3.5rem);
    --text-5xl: clamp(2.9rem, 2.1rem + 3.4vw, 4.5rem);
    --text-6xl: clamp(3.4rem, 2.3rem + 4.6vw, 5.75rem);
    --text-7xl: clamp(4rem, 2.5rem + 6.2vw, 7.25rem);

    --leading-tight: 1.08;
    --leading-snug: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.03em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.14em;

    /* ============================================================
       PALETA NEUTRA (base para todos los temas)
       ============================================================ */
    --neutral-0: #ffffff;
    --neutral-50: #f8f8f7;
    --neutral-100: #f0efec;
    --neutral-200: #e2e0da;
    --neutral-300: #cac6bd;
    --neutral-400: #a5a094;
    --neutral-500: #7d786c;
    --neutral-600: #5c584e;
    --neutral-700: #423f38;
    --neutral-800: #2a2823;
    --neutral-900: #17160f;
    --neutral-950: #0c0b08;

    /* ============================================================
       TOKENS SEMÁNTICOS (redefinidos por cada theme en /themes/*.css)
       Estos son los valores por defecto = theme "light".
       ============================================================ */
    --bg-canvas: var(--neutral-0);
    --bg-surface: var(--neutral-50);
    --bg-surface-raised: var(--neutral-0);
    --bg-inverse: var(--neutral-900);
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-muted: var(--neutral-400);
    --text-inverse: var(--neutral-0);
    --border-subtle: var(--neutral-200);
    --border-strong: var(--neutral-300);

    --accent: #5b4dff;
    --accent-2: #ff6a3d;
    --accent-contrast: #ffffff;

    /* ============================================================
       ELEVACIÓN premium (sombras más suaves y difusas que las de global.css)
       ============================================================ */
    --elevation-1: 0 1px 2px rgba(15, 15, 10, 0.04), 0 1px 1px rgba(15, 15, 10, 0.03);
    --elevation-2: 0 8px 24px -8px rgba(15, 15, 10, 0.12), 0 2px 6px -2px rgba(15, 15, 10, 0.06);
    --elevation-3: 0 24px 48px -16px rgba(15, 15, 10, 0.18), 0 8px 16px -8px rgba(15, 15, 10, 0.08);
    --elevation-4: 0 40px 80px -24px rgba(15, 15, 10, 0.28), 0 16px 32px -16px rgba(15, 15, 10, 0.12);
    --elevation-glow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -16px rgba(0, 0, 0, 0.45);

    /* ============================================================
       CONTENEDORES / BREAKPOINTS (referencia; los media queries
       necesitan los valores literales igual)
       ============================================================ */
    --container-sm: 640px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-xl: 1400px;
    --container-wide: 1680px;
    --gutter: clamp(20px, 4vw, 64px);

    /* ============================================================
       MOTION
       ============================================================ */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 200ms;
    --duration-base: 450ms;
    --duration-slow: 800ms;

    /* Radios adicionales (global.css ya define sm/md/lg/xl/full) */
    --radius-2xl: 28px;
    --radius-blob: 62% 38% 55% 45% / 45% 55% 45% 55%;
}

/* Respeta accesibilidad: usuarios que piden menos movimiento */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}