/* ========================================================================== BRIGHTLOOP — DESIGN TOKENS -------------------------------------------------------------------------- Único sitio del proyecto donde puede aparecer un valor de color literal. Tres niveles: primitivo → semántico → componente. Los nombres semánticos describen FUNCIÓN, nunca aspecto. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TIPOGRAFÍAS — self-hosted, cero CDN -------------------------------------------------------------------------- */ @font-face { font-family: 'Switzer'; src: url('../assets/fonts/switzer-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('../assets/fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('../assets/fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('../assets/fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('../assets/fonts/switzer-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* --- Candidatas para el cuerpo de texto --------------------------------- Los titulares se quedan en Switzer. Para el texto corrido hay dos propuestas, comparables en el styleguide con [data-type]. */ /* A · Newsreader — serif editorial con eje óptico (Production Type) */ @font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader-italic-latin.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; } /* B · Author — grotesca de lectura con detalles propios (Fontshare) */ @font-face { font-family: 'Author'; src: url('../assets/fonts/author-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Author'; src: url('../assets/fonts/author-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Author'; src: url('../assets/fonts/author-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* Variable: un solo archivo cubre 400–500 */ @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrainsmono-latin-ext.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 2. PRIMITIVOS ========================================================================== */ :root { /* --- Rampa neutra CÁLIDA ------------------------------------------------- Matiz 40–55°. Deliberadamente NO es slate/zinc: el gris frío es el tell número uno de una paleta por defecto. Cada paso tiene un trabajo asignado. */ --warm-0: #ffffff; /* superficie elevada máxima sobre papel */ --warm-25: #fcfbf9; /* PAPEL — fondo base del modo claro */ --warm-50: #f7f5f1; /* papel cálido, el tono anterior */ --warm-100: #f0ede7; /* superficie hundida / zebra */ --warm-150: #e8e4dc; --warm-200: #ddd8ce; /* hairline sobre papel */ --warm-300: #bdb6a7; /* borde fuerte / separador estructural */ --warm-400: #9d968a; /* deshabilitado */ --warm-500: #6e685d; /* texto terciario */ --warm-600: #4f4b41; /* texto secundario sobre papel */ --warm-700: #3a362e; --warm-800: #262319; --warm-900: #15140e; /* TINTA — fondo base del modo oscuro */ --warm-950: #0c0b07; /* tinta profunda / footer */ /* --- Neutros de marca: RETIRADOS como acento ----------------------------- Fueron el acento mientras el sistema fue monocromo entero. Desde que el acento es el rojo Japón, ningún token semántico los usa. Se conservan por el mismo motivo que el ámbar: están documentados en styleguide.html y volver a ellos es cambiar el bloque semántico, no reconstruir nada. Los pasos están nombrados por su claridad real, que es lo único que distingue a un neutro de otro. */ --mark-050: #ededed; /* 93% — wash sobre papel */ --mark-200: #c7c7c7; /* 78% — soft sobre papel / acento sobre tinta */ --mark-300: #b5b5b5; /* 71% — única versión válida como TEXTO en tinta */ --mark-350: #a8a8a8; /* 66% — anillo de foco sobre tinta */ --mark-400: #999999; /* 60% — trazo del motivo sobre tinta */ --mark-500: #808080; /* 50% — trazo del motivo sobre papel */ --mark-600: #6b6b6b; /* 42% — soft sobre tinta */ --mark-650: #666666; /* 40% — anillo de foco sobre papel */ --mark-700: #545454; /* 33% — única versión válida como TEXTO en papel */ --mark-800: #363636; /* 21% — wash sobre tinta */ /* --- Ámbar: RETIRADO como acento ---------------------------------------- Ya no lo usa ningún token semántico. Se conserva porque la rampa está documentada en styleguide.html y porque volver a ella es cambiar cuatro líneas del bloque semántico, no reconstruir nada. */ --amber-100: #fff2dc; --amber-200: #ffe0b0; --amber-300: #ffc978; --amber-400: #ffb347; --amber-500: #ff9e1b; --amber-600: #c46d00; --amber-700: #a35c00; --amber-800: #6f3e00; --amber-900: #3d2200; /* --- Rojo Japón: EL ACENTO ---------------------------------------------- El único color saturado del sistema. Empezó siendo sólo el cursor y los puntos de las formas; ahora es el acento de la marca. La marca sigue siendo monocroma —el logo es negro y el botón primario es tinta—: el rojo no tiñe superficies, marca. Presupuesto: menos del 3% del área. Dos pasos hacen el trabajo de texto, y sólo esos dos: · sobre PAPEL → 600 (#a4001f) 7,82:1 ← el que pidió el cliente · sobre TINTA → 300 (#f2445c) 5,06:1 El 600 sobre tinta da 2,28:1. No se usa como texto ahí. Nunca. */ --japan-050: #fff1f2; /* wash sobre papel: fondo de badge */ --japan-200: #ffcfd6; /* soft sobre papel: selección, borde de badge */ --japan-300: #f2445c; /* única versión válida como TEXTO en tinta */ --japan-400: #d4213f; /* cursor sobre tinta */ --japan-500: #bc002d; /* rojo de bandera */ --japan-600: #a4001f; /* POR DEFECTO — texto y marca sobre papel */ --japan-700: #7d0a1a; /* vino: selección y fondos en tinta */ --japan-800: #2e0710; /* wash sobre tinta: fondo de badge */ /* --- Funcionales: sólo para feedback de formulario ---------------------- */ --green-500: #1a7f52; --green-600: #146342; --red-500: #c0392b; --red-600: #9c2b20; /* --- Tinte de sombra ---------------------------------------------------- Nunca negro puro: la sombra hereda el matiz cálido de la tinta. */ --shadow-tint: 21, 20, 14; /* ======================================================================== 3. TIPOGRAFÍA ======================================================================== */ /* Switzer manda en titulares y en toda la interfaz: es la voz de la marca. El texto corrido usa --font-body, que es lo que está a decisión. */ --font-display: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: var(--font-display); --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Corrección de tamaño: cada familia tiene una altura de x distinta, así que a los mismos píxeles no pesan lo mismo. Se compensa aquí. */ --font-body-scale: 1; /* Escala fluida. Los saltos son grandes arriba y pequeños abajo: es lo que produce jerarquía real en vez de la escala plana del render por defecto. */ --fs-display-1: clamp(3.25rem, 1.35rem + 8.1vw, 8.5rem); /* 52 → 136 */ --fs-display-2: clamp(2.5rem, 1.42rem + 4.6vw, 5.5rem); /* 40 → 88 */ --fs-h1: clamp(2rem, 1.36rem + 2.73vw, 3.5rem); /* 32 → 56 */ --fs-h2: clamp(1.625rem,1.26rem + 1.56vw, 2.5rem); /* 26 → 40 */ --fs-h3: clamp(1.25rem, 1.11rem + 0.6vw, 1.625rem); /* 20 → 26 */ --fs-h4: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); /* 17 → 19 */ --fs-body-lg: clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem);/* 17 → 19 */ --fs-body: 1rem; /* 16 */ --fs-body-sm: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-micro: 0.6875rem; /* 11 — retirado del uso público, ver A15 */ /* Tracking escalonado por tamaño óptico. Un valor global sería el error. */ --tr-display-1: -0.038em; --tr-display-2: -0.032em; --tr-h1: -0.026em; --tr-h2: -0.022em; --tr-h3: -0.016em; --tr-h4: -0.011em; --tr-body: -0.004em; --tr-small: 0em; /* RETIRADOS (listón A15). El tracking abierto sólo tenía sentido para las versalitas en mono, y en la web pública ya no hay versalitas ni etiquetas en mono. Se conservan porque styleguide.html los documenta; ninguna hoja de producción los usa. */ --tr-micro: 0.11em; --tr-micro-wide: 0.16em; /* Interlineado por rol, no por tamaño */ --lh-display: 0.93; --lh-title: 1.06; --lh-h3: 1.22; --lh-body: 1.62; --lh-prose: 1.7; --lh-ui: 1.4; --lh-tight: 1.15; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Medida: en ch, nunca en px */ --measure-prose: 68ch; --measure-lead: 46ch; --measure-card: 42ch; /* ======================================================================== 4. ESPACIADO — base 4px. El 4 es para ajuste óptico; el ritmo va en 8. ======================================================================== */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 2rem; /* 32 */ --sp-8: 2.5rem; /* 40 */ --sp-9: 3rem; /* 48 */ --sp-10: 4rem; /* 64 */ --sp-11: 5rem; /* 80 */ --sp-12: 6rem; /* 96 */ --sp-13: 8rem; /* 128 */ --sp-14: 10rem; /* 160 */ /* Ritmo vertical de sección: tres pesos distintos, no uno solo */ --section-pad-sm: clamp(3.5rem, 2rem + 5vw, 5.5rem); --section-pad: clamp(5rem, 2.5rem + 8vw, 9rem); --section-pad-lg: clamp(6.5rem, 3rem + 11vw, 12rem); /* ======================================================================== 5. LAYOUT ======================================================================== */ --shell-max: 90rem; /* 1440 — límite del armazón */ --content-max: 77.5rem; /* 1240 — límite del contenido */ --narrow-max: 46rem; /* 736 — bloques de lectura */ --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem); --grid-cols: 12; --grid-gap: clamp(1rem, 0.4rem + 2vw, 2rem); --header-h: 4.5rem; /* ======================================================================== 6. RADIOS — cinco niveles con trabajos distintos. Un componente NUNCA usa el radio de otro nivel. ======================================================================== */ --r-xs: 4px; /* tags, chips inline, marcas de lista */ --r-sm: 8px; /* inputs, botones pequeños, celdas */ --r-md: 0px; /* tarjetas — a escuadra, decidido en el panel */ --r-lg: 22px; /* paneles grandes, media, contenedores */ --r-full: 999px; /* píldoras: CTA, badges, punto de estado */ /* ======================================================================== 7. MOTION — duraciones por tipo de cambio, no una sola global ======================================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* salidas, reveals */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* cambios de estado */ --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1); /* respuesta táctil */ --ease-linear: linear; /* rotación continua */ --dur-instant: 90ms; /* color en hover */ --dur-fast: 170ms; /* botones, foco */ --dur-base: 280ms; /* tarjetas, acordeón */ --dur-slow: 520ms; /* reveal de entrada */ --dur-scene: 900ms; /* transición de sección */ /* Curva del scroll: sale disparada y frena largo. No es la --ease-out del resto de la interfaz —esa es corta y se usa para responder a un clic—: ésta existe para que algo que aparece solo, sin que nadie lo pida, se pose en vez de llegar. */ --ease-veil: cubic-bezier(0.16, 1, 0.3, 1); --dur-reveal: 900ms; /* entrada de un bloque al llegar su sección */ --reveal-step: 90ms; /* separación entre un bloque y el siguiente */ --dur-section: 900ms; /* encender y apagar una sección */ --reveal-shift: 12px; /* desplazamiento máximo de un reveal */ /* Ritmo de sección: cuánta luz conserva lo que NO se está leyendo. El hero baja menos porque es la portada y se sigue viendo entero un buen rato. */ --section-dim: 0.32; --section-dim-hero: 0.5; /* ======================================================================== 8. SEMÁNTICOS — MODO PAPEL (por defecto) ======================================================================== */ /* Superficies El papel es blanco puro, decidido mirando las dos páginas juntas: el warm-25 de antes se veía apagado al lado del formulario. La calidez del sistema sigue estando donde se nota —textos, hairlines y hundidos—, no en el fondo. */ --surface-page: var(--warm-0); --surface-raised: var(--warm-0); --surface-sunken: var(--warm-100); --surface-inverse: var(--warm-900); --surface-overlay: rgba(21, 20, 14, 0.55); /* Texto */ --text-primary: var(--warm-900); /* 15.9:1 sobre papel */ --text-secondary: var(--warm-600); /* 7.4:1 */ --text-tertiary: var(--warm-500); /* 4.9:1 */ --text-disabled: var(--warm-400); --text-inverse: var(--warm-50); --text-accent: var(--japan-600); /* 7,82:1 sobre papel — pasa AAA */ /* Bordes */ --border-hairline: var(--warm-200); --border-strong: var(--warm-300); --border-inverse: rgba(247, 245, 241, 0.14); /* Acción primaria: tinta sobre papel — el CTA es negro, como el logo */ --action-bg: var(--warm-900); --action-bg-hover: var(--warm-800); --action-bg-active: var(--warm-950); --action-text: var(--warm-50); /* Acción secundaria */ --action-ghost-border: var(--warm-300); --action-ghost-border-hover: var(--warm-900); --action-ghost-text: var(--warm-900); --action-ghost-bg-hover: var(--warm-100); /* Acento — el rojo. Marca, no superficie. Esto arregla de paso el fallo que estaba anotado aquí: --accent era blanco puro, así que el subrayado de .link-reveal y el punto de .readout .swatch eran invisibles sobre papel. Ahora los dos son el rojo. */ --accent: var(--japan-600); --accent-soft: var(--japan-200); --accent-wash: var(--japan-050); --accent-ink: var(--japan-600); /* Selección de texto: gris, nunca el acento. Subrayar un párrafo no es una acción de marca — es leer. Pintarlo del rojo convierte cada arrastre del ratón en un aviso, y el rojo pierde justo lo que lo hace útil en la home: que aparece dos veces contadas. */ --selection-bg: var(--mark-200); --selection-text: var(--text-primary); /* Feedback */ --feedback-ok: var(--green-600); --feedback-error: var(--red-600); /* Foco: anillo propio, nunca el del navegador */ /* Foco y selección son UI, no marca: los dos en gris. El anillo rojo rodeando un bloque se lee como error antes que como foco, que es justo lo contrario de lo que tiene que decir. */ --focus-ring: var(--mark-650); /* 5,74:1 sobre blanco */ --focus-ring-offset: var(--surface-page); --focus-ring-width: 2px; /* Sombras: cortas, cálidas, de baja opacidad */ --shadow-1: 0 1px 2px rgba(var(--shadow-tint), 0.05), 0 0 0 1px rgba(var(--shadow-tint), 0.045); --shadow-2: 0 2px 4px rgba(var(--shadow-tint), 0.04), 0 10px 26px -10px rgba(var(--shadow-tint), 0.12); --shadow-3: 0 4px 8px rgba(var(--shadow-tint), 0.05), 0 28px 64px -22px rgba(var(--shadow-tint), 0.22); --shadow-glow: 0 0 0 4px var(--mark-050); /* Motivo gráfico: el trazo de los arcos del logo. Sólo UN arco por composición puede llevar el trazo encendido, y ahora ese arco es rojo. Es el uso del acento que más área ocupa: por eso va a 0,55 de opacidad y a 1 px, por debajo del 12% que exige el listón. */ --loop-stroke: rgba(21, 20, 14, 0.10); --loop-stroke-lit: rgba(164, 0, 31, 0.55); /* --japan-600 */ --loop-stroke-fine: rgba(21, 20, 14, 0.055); /* --- Cursor ------------------------------------------------------------- El puntero es el mismo objeto en papel y en tinta: no se invierte. Un triángulo macizo de 17 px, que es el tamaño al que la punta sigue siendo precisa y la forma todavía se lee como forma. */ --cursor-color: var(--japan-600); --cursor-size: 28px; /* --- Ilustración del hero ----------------------------------------------- La imagen no lleva sitio ni tamaño escritos en la hoja: los cuatro valores viven aquí, se editan arrastrando la propia imagen (o desde el panel de diseño) y se copian de vuelta con «Copiar tokens». Así el sitio definitivo acaba en este archivo y no en el almacenamiento del navegador. X e Y son el CENTRO de la imagen en % de la caja del hero, y el ancho es % del ancho del hero. En porcentaje y no en rem para que la colocación aguante el cambio de pantalla en lugar de descuadrarse. Estos tres valores son la INTENCIÓN. Si en un tamaño de ventana concreto la imagen no cupiera entera o le rozara el titular, js/hero-art.js la pinta echada para dentro sin tocar lo que hay aquí escrito: en cuanto la ventana vuelve a dar de sí, la imagen regresa a este sitio exacto. Lo que no se corrige nunca es el tamaño relativo. */ --art-x: 75%; --art-y: 48%; --art-w: 42%; --art-op: 0.90; color-scheme: light; } /* -------------------------------------------------------------------------- 8 bis. PAREJAS TIPOGRÁFICAS EN EVALUACIÓN Se aplican con [data-type] en cualquier contenedor, para poder comparar las dos propuestas con texto real y a igualdad de todo lo demás. -------------------------------------------------------------------------- */ /* Redefinir --font-body no basta: los descendientes heredan la familia ya resuelta del `body`, no la variable. Hay que volver a declararla aquí. */ /* A · Switzer + Newsreader — contraste editorial */ [data-type='serif'] { --font-body: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body-scale: 1.055; /* altura de x menor: sube un punto */ font-family: var(--font-body); } /* B · Switzer + Author — grotesca con carácter */ [data-type='grotesk'] { --font-body: 'Author', -apple-system, BlinkMacSystemFont, sans-serif; --font-body-scale: 1.02; font-family: var(--font-body); } /* ========================================================================== 9. SEMÁNTICOS — MODO TINTA Ciudadano de primera, no una inversión automática: los valores están recalculados para que el contraste y el peso óptico se mantengan. Se aplica con [data-surface="ink"] en cualquier contenedor. ========================================================================== */ [data-surface='ink'] { --surface-page: var(--warm-900); --surface-raised: #1d1b13; --surface-sunken: var(--warm-950); --surface-inverse: var(--warm-50); --surface-overlay: rgba(12, 11, 7, 0.7); --text-primary: #f4f1ea; --text-secondary: #b3aca0; --text-tertiary: #8e877b; --text-disabled: #625c52; --text-inverse: var(--warm-900); --text-accent: var(--japan-300); /* en tinta el acento se aclara, no se oscurece: 5,06:1 */ --border-hairline: rgba(244, 241, 234, 0.11); --border-strong: rgba(244, 241, 234, 0.22); --border-inverse: rgba(21, 20, 14, 0.18); --action-bg: var(--warm-50); --action-bg-hover: var(--warm-0); --action-bg-active: var(--warm-150); --action-text: var(--warm-900); --action-ghost-border: rgba(244, 241, 234, 0.24); --action-ghost-border-hover: rgba(244, 241, 234, 0.7); --action-ghost-text: #f4f1ea; --action-ghost-bg-hover: rgba(244, 241, 234, 0.06); --accent: var(--japan-300); --accent-soft: var(--japan-700); --accent-wash: var(--japan-800); --accent-ink: var(--japan-300); --selection-bg: var(--mark-600); --selection-text: var(--text-primary); --feedback-ok: #4fbb87; --feedback-error: #e8705f; --focus-ring: var(--mark-350); /* 8,08:1 sobre tinta */ --focus-ring-offset: var(--surface-page); /* Negro puro no: el tinte de la tinta profunda (--warm-950). A14 vale para las dos superficies, y una sombra fría sobre un fondo cálido se ve gris azulada en el borde. */ --shadow-tint: 12, 11, 7; --shadow-1: 0 1px 2px rgba(var(--shadow-tint), 0.4), 0 0 0 1px rgba(244, 241, 234, 0.06); --shadow-2: 0 2px 6px rgba(var(--shadow-tint), 0.36), 0 12px 32px -12px rgba(var(--shadow-tint), 0.6); --shadow-3: 0 6px 14px rgba(var(--shadow-tint), 0.4), 0 32px 72px -24px rgba(var(--shadow-tint), 0.7); --shadow-glow: 0 0 0 4px var(--mark-800); --loop-stroke: rgba(244, 241, 234, 0.13); --loop-stroke-lit: rgba(242, 68, 92, 0.6); /* --japan-300 */ --loop-stroke-fine: rgba(244, 241, 234, 0.07); /* Sobre tinta el rojo de bandera se apaga: el puntero sube un escalón. Los tokens de las formas NO se tocan aquí — ver la nota del bloque en papel: redeclararlos por superficie los dejaría fuera del alcance del panel dentro de la sección en tinta. */ --cursor-color: var(--japan-400); color-scheme: dark; }