/* CSS Custom Properties - Design Tokens */

:root {
    /* ============================================
       ESCALA TONAL
       Dos colores de marca, más pasos. Todos los tonos derivan de
       #2d313f y #e8dfd6: no hay matices nuevos, solo más peldaños
       para no seguir esparciendo literales por el CSS.
       ============================================ */

    /* Navy: 100 = más claro, 700 = más oscuro */
    --navy-100: #646c90;  /* periwinkle, tarjetas de categoría */
    --navy-200: #5a5e6d;
    --navy-300: #4a4e5d;
    --navy-400: #3a3e4d;
    --navy-500: #343845;
    --navy-600: #2d313f;  /* base de marca */
    --navy-700: #23262f;

    /* Crema: 50 = más claro, 500 = más apagado */
    --crema-50: #fdf9f5;
    --crema-100: #f4efe9;
    --crema-200: #f0e7de;
    --crema-300: #e8dfd6;  /* base de marca */
    --crema-400: #d5cdc4;
    --crema-500: #b8afa6;

    /* Canales RGB, para construir rgba() sin repetir el literal */
    --navy-rgb: 45, 49, 63;
    --navy-100-rgb: 100, 108, 144;
    --navy-200-rgb: 90, 94, 109;
    --navy-400-rgb: 58, 62, 77;
    --navy-500-rgb: 52, 56, 69;
    --crema-rgb: 232, 223, 214;

    /* ============================================
       COLORES DE MARCA
       ============================================ */
    --color-primary: var(--navy-600);    /* Azul oscuro/Navy */
    --color-secondary: var(--crema-300); /* Beige/Crema */

    /* ============================================
       TOKENS SEMÁNTICOS
       Qué es cada color, no qué tono es.
       ============================================ */

    /* Superficies */
    --surface-page: var(--navy-600);
    --surface-raised: var(--navy-500);
    --surface-elevated: var(--navy-400);
    --surface-inverse: var(--crema-300);              /* pie, barra de cifras */
    --surface-card: rgba(var(--navy-100-rgb), 0.8);   /* tarjetas de categoría */
    --surface-card-muted: rgba(var(--navy-100-rgb), 0.55);
    --surface-overlay: rgba(0, 0, 0, 0.7);
    --surface-tint: rgba(var(--crema-rgb), 0.05);     /* velos crema sobre navy */
    --surface-tint-medium: rgba(var(--crema-rgb), 0.1);
    --surface-tint-strong: rgba(var(--crema-rgb), 0.15);

    /* Bordes */
    --border-subtle: rgba(var(--crema-rgb), 0.15);
    --border-default: var(--navy-300);
    --border-strong: var(--navy-200);

    /* Foco */
    --focus-ring: var(--crema-300);

    /* Glow crema, para estados hover sobre fondo oscuro */
    --glow-accent: rgba(var(--crema-rgb), 0.3);
    --glow-accent-strong: rgba(var(--crema-rgb), 0.5);

    /* ============================================
       ALIAS HEREDADOS
       Nombres que ya usaba el CSS. Se mantienen para no tocar
       cientos de declaraciones; apuntan a la escala de arriba.
       ============================================ */
    --color-bg: var(--surface-page);
    --color-bg-secondary: var(--surface-raised);
    --color-bg-elevated: var(--surface-elevated);

    --color-text: var(--crema-300);
    --color-text-secondary: var(--crema-400);
    --color-text-muted: var(--crema-500);

    --color-accent: var(--crema-300);
    --color-accent-hover: var(--crema-200);
    --color-accent-light: var(--crema-300);

    --color-border: var(--border-default);
    --color-border-hover: var(--border-strong);

    /* Header colors */
    --color-header-bg: var(--surface-page);
    --color-header-border: var(--border-default);

    /* Typography Scale */
    --font-display: 'Platypi', serif;
    --font-body: 'Arimo', sans-serif;
    --font-accent: 'Solway', serif;

    /* Fluid Typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    --text-2xl: clamp(2rem, 1.6rem + 1.5vw, 3rem);
    --text-3xl: clamp(2.5rem, 2rem + 2vw, 4rem);
    --text-4xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);

    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Layout */
    --container-max: 1200px;
    --container-padding: var(--space-md);
    --section-spacing: var(--space-4xl);

    /* Breakpoints (for reference in JS) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1440px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 28px 60px -12px rgba(0, 0, 0, 0.65);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-bounce: 0ms;
    }
}