/* ============================================================ ORVIAN REAL ESTATE — tokens.css Manual de identidad 2025. ÚNICO archivo donde viven valores de color literales. Ningún otro CSS debe declarar un color en hex/rgb/hsl. ============================================================ */ :root { /* ---------- Paleta de marca ---------- Proporción de uso: 50 / 20 / 10 / 10 / 10 */ --coquelicot: #FF4200; /* 50% — CTAs, acentos, curvas gráficas */ --russian-violet: #240041; /* 20% — cortes de sección: hero, banda CTA, footer */ --seashell: #FFF7F0; /* 10% — lienzo del scroll, fondo base */ --chrysler-blue: #2105D6; /* 10% — estados hover/active, foco */ --tropical-indigo: #AC84F7; /* 10% — badges, etiquetas, datos */ /* ---------- Derivados neutros ---------- Tinta = Russian Violet muy oscurecido: legible para texto corrido. */ --ink: #1A0030; /* texto de párrafo sobre Seashell (>12:1) */ --ink-soft: #4A3A5C; /* texto secundario sobre Seashell (>7:1) */ --line: #E3D6CC; /* bordes y separadores sobre Seashell */ --surface: #FFFFFF; /* tarjetas sobre Seashell */ --surface-alt: #FBEEE4; /* bandas suaves, skeletons */ /* Sobre Russian Violet */ --on-violet: #FFF7F0; /* = seashell */ --on-violet-soft: #C9B8DA; /* texto secundario sobre violeta (>4.5:1) */ --violet-line: #3D1B5C; /* bordes sobre violeta */ --violet-deep: #190030; /* fondo de panel dentro del violeta */ /* Sobre Coquelicot. Seashell sobre Coquelicot da 3.29:1: alcanza para texto grande (>=18.66px en negrita) e íconos, pero NO para texto normal. Por eso los rótulos chicos sobre naranja van en tinta violeta (5.18:1). */ --on-coquelicot: #FFF7F0; /* = seashell — sólo texto grande en negrita */ --on-coquelicot-sm: #240041; /* = russian-violet — rótulos pequeños */ /* Estados derivados */ --coquelicot-ink: #B32E00; /* Coquelicot oscurecido: hover de botón sólido */ --chrysler-soft: #E9E6FF; /* fondo tenue de foco / chip activo */ --indigo-ink: #3B1470; /* texto legible sobre Tropical Indigo */ /* Sombras (color con alfa, declarado sólo aquí) */ --shadow-color: 36 0 65; /* russian-violet en canal RGB */ --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 2px 8px rgb(var(--shadow-color) / 0.05); --shadow-md: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 12px 28px rgb(var(--shadow-color) / 0.10); --shadow-lg: 0 8px 20px rgb(var(--shadow-color) / 0.10), 0 24px 60px rgb(var(--shadow-color) / 0.16); --scrim: rgb(var(--shadow-color) / 0.72); /* fondo de lightbox / menú */ /* Velo sobre la foto del hero: sólo lo justo para que el borde inferior no compita con el texto. */ --photo-veil: linear-gradient( 180deg, rgb(var(--shadow-color) / 0) 45%, rgb(var(--shadow-color) / 0.28) 100%); /* ============================================================ TIPOGRAFÍA Las fuentes originales del manual no tienen licencia web todavía. Cadena lista: al obtener la licencia, inserta la original al frente de la pila (ya está comentada en su lugar) y borra el comentario. ============================================================ */ /* Títulos primarios — original: Avenir Next LT Pro Bold */ --font-display: /* "Avenir Next LT Pro", */ "Mulish", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; /* Títulos secundarios, eyebrows, uppercase — original: Alternate Gothic ATF Demi */ --font-alt: /* "Alternate Gothic ATF", */ "Oswald", "Arial Narrow", "Haettenschweiler", Impact, sans-serif; /* Texto base — original: Avenir Next LT Pro Regular */ --font-body: /* "Avenir Next LT Pro", */ "Mulish", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; /* Precios, etiquetas, specs — original: Avenir Next LT Pro Heavy Condensed */ --font-num: /* "Avenir Next Condensed Heavy", */ "Archivo Narrow", "Arial Narrow", "Roboto Condensed", sans-serif; /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* Escala con clamp */ --fs-display: clamp(2.5rem, 7vw, 5rem); --fs-h2: clamp(2rem, 4.5vw, 3.25rem); --fs-h3: clamp(1.375rem, 2.5vw, 1.75rem); --fs-body: clamp(1rem, 1.1vw, 1.125rem); --fs-lead: clamp(1.0625rem, 1.5vw, 1.3125rem); --fs-detail: 0.8125rem; /* uppercase, eyebrows, specs */ --fs-micro: 0.75rem; /* Métricas de texto */ --lh-tight: 1.05; --lh-heading: 1.14; --lh-body: 1.62; --ls-tight: -0.02em; --ls-wide: 0.14em; /* eyebrows / uppercase Oswald */ /* ---------- Espaciado (escala 4px) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Ritmo vertical de sección */ --section-y: clamp(3.5rem, 8vw, 7rem); /* ---------- Layout ---------- */ --wrap: 1200px; --wrap-wide: 1440px; --wrap-text: 62ch; --gutter: clamp(1.25rem, 4vw, 2.5rem); --nav-h: 4.5rem; /* ---------- Radios ---------- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* ---------- Trazos ---------- */ --bw: 1px; --bw-accent: 4px; /* borde superior de tarjetas de servicio */ --rule: 2px; /* reglas editoriales del manual */ /* ---------- Movimiento ---------- */ --dur-fast: 140ms; --dur: 240ms; --dur-slow: 620ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Capas ---------- */ --z-ribbon: 0; --z-content: 1; --z-float: 40; --z-nav: 50; --z-menu: 60; --z-lightbox: 70; } /* La escala tipográfica no cambia con el esquema de color: el sitio se compromete con el lienzo Seashell del manual de identidad. */