@layer tokens, base, components, utilities; /* Fuentes del portfolio: Bricolage Grotesque variable + Instrument Serif itálica + JetBrains Mono 400. OFL 1.1 las tres, auto-alojadas en /assets/fonts/ (bloque @font-face fuera de @layer, architecture-v2.md §3.1): bricolage-grotesque-latin-wght-normal.woff2 41 344 B sha256 a97804dc9fbe5fc972a08018c5eda4dab7ef2346f64c57e61419d05e6de4ea1c origen: https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque/files/bricolage-grotesque-latin-wght-normal.woff2 instrument-serif-latin-400-italic.woff2 22 128 B sha256 5a51946dfffa82972bc98745359c46761515641fda557c25116459a9f83da4a7 origen: https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif/files/instrument-serif-latin-400-italic.woff2 jetbrains-mono-latin-400-normal.woff2 21 168 B Las URL no llevan ?v= (Cache-Control immutable) y coinciden byte a byte con los dos del (Bricolage e Instrument; JetBrains Mono no se precarga). Total 84 640 B ≤ 120 KB. */ @font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap; src:url('/assets/fonts/bricolage-grotesque-latin-wght-normal.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:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap; src:url('/assets/fonts/instrument-serif-latin-400-italic.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:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap; src:url('/assets/fonts/jetbrains-mono-latin-400-normal.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} /* Fallbacks métricos (creative-spec §2.2): CLS ≈ 0 mientras llega la fuente. */ @font-face{font-family:"Bricolage Fallback";src:local("Arial");size-adjust:98%;ascent-override:92%;descent-override:24%;line-gap-override:0%} @font-face{font-family:"Instrument Fallback";font-style:italic;src:local("Georgia");size-adjust:94%;ascent-override:90%;descent-override:22%;line-gap-override:0%} @font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New");size-adjust:106%;ascent-override:92%;descent-override:24%;line-gap-override:0%} @layer tokens{ :root{ --surface-0:#05060d;--surface-1:#0b0f18;--surface-2:#121724; --ink-strong:#f3f6ff;--ink-1:#e7ebf5;--ink-muted:#a3adc4;--ink-faint:#737c94; --line-1:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);--line-3:rgba(255,255,255,.48); --accent:#0a84ff;--accent-text:#5ea8ff;--accent-hover:#8ec2ff;--on-accent:#04101f; --focus:#8ec2ff; --font-body:"Bricolage Grotesque","Bricolage Fallback",system-ui,sans-serif; --font-serif:"Instrument Serif","Instrument Fallback",Georgia,serif; --font-mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,monospace; --step--1:clamp(.8125rem,.78rem + .15vw,.9375rem); --step-0:clamp(1.0625rem,1rem + .28vw,1.1875rem); --step-1:clamp(1.25rem,1.1rem + .65vw,1.5rem); --step-2:clamp(1.625rem,1.3rem + 1.4vw,2.5rem); --step-3:clamp(2.4rem,1.6rem + 3.5vw,5rem); --step-4:clamp(3.2rem,2rem + 7.4vw,9.5rem); --step-5:clamp(3.2rem,1.4rem + 8.8vw,9rem); --marquee:clamp(2.6rem,1.4rem + 5.4vw,6rem); --name:clamp(4rem,14.6vw,15rem); --email:clamp(1.75rem,6vw,5.75rem); --space-xs:.5rem;--space-s:1rem;--space-m:1.5rem;--space-l:clamp(2rem,4vw,3rem); --space-xl:clamp(4rem,8vw,8rem);--space-2xl:clamp(6rem,12vw,12rem); --gutter:clamp(1rem,3.4vw,3rem);--wrap:90rem; --r-sm:6px;--r-md:12px;--r-pill:999px; --ease:cubic-bezier(.2,0,0,1);--dur-1:150ms;--dur-2:250ms;--dur-3:400ms; --z-bh:0;--z-hero-text:2;--z-cover:3;--z-menu:70;--z-nav:80;--z-pre:90;--z-cursor:100;--z-skip:110; } /* Breakpoints (documentación): 40em 640px · 60em 960px · 72em 1152px · 87.5em 1400px */ :root[data-theme="light"]{ /* preparado, no activo */ --surface-0:#f4f4f1;--surface-1:#ebebe7;--surface-2:#e2e2dd; --ink-strong:#0d0e12;--ink-1:#1d1f25;--ink-muted:#565a63;--ink-faint:#62666e; --line-1:rgba(0,0,0,.10);--line-2:rgba(0,0,0,.24);--line-3:rgba(0,0,0,.48); --accent:#1f5fbf;--accent-hover:#184f9f;--accent-text:#1a56ad;--on-accent:#ffffff;--focus:#1f5fbf; } @media print{:root{ --surface-0:#ffffff;--surface-1:#f2f2f2;--surface-2:#e8e8e8; --ink-strong:#000000;--ink-1:#111111;--ink-muted:#444444;--ink-faint:#555555; --line-1:rgba(0,0,0,.2);--line-2:rgba(0,0,0,.4);--line-3:rgba(0,0,0,.6); --accent:#0a5fc0;--accent-hover:#0a5fc0;--accent-text:#0a5fc0;--on-accent:#ffffff;--focus:#0a5fc0; }} }