/* ============================================================================
COORDENADAS / XYZ โ brand tokens + base
v1 ยท single source of truth for colour, type and motion across every site.
Load this FIRST, then the site's own stylesheet:
Sites vary by RE-BINDING tokens, never by overriding rules. If you find
yourself writing !important against this file, add a token instead.
Light is the default; add data-theme="dark" to (or ) for dark.
========================================================================= */
/* ---------------------------------------------------------------- type --- */
/* Self-hosted, latin subset. No requests to Google from any site that loads
this file โ keep it that way when adding a face. */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
src:url("fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/fraunces-latin-500-normal.woff2") format("woff2"); }
:root{
/* ---- surface & ink ---- */
--bg: #F4F2ED;
--bg-2: #EBE7DE;
--ink: #111111;
--ink-2: #333333;
--ink-3: #6a6a68;
--rule: rgba(17,17,17,.16);
--rule-2: rgba(17,17,17,.08);
--accent: #B94B3A; /* brick, from the Wolfsburg scan */
--accent-2: #0A0A0A;
/* ---- type ---- */
--f-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--f-display: var(--f-sans); /* re-bind per site: monumentos uses a serif */
--fs-base: 15px;
--lh-base: 1.5;
/* ---- rhythm ---- */
--grid-gap: 24px;
--pad: clamp(20px, 3vw, 56px);
--max: 1680px;
--radius: 0px; /* the house style is square */
--radius-pill: 999px;
/* ---- motion ---- */
--tr: .55s cubic-bezier(.2,.7,0,1);
--tr-fast: .22s ease;
--ease: cubic-bezier(.2,.7,0,1);
}
[data-theme="dark"]{
--bg: #0A0A0A;
--bg-2: #141414;
--ink: #E8E4DB;
--ink-2: #C8C2B6;
--ink-3: #8d897f;
--rule: rgba(232,228,219,.18);
--rule-2: rgba(232,228,219,.08);
--accent: #E6644E;
--accent-2: #E8E4DB;
}
/* Optional type variants, switched with data-font on . */
[data-font="inter"] { --f-sans: "Inter", Helvetica, system-ui, sans-serif; --f-display: var(--f-sans); }
[data-font="fraunces"] { --f-display: "Fraunces", Georgia, serif; --f-sans: "Inter", Helvetica, sans-serif; }
/* ---------------------------------------------------------------- base --- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
background: var(--bg);
color: var(--ink);
font-family: var(--f-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background var(--tr), color var(--tr);
}
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img{ max-width: 100%; display: block; }
em{ font-style: italic; }
h1, h2, h3, h4{ font-family: var(--f-display); font-weight: 400; margin: 0; }
/* The mono voice โ labels, codes, metadata. Used on every site. */
.mono{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}