/* ══════════════════════════════════════════════════════════════════ albercabrera.com · TOKENS DE COLOR Fuente de verdad. Ningún otro archivo del proyecto debe contener un valor de color literal. Dirección: cuerpo claro NEUTRO · hero y footer oscuros con aurora · terracota como único color de acción. Sin acento secundario. [31-ago-2026] Se retiró el verde y el dorado. Motivo: el verde teñía los neutros (fondo, bordes, tinta, scrollbar), y eso es el 80% de la superficie de la página — por eso la web "tenía un color" y no se sentía minimalista por mucho que se cambiara el acento. Las cuatro referencias (steep, decagon, default.com, grammarly) usan neutros SIN tinte y reservan el color a piezas pequeñas. Todos los ratios cumplen WCAG 2.1 AA y están comentados al lado. Formato: ratio sobre --bg / sobre --bg-alt. ══════════════════════════════════════════════════════════════════ */ :root { /* ── TERRACOTA · único color de acción ──────────────────────────── Escala generada en OKLCH (matiz 42, croma 0.165) para que los pasos se vean parejos: en HSL un "50% de luz" naranja pesa mucho más que un azul y la escala se rompe al extenderla. Los nombres siguen siendo --cobalt-* a propósito: 59 usos en index.css apuntan a ellos. Renombrarlos sería tocar 59 sitios para no cambiar nada. El token es el contrato, no su nombre. REGLA DE USO — el paso depende del fondo: sobre claro → 600 (5.68) o 700 (6.72). El 500 NO: da 3.64. sobre oscuro → 400 (6.93). El 600 NO: sobre negro cae a 3.27. Es el mismo aviso que da el sistema de Pipe, que usa esta paleta: "evita blanco sobre el naranja, contraste insuficiente". */ --cobalt-100: #FFF2ED; /* 255, 242, 237 — chips, fondos teñidos */ --cobalt-200: #FFE3D7; /* 255, 227, 215 — fondo de chip, borde suave */ --cobalt-300: #F7AB8E; /* 247, 171, 142 — decorativo sobre oscuro */ --cobalt-400: #EA8258; /* 234, 130, 88 — TEXTO sobre oscuro · 6.93 */ --cobalt-500: #DA622D; /* 218, 98, 45 — SOLO relleno, nunca texto */ --cobalt-550: #C44A08; /* 196, 74, 8 — eyebrow en claro · 4.85/4.53*/ --cobalt-600: #B44100; /* 180, 65, 0 — botón en claro · 5.68/5.31 */ --cobalt-700: #9E3D0C; /* 158, 61, 12 — enlaces en claro · 6.72/6.27*/ --cobalt-800: #7E310D; /* 126, 49, 13 — activo, texto en chip· 9.00 */ --cobalt-glow: rgba(218, 98, 45, 0.14); --cobalt-border: rgba(218, 98, 45, 0.26); --cobalt-tint: rgba(218, 98, 45, 0.06); /* ── CHIPS DE LOS TRES PILARES ──────────────────────────────────── Pares fondo-pálido / texto-oscuro, como los de steep y tailark. NO son colores de marca: solo etiquetan categoría. Nunca se usan en botones, enlaces ni bordes de sección. Ratio = tinta sobre SU fondo, no sobre --bg. */ --chip-1-bg: #FFE3D7; --chip-1-ink: #7E310D; /* agentes · 7.38 */ --chip-2-bg: #F0E3FF; --chip-2-ink: #5E3288; /* bandeja · 7.49 */ --chip-3-bg: #D8F0EC; --chip-3-ink: #005A52; /* panel · 6.81 */ /* ── SUPERFICIES OSCURAS · hero, footer, bloques inversos ───────── Carbón neutro, sin tinte. El hero y el pie llevan encima la aurora (degradado terracota→magenta→violeta→azul→teal pintado en canvas), así que el color lo pone esa capa: la base debe ser neutra o la aurora sale sucia. */ --night-900: #121316; /* 18, 19, 22 — fondo de hero y footer */ --night-800: #1F2126; /* 31, 33, 38 — tarjetas sobre oscuro */ --night-700: #2B2E35; /* 43, 46, 53 — hover de tarjeta oscura */ --night-600: #3C3E44; /* 60, 62, 68 — bordes y divisores oscuros */ --on-night: #FFFFFF; /* 255, 255, 255 — titular invertido · 18.58 */ --on-night-body: #D2D2D7; /* 210, 210, 215 — párrafos · 12.33 */ --on-night-soft: #B4B6BD; /* 180, 182, 189 — secundario · 9.17 */ --on-night-mid: #9A9AA3; /* 154, 154, 163 — microcopy, legales · 6.66 */ /* ── CUERPO CLARO ─────────────────────────────────────────────── */ --bg: #FFFFFF; /* Blanco — fondo de página */ --bg-alt: #F7F7F8; /* Gris neutro — secciones alternas */ /* Superficie ELEVADA. Con --bg en blanco puro ya no se puede subir más hacia la luz, así que la tarjeta se distingue por BORDE y no por tono: --bg-raised es el gris de sección y la tarjeta lleva --line. Es lo que hace openai developers (#fff página, #f9f9f9 tarjeta): invierte la relación en vez de inventar un blanco más blanco. Sobre --bg-alt la superficie elevada vuelve a ser --bg. */ --bg-raised: #F7F7F8; /* 247, 247, 248 — tarjetas sobre --bg */ --bg-input: #F1F1F3; /* 241, 241, 243 — inputs, superficies hundidas*/ --bg-sunken: #EAEAEE; /* 234, 234, 238 — pista de scrollbar */ /* ── TINTA · gris neutro, sin sesgo ───────────────────────────────── Antes tenía sesgo verde bosque. Ese tinte estaba en el texto, los bordes y el fondo a la vez — el 80% de la superficie — y era la causa real de que la web "tuviera un color". Ahora los neutros son neutros y el color vive solo en el acento y los chips. --ink-decor NO es un token de texto: 2.79 no llega a AA. */ --ink: #121316; /* 18, 19, 22 — titulares · 18.58 / 17.35 */ --ink-soft: #3C3E44; /* 60, 62, 68 — párrafos · 10.69 / 9.98 */ --ink-mid: #55585F; /* 85, 88, 95 — microcopy · 7.12 / 6.65 */ --ink-decor: #9A9AA3; /* 154, 154, 163 — SOLO bordes, puntos, iconos */ --ink-faint: var(--ink-mid); /* alias de compatibilidad · 7.12/6.65 */ --line: #E7E7EA; /* 231, 231, 234 — bordes de tarjeta */ --line-strong: #D2D2D7; /* 210, 210, 215 — bordes de input, hover */ /* ── CRISTAL ──────────────────────────────────────────────────── */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(18, 19, 22, 0.09); /* ── SEMÁNTICOS · sobre claro ─────────────────────────────────── */ --rojo: #B91C1C; /* 185, 28, 28 · 6.47 / 5.62 */ --rojo-bg: rgba(185, 28, 28, 0.07); --rojo-border: rgba(185, 28, 28, 0.20); --rojo-solid: #DC2626; /* 220, 38, 38 — relleno de botón, texto #fff*/ --verde: #0B7A3B; /* 11, 122, 59 · 5.44 / 4.72 */ --verde-bg: rgba(11, 122, 59, 0.07); --verde-border: rgba(11, 122, 59, 0.22); --ambar: #9A4A08; /* 154, 74, 8 · 6.26 / 5.43 */ --ambar-bg: rgba(154, 74, 8, 0.07); --ambar-border: rgba(154, 74, 8, 0.30); /* ── SEMÁNTICOS · sobre oscuro ────────────────────────────────── */ --rojo-night: #FF6B6B; /* 255, 107, 107 · 6.81 */ --verde-night: #3DDC84; /* 61, 220, 132 · 10.60 */ --ambar-night: #F5A524; /* 245, 165, 36 · 9.27 */ /* ── TIPOGRAFÍA ──────────────────────────────────────────────── [31-ago-2026] Fuera Inter e Instrument Serif. Motivo: ninguna de las webs de referencia usa Inter. Lo que se ve listado como "Inter" en las fichas de estilo es el SUSTITUTO que se anota cuando la fuente real es de pago — Pipe usa Suisse Int'l, dotconnect usa Aeonik Pro, Grammarly usa Matter, Lovable usa Camera Plain. Copiar el sustituto es copiar el relleno, no la elección. Bricolage Grotesque es una grotesca con carácter propio (la g, la a y la y tienen forma reconocible) sin irse a lo experimental: da voz donde Inter no da ninguna. Geist sostiene cuerpo e interfaz. Bricolage es de eje óptico variable: se le pasa opsz junto al peso, por eso el enlace de Google Fonts lleva 12..96. */ --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; --font-heading: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ════════════════════════════════════════════════════════════════ ESCALAS DEL SISTEMA — espaciado, radios, movimiento y sombra ════════════════════════════════════════════════════════════════ Faltaban aqui: este archivo solo traia color y tipografia, asi que los espaciados y los radios se venian poniendo a ojo. Son los del documento oficial (_docs/negocio/sistema-diseno-bosque-inteligente). Regla del sistema: "un nuevo color, radio o tamano no entra por intuicion". Si un valor no esta en estas escalas, no se usa. ════════════════════════════════════════════════════════════════ */ /* Espaciado. Prioriza 16/24/32/48/64/96. */ --space-1: 4px; /* micro-ajustes */ --space-2: 8px; /* gap pequeno / icono */ --space-3: 12px; /* label / input interno */ --space-4: 16px; /* elemento base */ --space-5: 24px; /* grupos */ --space-6: 32px; /* cards / bloques */ --space-7: 48px; /* separacion de componentes */ --space-8: 64px; /* secciones internas */ --space-9: 80px; /* separacion de bloques */ --space-10: 96px; /* secciones */ --space-11: 120px; /* hero / transiciones */ /* Radios. Pill SOLO para badges: los botones van a 8px. */ --radius-sm: 8px; /* inputs, botones */ --radius-md: 12px; /* cards */ --radius-lg: 16px; /* bloques destacados */ --radius-xl: 20px; /* contenedores especiales */ --radius-pill: 999px; /* badges puntuales */ /* Aire alrededor del hero: lo separa de los bordes de la ventana para que se lea como un bloque dentro de la pagina, no como el fondo. */ --hero-gap: 16px; /* Contenedor y grid. Escala de anchos en pasos de 80px. Antes solo existian los dos primeros y las secciones se inventaban el suyo a mano (1120, 1100, 1040, 1000): al no venir de ningun sitio no se sabia si 1100 y 1120 eran una decision o un descuido. wide — el maximo absoluto, para piezas a sangre max — el de .container y la navbar: la cuadricula de la web narrow — bloques de dos columnas que a 1200 quedan estirados tight — bloques de lectura y secuencias (fases, timeline) */ --container-max: 1200px; --container-wide: 1280px; /* [2-sep-2026] narrow y tight se miden sobre el ANCHO DE CONTENIDO, no sobre el de la caja: .container son 1200 con 24px de padding a cada lado, o sea 1152 utiles. Antes narrow era 1120 y quedaba 32px mas estrecho que todo lo demas sin que fuera una decision — salia de comparar un ancho sin padding con uno que si lo tiene. Ahora bajan de 80 en 80 desde esos 1152, que es el salto que ya habia entre max y wide. */ --container-narrow: 1072px; --container-tight: 992px; --gutter-desktop: 32px; --gutter-tablet: 24px; --gutter-mobile: 20px; --grid-gap: 24px; /* Movimiento */ --motion-fast: 150ms; --motion-base: 220ms; --motion-slow: 360ms; --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* Sombras */ --shadow-subtle: 0 8px 24px rgba(15, 31, 27, 0.08); --shadow-soft: 0 16px 40px rgba(15, 31, 27, 0.10); } /* ══════════════════════════════════════════════════════════════════ BLOQUE INVERSO Cualquier sección con class="inverse" reasigna sus tokens al modo oscuro. Los componentes de dentro no necesitan CSS propio: heredan. Uso: