/* ============================================================= GHIL LABS — DESIGN TOKENS v2026.08 Single source of truth. Loaded by EVERY page. Direction: Editorial Warm palette + Technical Precision structure. Do not add component styles here. Tokens and base layer only. ============================================================= */ /* Fonts are loaded via in each page — never @import here (@import is render-blocking and serialises the request chain): */ :root{ /* ---------- SURFACE ---------- */ --paper: #F4F0E6; /* page background */ --paper-2: #FAF7EF; /* recessed strip / subtle */ --card: #FFFDF7; /* raised card */ --stage: #1B1812; /* dark data surface */ --stage-2: #221E17; /* dark panel */ --stage-line: #2B2720; /* dark hairline */ /* ---------- INK ---------- */ --ink: #14110C; /* headings, max contrast */ --ink-2: #33302A; /* body */ --muted: #6E6A60; /* secondary */ --faint: #9A968B; /* labels, meta */ --on-stage: #FBF7EC; /* text on dark */ --on-stage-2: #B8B1A0; /* secondary on dark */ --on-stage-3: #8B8474; /* faint on dark */ /* ---------- LINE ---------- */ --rule: #D8D2C2; /* structural hairline */ --rule-soft: #E6E1D3; /* internal divider */ --rule-grid: #EAE5D7; /* background grid */ /* ---------- MEANING (never decorative) ---------- */ --teal: #0C6B5A; /* improvement, savings, go */ --teal-bg: #DCEDE7; --teal-on: #5FBFA4; /* teal on dark surface */ --gold: #9A6B14; /* action, link, emphasis */ --gold-bg: #F0E4C8; --gold-on: #E0B860; --amber: #7A5200; /* assumption, caution */ --amber-bg: #F5EBD4; --red: #96322C; /* loss, overrun, risk */ --red-bg: #F4E2DF; --red-on: #D98078; /* ---------- TYPE FAMILIES ---------- */ --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---------- TYPE SCALE (fluid) ---------- Body floor is 16px on every viewport. Table interiors may drop to --t-xs (13px) but never below. --t-label is uppercase mono only. */ --t-mega: clamp(2.9rem, 1.60rem + 5.60vw, 6.2rem); /* 46 → 99 */ --t-h1: clamp(2.1rem, 1.40rem + 3.20vw, 3.9rem); /* 34 → 62 */ --t-h2: clamp(1.55rem,1.20rem + 1.60vw, 2.35rem); /* 25 → 38 */ --t-h3: clamp(1.12rem,1.02rem + 0.45vw, 1.40rem); /* 18 → 22 */ --t-lede: clamp(1.06rem,1.00rem + 0.40vw, 1.28rem); /* 17 → 20 */ --t-body: clamp(1rem, 0.97rem + 0.16vw, 1.06rem); /* 16 → 17 */ --t-sm: 0.938rem; /* 15 */ --t-xs: 0.813rem; /* 13 */ --t-label: 0.688rem; /* 11 mono */ --lh-tight: 1.14; --lh-head: 1.24; --lh-body: 1.65; --lh-data: 1.5; /* ---------- SPACE ---------- */ --gap-2xs: 6px; --gap-xs: 10px; --gap-sm: 14px; --gap-md: 20px; --gap-lg: 28px; --gap-xl: 40px; --pad-card: clamp(20px, 2.6vw, 32px); --pad-feat: clamp(26px, 3.5vw, 44px); --pad-sect: clamp(48px, 6vw, 88px); --gutter: clamp(18px, 3.6vw, 52px); --maxw: 1240px; --measure: 66ch; /* ---------- SHAPE ---------- */ --radius: 2px; /* deliberately near-square */ --radius-pill: 999px; --hair: 1px solid var(--rule); --hair-soft: 1px solid var(--rule-soft); /* ---------- MOTION ---------- */ --dur: .16s; --ease: cubic-bezier(.2,.7,.3,1); /* ---------- TOUCH ---------- */ --tap: 44px; /* minimum interactive target */ } /* ============ BASE ============ The variables above apply everywhere the file is linked. The opinionated base layer below is OPT-IN via [data-ghil-base] on , so pages can be migrated one at a time without the reset fighting whatever styling they still carry. Add the attribute when a page is converted; never before. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} body[data-ghil-base]{ margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--sans); font-size:var(--t-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } [data-ghil-base] :is(h1,h2,h3,h4,h5,h6){margin:0;color:var(--ink);font-weight:400;letter-spacing:-.015em} [data-ghil-base] :is(h1,h2){font-family:var(--display);line-height:var(--lh-tight)} [data-ghil-base] :is(h3,h4,h5,h6){font-family:var(--sans);font-weight:600;line-height:var(--lh-head);letter-spacing:-.008em} [data-ghil-base] h1{font-size:var(--t-h1)} [data-ghil-base] h2{font-size:var(--t-h2)} [data-ghil-base] h3{font-size:var(--t-h3)} [data-ghil-base] p{margin:0} [data-ghil-base] :is(ul,ol){margin:0;padding:0} [data-ghil-base] :is(img,svg,canvas){max-width:100%;height:auto;display:block} [data-ghil-base] a{color:inherit} /* focus ring applies everywhere — accessibility is not opt-in */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--teal);outline-offset:2px;border-radius:1px} /* ============ PRIMITIVES ============ */ .gh-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .gh-label{ font:500 var(--t-label)/1 var(--mono); letter-spacing:.15em;text-transform:uppercase;color:var(--faint); margin:0} .gh-num,[data-num]{font-family:var(--mono);font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} .gh-note{font:italic 400 var(--t-xs)/1.6 var(--mono);color:var(--muted)} .gh-measure{max-width:var(--measure)} /* skip link */ .gh-skip{position:fixed;left:12px;top:-72px;z-index:9999;padding:12px 16px; background:var(--ink);color:var(--paper);font:600 var(--t-sm)/1 var(--sans); text-decoration:none;transition:top var(--dur) var(--ease)} .gh-skip:focus{top:12px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* meaning-bearing accents — the only sanctioned colour use */ .gh-up{color:var(--teal)} .gh-down{color:var(--red)} .gh-hold{color:var(--faint)} .gh-assume{color:var(--amber)} /* tables: never let a data table clip on mobile */ .gh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; background: linear-gradient(90deg, var(--card) 30%, rgba(255,253,247,0)) left / 24px 100% no-repeat, linear-gradient(270deg, var(--card) 30%, rgba(255,253,247,0)) right / 24px 100% no-repeat, linear-gradient(90deg, rgba(20,17,12,.08), rgba(20,17,12,0)) left / 8px 100% no-repeat, linear-gradient(270deg, rgba(20,17,12,.08), rgba(20,17,12,0)) right / 8px 100% no-repeat; background-attachment:local,local,scroll,scroll} /* every interactive control clears the touch floor on coarse pointers */ @media (pointer:coarse){ button,[role=button],a.gh-btn,input[type=checkbox],input[type=radio],select{ min-height:var(--tap)} } /* ============ DARK DATA SURFACE ============ Applied to simulator stages. Reading surfaces stay on --paper. */ .gh-stage{background:var(--stage);color:var(--on-stage-2)} .gh-stage h1,.gh-stage h2,.gh-stage h3{color:var(--on-stage)} .gh-stage .gh-label{color:var(--on-stage-3)} .gh-stage .gh-up{color:var(--teal-on)} .gh-stage .gh-down{color:var(--red-on)} /* ============ PRINT ============ */ @media print{ body{background:#fff;color:#000} .gh-skip,nav,footer{display:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555} }