/* ========================================================================== TOKENS — Alcar Studio -------------------------------------------------------------------------- Todo el sistema vive aqui. Ver DISENO.md. La idea: el sitio es el hero invertido. El hero (intocable, brief §4) ya contenia los dos colores del sistema — fondo #0c0c0d y tinta #f6f3ee — asi que el cuerpo claro no estrena paleta: usa la misma con la polaridad dada la vuelta. Cada papel tiene dos valores, uno por polaridad, calibrados al MISMO contraste, para que la jerarquia se perciba igual en las dos. Medido con WCAG 2.1 y APCA (W3 0.1.9): papel oscura claro tinta 17.67 17.67 (identico: es simetrico) apagada 6.23 6.09 magenta tinta 6.14 6.21 magenta superficie 6.14 6.14 Cambiar --color-brand cambia el acento en todo el sitio (brief §10.5). ========================================================================== */ :root { /* ── MARCA ─────────────────────────────────────────────────────────────── #ff33cc no se toca (brief §3.2). Lo que cambia es su PAPEL: sobre claro no puede ser tinta — da 2.88 y falla AA hasta para texto grande — asi que pasa a ser superficie, con la tinta oscura encima (6.14, pasa). Para lo que si tiene que ser tinta sobre claro hay un derivado. */ --color-brand: #ff33cc; /* Los tres derivados se CALCULAN de --color-brand, no se escriben a mano. Es lo que hace cierto el criterio §10.5 "sin excepciones": con valores fijos, cambiar la marca dejaba la polaridad clara en el magenta viejo. Verificado cambiando la marca a verde: antes el numero de seccion se quedaba magenta; ahora sigue al token. Contrastes que producen sobre el papel #f6f3ee: ink 60% marca + 40% noche = #9e2380 6.31 AA tint 20% marca + 80% blanco = #ffd6f5 15.07 AA con la tinta encima lift 80% marca + 20% blanco = #ff5cd6 — reproduce EXACTAMENTE el hover que el hero ya tenia, que es lo que exige §4. */ --color-brand-ink: color-mix(in srgb, var(--color-brand) 60%, var(--color-night)); --color-brand-tint: color-mix(in srgb, var(--color-brand) 20%, #fff); --color-brand-lift: color-mix(in srgb, var(--color-brand) 80%, #fff); /* ── NEUTROS ───────────────────────────────────────────────────────────── Los dos del hero, mas un gris apagado recalibrado para la polaridad clara: #94918c invertido sobre papel da 2.84 y falla. */ --color-night: #0c0c0d; --color-paper: #f6f3ee; --color-muted-on-night: #94918c; --color-muted-on-paper: #5f5b55; /* ── PAPELES (polaridad clara, por defecto) ─────────────────────────── */ --bg: var(--color-paper); --ink: var(--color-night); --muted: var(--color-muted-on-paper); --accent: var(--color-brand-ink); --rule: rgba(12, 12, 13, 0.12); /* Superficie NEUTRA para elevar una tarjeta sobre el papel. Estuvo apuntando a --color-brand-tint, y el resultado era una tarjeta de proyecto entera en magenta claro: reventaba el presupuesto de tres apariciones por pantalla. El tinte de marca es un token aparte y se usa a proposito, en las pildoras de Servicios, no como fondo por defecto. */ --surface: color-mix(in srgb, var(--color-night) 4%, transparent); /* ── TIPOGRAFIA ────────────────────────────────────────────────────────── No es una eleccion: la fija el hero. Usa Bricolage Grotesque en 14 declaraciones y Space Mono en 69, y tiene que quedar indistinguible. Dos familias y ninguna mas. Habia una tercera —Fraunces italic, 17 KB, recortada a los glifos de los cinco nombres de proyecto— que solo existia para los titulos de la galeria. Al rehacer la galeria esos titulos pasaron a la grotesca, porque las capturas de las webs ya traen su propia serif grande y dos no jerarquizan. Sin uso, la familia sale. */ --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Escala. Referencias: Collins 72/400 y 16/400, Locomotive 70/400 con los proyectos a 15px. Salto grande y sin escalones blandos en medio. El hero queda FUERA de esta escala: mantiene su clamp literal. */ --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem); --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.06rem); --step-1: clamp(1.25rem, 1.10rem + 0.75vw, 1.60rem); --step-2: clamp(1.80rem, 1.40rem + 2.00vw, 2.80rem); --step-3: clamp(2.40rem, 1.60rem + 4.00vw, 4.40rem); --step-4: clamp(3.20rem, 1.50rem + 8.50vw, 7.00rem); --lh-tight: 0.94; --lh-snug: 1.12; --lh-body: 1.6; --ls-tight: -0.03em; --ls-wide: 0.12em; /* ── ESPACIADO ─────────────────────────────────────────────────────────── --pad es el padding lateral del hero, literal. Se usa en todo el sitio para que los bordes verticales se alineen de la portada al pie. */ --pad: clamp(1.5rem, 5vw, 4rem); --space-2xs: 0.35rem; --space-xs: 0.6rem; --space-s: 1rem; --space-m: 1.75rem; --space-l: 3.5rem; --space-xl: clamp(5rem, 12vw, 9rem); --space-2xl: clamp(6rem, 16vw, 12rem); --measure: 46ch; --wrap: 1440px; /* ── RADIOS ──────────────────────────────────────────────────────────── */ --radius-pill: 999px; --radius-s: 4px; --radius-m: 12px; /* ── MOVIMIENTO ────────────────────────────────────────────────────────── Calibracion de web-builder: 0.8-1.2s se siente caro, 0.3s barato; escalonados de 20-80ms. --ease no es nueva: es la curva que el hero ya usa en sus once transiciones, adoptada como curva del sistema. */ --dur-micro: 180ms; --dur-ui: 320ms; --dur-reveal: 900ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --stagger: 60ms; /* ── CAPAS ───────────────────────────────────────────────────────────── */ --z-tunnel: -1; --z-crt: 50; --z-menu: 104; --z-nav: 106; --z-progress: 107; --z-modal: 500; --z-cursor: 9999; } /* ── POLARIDAD NOCHE ─────────────────────────────────────────────────────── Una seccion cambia de polaridad con un atributo. Ninguna regla de color se escribe dos veces. El hero y el pie la llevan; el cuerpo no lleva nada. */ [data-polarity="night"] { --bg: var(--color-night); --ink: var(--color-paper); --muted: var(--color-muted-on-night); --accent: var(--color-brand); --rule: rgba(246, 243, 238, 0.12); /* valor literal del hero */ --surface: rgba(246, 243, 238, 0.06); } /* ── POLARIDAD MAGENTA ───────────────────────────────────────────────────── La tercera. El bloque a sangre de Contacto deja de ser una excepcion de color y pasa a ser una polaridad mas del mismo sistema. */ [data-polarity="brand"] { --bg: var(--color-brand); --ink: var(--color-night); /* 0.72 daba 4.28 sobre el magenta: falla para la etiqueta de seccion, que va a 10.5 px y exige 4.5. A 0.85 sube a 5.30 y pasa con margen. */ --muted: rgba(12, 12, 13, 0.85); --accent: var(--color-night); --rule: rgba(12, 12, 13, 0.20); --surface: rgba(12, 12, 13, 0.06); } /* ── FUENTES AUTOALOJADAS ───────────────────────────────────────────────── Cero peticiones a terceros (brief §8). Descargadas de Google Fonts y servidas desde el propio dominio. Solo subconjunto `latin`: es/en no usan latin-ext, que costaba 61 KB de mas. Viven aqui y no en un css/fonts.css aparte para ahorrar una peticion bloqueante de renderizado: son parte del sistema tipografico, igual que --font-sans. font-display:swap pinta con la de respaldo y recompone. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-300-800.woff2) format('woff2'); 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: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/spacemono-400.woff2) format('woff2'); 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: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/spacemono-700.woff2) format('woff2'); 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; }