/* ============================================================ ELAA BIENS — Design Tokens tokens.css · v01 · 2026-07-24 Corporate identity of ELAA Biens, S.A. de C.V. Deep navy #123156 + champagne gold #C9A45C + warm neutrals, sampled from the ELAA monolith logo. Single accent. Sober, patrimonial, family-led. Related to the ZLS system in structure and type; its own palette. Layers, in order: 1. Fonts 2. Raw palette (never used directly in components) 3. Semantic roles — light default 4. Dark theme override (.dark OR [data-theme="dark"]) 5. Typography (families, scale, weights, tracking) 6. Space, line, radius, shadow, motion, layout Components consume ONLY the semantic roles: --bg, --surface, --band, --ink, --soft, --muted, --accent, --line, and the type roles. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Questrial&family=Mulish:wght@300;400;500;600;700&display=swap'); :root { /* ---- 2. RAW PALETTE ------------------------------------ */ /* navy family — sampled from the logo monolith / ELAA wordmark */ --elaa-navy: #123156; /* THE navy — wordmark, primary structure */ --elaa-navy-deep: #0B2440; /* pressed / hover / deep rules */ --elaa-navy-lift: #3C5C86; /* navy lifted for use on dark grounds */ --elaa-midnight: #081727; /* navy-black — dark theme ground */ --elaa-slate: #0D2036; /* raised surface on dark */ --elaa-slate-deep: #13283F; /* deeper band on dark */ /* gold family — sampled from the logo BIENS wordmark / facets */ --elaa-gold: #C9A45C; /* THE accent — champagne gold */ --elaa-gold-deep: #856325; /* accent text / links on light (AA on paper AND on the bone band) */ --elaa-gold-soft: #E2C994; /* light accent, accent text on dark */ --elaa-gold-tint: #F3ECDD; /* faint gold wash — callouts, hover fills */ /* warm neutrals */ --elaa-paper: #FAF8F4; /* warm white — page ground */ --elaa-bone: #F0EBE1; /* raised surface / bands */ --elaa-linen: #E4DDD0; /* deeper warm neutral */ --elaa-ink: #131A24; /* navy-tinted near-black — primary text */ --elaa-soft-ink: #3F4A57; /* soft ink — subheads, captions */ --elaa-steel: #5F6875; /* muted cool gray — metadata (AA at small sizes on paper and bone) */ --elaa-hair: #E1DBD0; /* hairline on light */ --elaa-white: #FFFFFF; --elaa-black: #000000; /* mono logo variant only */ /* ---- 3. SEMANTIC ROLES — LIGHT (default) --------------- */ --bg: var(--elaa-paper); --surface: var(--elaa-white); --band: var(--elaa-bone); --surface-alt: var(--band); /* alias — ZLS parity */ --ink: var(--elaa-ink); --soft: var(--elaa-soft-ink); --muted: var(--elaa-steel); --brand: var(--elaa-navy); /* structural navy: rules, marks, fills */ --brand-deep: var(--elaa-navy-deep); --accent: var(--elaa-gold); --accent-deep: var(--elaa-gold-deep); --accent-soft: var(--elaa-gold-soft); --accent-wash: var(--elaa-gold-tint); --line: var(--elaa-hair); --hair: var(--line); /* alias — ZLS parity */ --on-accent: var(--elaa-navy); /* text sitting on a gold fill */ --on-brand: var(--elaa-paper); /* text sitting on a navy fill */ /* ---- 5. TYPOGRAPHY ------------------------------------- */ --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, serif; /* editorial titles */ --font-brand: 'Questrial', 'Century Gothic', 'Futura', sans-serif; /* wordmark echo, eyebrows, labels, UI */ --font-body: 'Mulish', ui-sans-serif, system-ui, -apple-system, sans-serif; /* running text */ /* modular scale (~1.25) */ --fs-eyebrow: 0.75rem; /* 12px — tracked labels */ --fs-caption: 0.8125rem; /* 13px */ --fs-small: 0.9375rem; /* 15px */ --fs-body: 1.0625rem; /* 17px — base running text */ --fs-lead: 1.25rem; /* 20px — intros */ --fs-h4: 1.375rem; --fs-h3: 1.75rem; --fs-h2: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); --fs-h1: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); --fs-display: clamp(3rem, 1.8rem + 5vw, 5.25rem); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.08; --lh-snug: 1.28; --lh-body: 1.62; /* letter-spacing — the ELAA wordmark is wide-tracked; labels echo it */ --track-brand: 0.28em; /* eyebrows / kickers — very wide */ --track-label: 0.16em; /* nav, buttons */ --track-display: 0.005em; --track-tight: -0.01em; /* ---- 6. SPACE / SHAPE / MOTION / LAYOUT ---------------- */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 7rem; --radius: 2px; /* restraint — near-square corners */ --radius-pill: 999px; --hair-w: 1px; --shadow-soft: 0 1px 2px rgba(11,36,64,.05), 0 8px 30px rgba(11,36,64,.07); --shadow-lift: 0 2px 6px rgba(11,36,64,.07), 0 24px 60px rgba(11,36,64,.12); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: .45s; /* layout */ --pad-page: clamp(1.25rem, 5vw, 4.5rem); /* page gutter */ --maxw-page: 1200px; /* outer content frame */ --maxw-text: 68ch; /* ideal reading width */ --measure: var(--maxw-text); /* alias — ZLS parity */ color-scheme: light; } /* ---- 4. DARK THEME ------------------------------------- */ .dark, [data-theme="dark"] { --bg: var(--elaa-midnight); --surface: var(--elaa-slate); --band: var(--elaa-slate-deep); --surface-alt: var(--band); --ink: #F1EEE8; --soft: #C3C9D2; --muted: #8794A3; --brand: var(--elaa-navy-lift); /* navy lifts on dark to stay legible */ --brand-deep: var(--elaa-navy); --accent: var(--elaa-gold); --accent-deep: var(--elaa-gold-soft); /* lighten on dark for contrast */ --accent-soft: #7A6234; --accent-wash: rgba(201,164,92,.10); --line: rgba(226,201,148,.20); --hair: var(--line); --on-accent: var(--elaa-navy); --on-brand: #F1EEE8; color-scheme: dark; } /* ============================================================ OPTIONAL BASE — thin reset + element defaults keyed to roles. Import tokens.css alone for variables only; these element rules only touch bare elements. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--ink); margin: 0 0 var(--space-3); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 var(--space-3); max-width: var(--maxw-text); } a { color: var(--accent-deep); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--ink); } hr { border: 0; border-top: var(--hair-w) solid var(--line); margin: var(--space-5) 0; } ::selection { background: var(--accent-wash); color: var(--ink); } /* ---- Brand utility classes (opt-in) -------------------- */ .elaa-eyebrow { font-family: var(--font-brand); font-size: var(--fs-eyebrow); letter-spacing: var(--track-brand); text-transform: uppercase; color: var(--accent-deep); } .elaa-kicker { font-family: var(--font-brand); font-size: var(--fs-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .elaa-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); } .elaa-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--soft); } .elaa-rule { border: 0; border-top: var(--hair-w) solid var(--line); } .elaa-rule-accent { border: 0; border-top: 2px solid var(--accent); width: 48px; }