/* deLiébana — tokens.css Variables globales (paleta orgánica, tipografía, espaciado, sombras) Cargar SIEMPRE antes de site.css / news.css */ :root { /* ===== Paleta principal (orgánica) ===== */ --color-brown: #8B4E34; /* Marrón base */ --color-brown-700: #6B3924; /* Marrón oscuro */ --color-terracotta: #A47864; /* Terracota suave */ --color-cta: #C75B35; /* Botón “Publicar” / CTA */ --color-mustard: #DFAE5A; /* Amarillo mostaza */ --color-orange: #EB6A45; /* Naranja */ --color-purple: #934A7A; /* Púrpura */ --color-cream: #F6EFE8; /* Fondo crema */ --color-cream-soft: #FCF7F0; /* Crema más clara */ --color-surface: #FFFDF9; /* Superficies claras */ --color-ink: #2A1D16; /* Texto principal */ --color-ink-2: #5B4B40; /* Texto secundario */ /* Bordes / estados */ --border-soft: #e8e1d8; /* Borde suave default */ --ok: #16a34a; --warn: #f59e0b; --info: #2563eb; --danger: #dc2626; /* ===== Tipografías ===== */ --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-serif: 'Lora', 'Cormorant Garamond', Georgia, serif; /* Escalas tipográficas base (puedes ajustarlas libremente) */ --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); --text-3xl: clamp(1.8rem, 1.3rem + 2.4vw, 2.6rem); --text-4xl: clamp(2.2rem, 1.6rem + 3.6vw, 3.4rem); /* ===== Espaciados ===== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* ===== Radio / Sombras ===== */ --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow-md: 0 6px 18px rgba(0,0,0,.08); --shadow-lg: 0 12px 30px rgba(0,0,0,.12); /* ===== Layout ===== */ --container: 1100px; /* ===== Motion / transitions ===== */ --transition: all .25s ease; --transition-fast: all .15s ease; /* ===== Breakpoints (utilidad JS/CSS si lo necesitas) ===== */ --bp-sm: 520px; --bp-md: 860px; --bp-lg: 1100px; } /* Modo oscuro opcional por clase .dark en o */ .dark { --color-cream: #221813; --color-cream-soft: #2A1D16; --color-surface: #1c130f; --color-ink: #F3EDE6; --color-ink-2: #D7C9BF; --border-soft: #3a2a22; }