/* ===== ANNA SOLE - DESIGN TOKENS ===== */

:root {
    /* ===== PALETA DE COLORES ===== */

    /* Primary - Lavanda/Purpura (marca actual modernizada) */
    --primary-50: #F5F3F8;
    --primary-100: #E8E3EF;
    --primary-200: #D1C7DF;
    --primary-300: #B9ABCF;
    --primary-400: #A28FBF;
    --primary: #8B7BA5;
    --primary-600: #706289;
    --primary-700: #564A6C;
    --primary-800: #3B3350;
    --primary-900: #2A2438;

    /* Secondary - Rosa calido */
    --secondary-50: #FAF5F5;
    --secondary-100: #F0E4E4;
    --secondary-200: #E1CACA;
    --secondary: #C4A0A0;
    --secondary-600: #A68080;
    --secondary-700: #876060;

    /* Accent - Dorado suave (CTAs y acciones) */
    --accent: #B8956E;
    --accent-hover: #A5825C;
    --accent-light: #D4B896;
    --accent-50: #FBF7F2;

    /* Neutros - Escala de grises calidos */
    --neutral-900: #2D2A33;
    --neutral-800: #3D3A44;
    --neutral-700: #5A5560;
    --neutral-600: #6B6670;
    --neutral-500: #6E6878;  /* darkened from #8A8590 to pass WCAG AA (4.5:1) on neutral-50 backgrounds. Used by .text-muted, hints, labels. */
    --neutral-400: #B0ABBA;
    --neutral-300: #D4D0DB;
    --neutral-200: #E8E6EC;
    --neutral-100: #F5F4F7;
    --neutral-50: #FDFBF9;

    /* Semanticos */
    --success: #6B9E6F;
    --warning: #D4A574;
    --error: #C67A7A;
    --info: #8BAAC2;

    /* ===== TIPOGRAFIA ===== */
    --font-primary: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 3.75rem;   /* 60px */

    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;

    /* ===== ESPACIADO (8-point grid) ===== */
    --space-1: 0.5rem;     /* 8px */
    --space-2: 1rem;       /* 16px */
    --space-3: 1.5rem;     /* 24px */
    --space-4: 2rem;       /* 32px */
    --space-5: 2.5rem;     /* 40px */
    --space-6: 3rem;       /* 48px */
    --space-8: 4rem;       /* 64px */
    --space-10: 5rem;      /* 80px */
    --space-12: 6rem;      /* 96px */
    --space-16: 8rem;      /* 128px */

    /* ===== BORDES Y SOMBRAS ===== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(45, 42, 51, 0.05);
    --shadow-md: 0 4px 6px rgba(45, 42, 51, 0.07);
    --shadow-lg: 0 10px 20px rgba(45, 42, 51, 0.08);
    --shadow-xl: 0 20px 40px rgba(45, 42, 51, 0.1);
    --shadow-2xl: 0 30px 60px rgba(45, 42, 51, 0.12);
    --shadow-primary: 0 4px 14px rgba(139, 123, 165, 0.3);
    --shadow-accent: 0 4px 14px rgba(184, 149, 110, 0.3);

    /* ===== GLASSMORPHISM ===== */
    --glass-bg: rgba(253, 251, 249, 0.78);
    --glass-blur: 24px;
    --glass-border: rgba(139, 123, 165, 0.12);
    --glass-shadow: 0 8px 32px rgba(45, 42, 51, 0.06);

    /* ===== TRANSICIONES ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: 0.3s cubic-bezier(0.22, 1, 0.36, 1);

    /* ===== LAYOUT ===== */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;

    /* ===== BREAKPOINTS (referencia) =====
       CSS custom properties no funcionan dentro de @media (limitacion del CSS).
       Estas variables existen solo como documentacion; los @media usan los
       valores literales en px. Si cambias uno, busca-reemplaza en css/. */
    --bp-sm: 40em;   /* 640px  -- tablets pequeñas */
    --bp-md: 48em;   /* 768px  -- tablets/portrait */
    --bp-lg: 64em;   /* 1024px -- desktop */
    --bp-xl: 80em;   /* 1280px -- desktop grande (no usado hoy) */

    /* ===== TIPOGRAFIA FLUIDA (escala 320px -> 1280px) =====
       Estos tokens producen transiciones suaves entre mobile y desktop sin
       saltos en los breakpoints. Min = valor actual mobile, max = actual desktop.
       Pequenos (xs/sm/base) se quedan fijos por consistencia de UI. */
    --text-h3: clamp(1.5rem, 1.275rem + 1.13vw, 1.875rem);     /* 24px -> 30px */
    --text-h2: clamp(1.875rem, 1.65rem + 1.13vw, 2.25rem);     /* 30px -> 36px */
    --text-h1: clamp(2.25rem, 1.85rem + 2vw, 3rem);            /* 36px -> 48px */
    --text-hero: clamp(2.5rem, 1.75rem + 3.75vw, 3.75rem);     /* 40px -> 60px */

    /* ===== ESPACIADO FLUIDO PARA SECCIONES =====
       Padding-block de .section y .section--lg. Mobile mantiene compacto,
       desktop respira. */
    --space-section: clamp(3rem, 2rem + 5vw, 5rem);            /* 48px -> 80px */
    --space-section-lg: clamp(4rem, 2.5rem + 7.5vw, 7.5rem);   /* 64px -> 120px */
}