/* ═══════════════════════════════════════════════════════════════ IES Rosa Chacel — Design Tokens v1.0 · identidad-ies-rosa-chacel/brand/variables.css USO: importa este fichero en el de tu proyecto: o en tu CSS principal: @import url('brand/variables.css'); ═══════════════════════════════════════════════════════════════ */ :root { /* ── COLORES INSTITUCIONALES ── */ --azulon: #143755; /* Principal · nav, hero, CTAs primarios */ --verdemar: #3F7883; /* Secundario · eyebrows, acentos, hover */ --albero: #EFAA0D; /* Dorado · borders activos, énfasis, marca */ --pai: #E34E12; /* Acción · CTAs alternativos, botones */ --iit: #E2131F; /* Urgencia · hover de pai, alertas */ --pd: #6093C6; /* Info · azul suave, departamento PD */ /* ── NEUTROS ── */ --ink: #0e2638; /* Texto principal */ --paper: #fbfaf7; /* Fondo base de página */ --line: #e8e4dc; /* Bordes y separadores */ --mute: #706b63; /* Texto secundario, descripciones */ --white: #ffffff; /* Fondo de tarjetas */ --light: #f5f4f0; /* Secciones alternadas */ --dark: #111111; /* Contraste máximo */ --gray: #888880; /* Metadatos, pies de foto */ /* ── TIPOGRAFÍA ── */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Lato', sans-serif; /* Pesos tipográficos usados en el sistema */ --fw-light: 300; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* ── ESCALA TIPOGRÁFICA ── */ --text-xs: 0.69rem; /* 11px · etiquetas, metadatos */ --text-sm: 0.82rem; /* 13px · nav links, notas */ --text-base: 0.875rem; /* 14px · cuerpo compacto */ --text-md: 1rem; /* 16px · cuerpo base */ --text-lg: 1.125rem; /* 18px · lead / intro */ --text-xl: 1.25rem; /* 20px · subtítulos */ --text-2xl: 1.6rem; /* 26px · títulos de sección */ --text-3xl: clamp(2rem, 3vw, 2.8rem); /* h2 de página */ --text-4xl: clamp(2.8rem, 5vw, 4.2rem); /* h1 hero */ /* ── ESPACIADO ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ── RADIOS DE BORDE ── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; /* ── SOMBRAS ── */ --shadow-sm: 0 2px 8px rgba(20, 55, 85, 0.08); --shadow-md: 0 8px 24px rgba(20, 55, 85, 0.12); --shadow-lg: 0 16px 40px rgba(20, 55, 85, 0.16); --shadow-xl: 0 24px 64px rgba(20, 55, 85, 0.20); /* ── TRANSICIONES ── */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* ── ANCHO MÁXIMO DE CONTENIDO ── */ --max-width-content: 1200px; --max-width-wide: 1280px; --max-width-text: 65ch; }