/*
 * TOKENS: Design tokens and CSS custom properties
 * 
 * SINGLE SOURCE OF TRUTH - Design Tokens Consolidados
 * 
 * Nomenclatura:
 * - American spelling: gray (no grey), space (no sp), line-height (no lh), font-weight (no fw)
 * - Verbose names: --space-* (no --sp-*), --line-height-* (no --lh-*), --font-weight-* (no --fw-*)
 * 
 * Purpose: Centralized values for colors, fonts, spacing, breakpoints
 * Compatible con: OLS, Cloudflare, LiteSpeed Cache, Redis
 * 
 * Phase A (Contención): Variables consolidadas - duplicados eliminados
 * Phase PR2: Migrado de base/variables.css a 1-tokens/tokens.css
 */

:root {
    /* ==========================================================
       COLORES
    ========================================================== */
    
    /* Primarios */
    --color-primary: #FF5920;
    --color-primary-alt: #FF5920;
    --color-primary-hover: #e64d15; /* Versión más oscura de #FF5920 para hover */
    --color-primary-rgb: 255, 89, 32; /* RGB correcto de #FF5920 */
    
    /* Brand colors (aliases semánticos) */
    --color-brand-primary: #FF5920; /* Naranja principal del brand */
    --color-brand-primary-dark: #cc4719; /* Versión oscura de #FF5920 para hover */
    
    /* Neutros */
    --color-black: #000;
    --color-white: #fff;
    
    /* Escala de grises - American spelling (gray) */
    /* Valores consolidados según propuesta Claude */
    --color-gray-900: #111;
    --color-gray-800: #333;
    --color-gray-700: #444;
    --color-gray-600: #555;
    --color-gray-500: #666;
    --color-gray-400: #777;
    --color-gray-300: #999;
    --color-gray-200: #ccc;
    --color-gray-100: #eee;
    --color-gray-50: #f5f5f5;
    
    /* Semánticos */
    --color-text: var(--color-black);
    --color-text-primary: var(--color-black);
    --color-text-base: var(--color-black); /* Alias para compatibilidad */
    --color-text-secondary: var(--color-gray-800);
    --color-text-meta: var(--color-gray-600);
    --color-text-muted: var(--color-gray-500);
    --color-text-light: var(--color-gray-400);
    
    /* Colores específicos El País (exactos) */
    --color-excerpt: #4a4a4a; /* Bajadas/excerpts */
    --color-meta: #666; /* Meta, autores, fechas */
    --color-border-list: #e6e6e6; /* Bordes de listas */
    --color-title-hover: #444; /* Hover en títulos */
    
    --color-border: var(--color-gray-300);
    --color-border-light: #e9e9e9;
    --color-border-medium: #e4e4e4;
    --color-border-dark: #dcdcdc;
    --color-separator: #e9e9e9;
    --color-separator-thick: var(--color-black);
    
    --color-bg-primary: var(--color-white);
    --color-bg-dark: var(--color-black);
    --color-bg-card: var(--color-white);
    
    --color-link: var(--color-black);
    --color-link-hover: var(--color-primary);
    
    /* ==========================================================
       TIPOGRAFÍA
    ========================================================== */
    
    /* Familias - Según referencia El País */
    --font-serif: MajritTx, serif; /* Títulos, headings */
    --font-primary: MajritTx, serif;
    --font-serif-roman: MajritTxRoman, serif; /* Texto del cuerpo (párrafos, listas) */
    --font-secondary: MajritTxRoman, serif;
    --font-serif-black: MajritTx, serif; /* weight 900 */
    --font-sans: MarcinAntB, sans-serif; /* Meta, fechas, elementos sans */
    --font-meta: MarcinAntB, sans-serif;
    
    /* Fluid Font Sizes (clamp para responsive automático) */
    --fs-xs: clamp(0.7rem, 1vw, 0.85rem);        /* 11.2px - 13.6px */
    --fs-sm: clamp(0.75rem, 1.2vw, 1rem);        /* 12px - 16px */
    --fs-md: clamp(0.875rem, 1.5vw, 1.125rem);   /* 14px - 18px */
    --fs-lg: clamp(1.05rem, 2vw, 1.5rem);        /* 16.8px - 24px */
    --fs-xl: clamp(1.6rem, 3vw, 2.1rem);         /* 25.6px - 33.6px */
    --fs-xxl: clamp(2.2rem, 4vw, 3rem);         /* 35.2px - 48px */
    
    /* Tamaños fijos (para casos específicos donde clamp no funciona) */
    --font-size-xs: 0.62rem;    /* 9.92px - Fecha header */
    --font-size-sm: 0.7rem;     /* 11.2px - Meta tags */
    --font-size-base: 0.85rem;  /* 13.6px - Body text */
    --font-size-md: 0.95rem;    /* 15.2px - Destacado excerpt */
    --font-size-lg: 1.02rem;    /* 16.32px - Video titles */
    --font-size-xl: 1.05rem;    /* 16.8px - List titles */
    --font-size-2xl: 1.42rem;   /* 22.72px - Mobile sections */
    --font-size-3xl: 1.9rem;    /* 30.4px - Section headers */
    --font-size-4xl: 2.1rem;    /* 33.6px - Hero titles */
    
    /* ========== TAMAÑOS EXACTOS EL PAÍS (nuevos tokens semánticos) ========== */
    --fs-meta: .6875rem;        /* 11px - Meta, autores, fechas */
    --fs-excerpt: .9375rem;     /* 15px - Bajadas, excerpts */
    --fs-title-xs: .875rem;     /* 14px - Títulos extra pequeños */
    --fs-title-sm: 1rem;        /* 16px - Títulos pequeños (cards) */
    --fs-title-md: 1.125rem;    /* 18px - Títulos listas */
    --fs-title-base: 1.25rem;   /* 20px - Títulos estándar */
    --fs-title-lg: 1.625rem;    /* 26px - Títulos destacados secundarios */
    --fs-title-xl: 1.875rem;    /* 30px - Títulos destacados principales */
    --fs-title-xxl: 2.5rem;     /* 40px - Hero titles */
    
    /* Line Heights - Valores consolidados según propuesta Claude */
    --line-height-tight: 1.1;
    --line-height-snug: 1.15;
    --line-height-normal: 1.2;
    --line-height-base: 1.2;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;
    --line-height-content: 1.6;
    --line-height-very-loose: 2;
    
    /* ========== LINE HEIGHTS ESPECÍFICOS EL PAÍS (por contexto) ========== */
    --lh-hero: 1.07;            /* Destacados grandes */
    --lh-title-base: 1.15;      /* Títulos estándar (1.25rem) */
    --lh-title-list: 1.17;      /* Títulos listas (1.125rem) */
    --lh-title-sm: 1.19;        /* Títulos pequeños (1rem) */
    --lh-excerpt: 1.27;         /* Excerpts y meta */
    --lh-compact: 1.21;         /* Variantes compactas */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* ========== FONT WEIGHTS ESPECÍFICOS EL PAÍS (semánticos) ========== */
    --fw-title-base: 600;       /* Títulos estándar (600 es el default El País) */
    --fw-title-featured: 700;   /* Títulos destacados grandes */
    --fw-meta: 500;             /* Meta, autores, fechas */
    
    /* Letter Spacing */
    --ls-tight: 0.5px;
    --letter-spacing-tight: -0.02em;
    --ls-normal: 0.6px;
    --letter-spacing-normal: 0;
    --ls-wide: 1px;
    --letter-spacing-wide: 0.5px;
    --letter-spacing-wider: 0.6px;
    
    /* ========== LETTER SPACING ESPECÍFICOS EL PAÍS (negativos para títulos) ========== */
    --ls-hero: -.0675rem;       /* Destacados grandes (1.875rem) */
    --ls-title-lg: -.0375rem;   /* Títulos destacados secundarios (1.625rem) */
    --ls-title-base: -.018125rem; /* Títulos estándar (1.25rem) */
    --ls-title-md: -.016875rem; /* Títulos listas (1.125rem) */
    --ls-title-sm: -.005625rem; /* Títulos pequeños (1rem) */
    --ls-meta: .0125rem;        /* Meta, autores (positivo) */
    
    /* ==========================================================
       ESPACIADO (Sistema base 4px)
    ========================================================== */
    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 56px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    
    /* Gaps para grids */
    --grid-8-1-column-content-gap: 2rem; /* Margen contenido columna single (desktop) */
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap-md: var(--space-4);
    --gap-lg: var(--space-5);
    --gap-xl: var(--space-6);
    --gap-2xl: var(--space-7);
    --gap-single-columns: 64px; /* Gap específico para two-columns en single (desktop) */
    
    /* ==========================================================
       LAYOUT
    ========================================================== */
    
    /* Contenedores */
    --max-width-container: 1320px;
    --container-max-width: 1320px;
    --max-width-content: 825px;
    --max-width-sidebar: 350px;
    --max-width-single: 900px;
    
    /* Paddings */
    --container-padding-desktop: 20px;
    --container-padding-tablet: 20px;
    --container-padding-mobile: 16px;
    
    /* Breakpoints (solo para referencia, no usar en media queries) */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1320px;
    
    /* ==========================================================
       EFECTOS
    ========================================================== */
    
    /* Bordes */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 6px;
    --border-radius-full: 50%;
    
    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 2px 3px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.3);
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.25s ease;
    
    /* Z-index scale */
    --z-base: 1;
    --z-index-base: 1;
    --z-dropdown: 100;
    --z-index-dropdown: 100;
    --z-sticky: 1000;
    --z-index-sticky: 1000;
    --z-fixed: 5000;
    --z-index-fixed: 5000;
    --z-modal: 9000;
    --z-index-modal: 9000;
    --z-header: 9999;
    --z-index-header: 9999;
}