/* ============================================================ UNCORRELATED — Colors & Type Tokens The visual + verbal system for the Uncorrelated alternative investment conference series. Dark-first, understated luxury. Typefaces: Inter for everything, Archivo for display titles only. Inter (variable, all weights), Archivo (variable) and Cinzel Decorative 700 are self-hosted from assets/fonts/ via the @font-face rules below. There is no CDN import. Bodoni Moda 700/800 (London) is NOT self-hosted by this sheet: no @font-face declares it, so a page that sets it must load it. ------------------------------------------------------------ PHASE 1 RECONCILIATION — 17 Aug 2026. Every line changed or added in this pass is tagged P1 in a comment. Full record, from-value to to-value: "Phase 1 Changelog". Precedence when two files disagree: see START-HERE.html. ============================================================ */ /* Fonts · self-hosted from assets/fonts/, no CDN. 8 Nov 2026. Replaces the three Google Fonts @imports. Paths are relative to this file: a copy elsewhere (e.g. admin/staff-tokens.css) must repoint them. */ @font-face{font-family:'Inter';src:url('assets/fonts/Inter-var-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('assets/fonts/Archivo-var-wdth-wght-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap} /* A1 */ @font-face{font-family:'Cinzel Decorative';src:url('assets/fonts/CinzelDecorative-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* Puerto Rico event name only · ratified Peter Murrugarra, 3 Sep 2026 */ :root { /* ---------- Surfaces ---------- */ --navy: #0F0E0C; /* warm near-black — portal default, dark deck covers */ --navy-mid: #1E1C14; /* raised panels, cards on dark */ --navy-hi: #2A2820; /* hover fills, inputs on dark */ --paper: #FFFFFF; /* light surface — print, formal correspondence */ --paper-soft: #F6F5F2; /* near-white reading surface */ /* NOTE: #0A1628 is NOT a brand colour. It was a pre-June value, retired. If you find it in a file, that file is the bug. /* P1 */ /* ---------- The mark's own inks ---------- /* P1 */ --ink-mark: #08080A; /* the wordmark on light. NOT #000 — a deliberate off-black, matching --unc-ink in assets/wordmark/uncorrelated-wordmark.css. /* P1 */ --paper-mark: #FFFFFF; /* the wordmark on dark. /* P1 */ /* ---------- Primary accent: house / Puerto Rico gold ---------- */ --gold: #C9A84C; /* canonical primary accent */ --gold-lt: #E8C97A; /* lighter sibling — hover, emphasis */ --gold-dim: rgba(201,168,76,0.10); /* soft fill background */ --gold-border: rgba(201,168,76,0.28); /* outlined component borders */ /* ---------- Secondary accent: Miami Blue (cross-event constant) ---------- */ --miami: #0CC0DF; /* speaker accents, LP directory, Meet, Miami flagship */ --miami-lt: #5DD5EF; --miami-dim: rgba(12,192,223,0.10); --miami-border:rgba(12,192,223,0.28); /* ---------- Per-conference accents (one per section, never mixed) ---------- AN EVENT WITH NO RATIFIED ACCENT MUST STILL CARRY A TOKEN SAYING SO. Never leave one absent. Ratified 3 Sep 2026, from three incidents with one cause: a missing accent does not sit inert waiting to be filled correctly — it recruits the nearest plausible value. AltsOps NYC -> #C9A84C (Puerto Rico's gold), in an archived kit AltsOps NYC -> --text-1 / #F5F4F1 (a text role), in the EMC hub Beverly Hills -> #C9A84C again, 114 instances, at print scale #C9A84C is the most recruitable hex in the system because it is the only event gold. All three fills were reasonable inferences from an absence. The contrast with --unc-ratio-newport, which is deliberately ABSENT, is the point: an absent RATIO fails closed — nothing renders without it. An absent ACCENT fails OPEN — everything renders and someone picks. Fail-closed values may be absent. Fail-open values must be stated. ------------------------------------------------------------------------ */ --acc-pr: #C9A84C; /* Puerto Rico · Cinzel Decorative Bold, ratio 1.022 · ratified Peter Murrugarra, 3 Sep 2026 */ --acc-pr-print:#8A6F22; /* PR light/print step — the master gold fails contrast on white. The ONLY legal accented setting on paper · ratified Peter Murrugarra, 3 Sep 2026 */ --acc-altsops: #FFFFFF; /* AltsOps NYC · Inter 900 · WHITE IS THE ACCENT, ratified, not a gap. Never #C9A84C (PR's), never --text-1/#F5F4F1 (a text role, not an accent role). No light step exists: falls through to ink #08080A on paper · ratified Peter Murrugarra, 3 Sep 2026 */ --acc-bh: #E8A620; /* Beverly Hills · MAY 2027 (was wrongly "2026" here) · Tenor Sans 400 CAPS +.14em, ratio 1.048 · single-weight face: below 20px drop to Inter 900 at 1.000, NEVER bump the weight (faux bold is banned on a mark) · ratified Peter Murrugarra, 3 Sep 2026 */ --acc-mgs: #3DAA7B; /* Manager Growth Summit NYC 2026 · parent · muted emerald */ --acc-cayman: #009E59; /* Cayman · Archivo Expanded wdth 118/wght 700, ratio 1.068 · dark surfaces only · ratified Peter Murrugarra, 3 Sep 2026 */ --acc-cayman-light:#007542;/* Cayman light/print step — #009E59 on white fails contrast at body sizes. From templates/cayman-2026 rate-card slide · ratified Peter Murrugarra, 3 Sep 2026 */ /* ---------- Diligence status roles (added 30 Sep 2026) ---------- Named roles for the three diligence states, so a conference colour change can never change a diligence status. No new values: each repeats a value already in this file. Every status still carries an icon and a word. good — Qualified · Operationally Sound (= --acc-cayman-light) mid — Watch · Provisionally Sound (= --gold) bad — Not Qualified · Operational Veto (= --ink-mark; internal only) */ --status-good: #007542; --status-mid: #C9A84C; --status-bad: #08080A; --acc-newport: #13AD37; /* Newport · colour RATIFIED, FACE OPEN — both directions rejected (Libre Caslon 1.044 too close to London; Archivo 500 caps 1.068 would put Archivo on two events). TABLED ratified Peter Murrugarra, 3 Sep 2026. Deliberately NO .evlock--newport class and NO --unc-ratio-newport token: a row is documentation, a class is a build permission. A Newport mark must not be buildable by accident. */ --acc-miami: #0CC0DF; /* Miami 2027 · island · Miami Blue */ --acc-london: #B0674F; /* London 2026 · parent · rosewood — see WARM ACCENTS /* P1 */ --acc-dublin: #1C8C63; /* Dublin 2026 · parent · Irish emerald /* P1 */ /* ---------- Active accent indirection ---------- Designs set --accent to the active conference accent. Default = house accent, Miami Blue (ruled Peter Murrugarra, 26 Oct 2026; Brand Kit Ruling 3, 28 Oct). Override on a section/root to retheme. */ --accent: var(--ua-primary); --accent-lt: var(--ua-primary-lt); --accent-dim: var(--ua-primary-dim); --accent-border: var(--ua-primary-border); /* ---------- Text on dark ---------- */ --text-1: rgba(255,255,255,0.92); /* primary */ --text-2: rgba(255,255,255,0.55); /* secondary — metadata, subtitles */ --text-3: rgba(255,255,255,0.35); /* tertiary — captions, disabled */ /* ---------- Text on light ---------- */ --ink-1: rgba(15,14,12,0.92); --ink-2: rgba(15,14,12,0.58); --ink-3: rgba(15,14,12,0.38); /* ---------- Folio ---------- /* P1 The page number, and a role of its own — NOT a step on the text ramp. --text-3 is the caption-and-disabled step; a folio is wayfinding. Reasoning from the ramp LABEL ("tertiary") is what nearly shipped this dimmer than the rule describes. ONE VALUE, EVERY EVENT VARIANT. The house rule bans the accent on a folio precisely so it reads the same whatever event the document is on — so a per-variant alpha would reintroduce through value the variation the rule forbids in colour. A pass that "helpfully" splits this per variant is not tidying, it is the defect. Never an accent. Never the ink colour. Bottom-left, two-digit zero-padded, Inter semibold at 10pt with slight positive tracking (spc 30 = .03em) — see the pagination block in CLAUDE.md. PER SURFACE, NOT PER VARIANT — the pair below is the whole mechanism, following --border / --border-ink and the wordmark's own --ink-mark / --paper-mark. Both values exist NOW so a light layout cannot arrive without its folio already resolved. */ --folio: rgba(255,255,255,0.50); /* on dark — composites to about #878680 over --navy, matching the PPTX folio at schemeClr lt1 @ 50% */ --folio-ink: #7E838B; /* on light. A named grey, NOT the ink ramp at 0.50 — rgba(15,14,12,0.50) resolves to #878687 on --paper, the same value in a warmer hue. #7E838B is the Cayman / AltsOps document grey and is deliberately cooler. If the two are ever reconciled, reconcile them here — do not re-derive per document. */ /* ---------- Semantic / state ---------- */ --error: #EF4444; /* destructive — OUTLINED only, never solid */ /* ---------- Borders & lines ---------- */ --border: rgba(255,255,255,0.07); /* hairline dividers, card edges on dark */ --border-hi: var(--accent-border); /* emphasized / accent border · follows the accent. Was gold, 8 Nov 2026 */ --border-ink:rgba(15,14,12,0.10); /* hairline on light surfaces */ /* ---------- Radii ---------- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; /* ---------- Elevation (restrained on near-black) ---------- */ --shadow-1: 0 1px 2px rgba(0,0,0,0.40); --shadow-2: 0 8px 24px rgba(0,0,0,0.45); --shadow-3: 0 24px 60px rgba(0,0,0,0.55); --glow-accent: 0 0 0 1px var(--accent-border), 0 10px 30px var(--accent-dim); /* follows the accent; = rgba(12,192,223,0.10) by default. Was gold, 8 Nov 2026 */ /* ---------- Spacing scale (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---------- Typeface ---------- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---------- Display typeface: Archivo ---------- A1, ratified 19 Aug 2026 Archivo is the SECOND and ONLY other face in the system. It is a display face, not a text face: it sets the event name on a cover and in a closing lockup, and nothing else. Body, headings, labels and UI all stay Inter. Archivo is variable on two axes. The ratified instance is width 118 — wider than SemiExpanded, narrower than Expanded — at weight 700. Always set it through --font-display and the .u-display utility below so the axes travel with the family; naming 'Archivo' alone gets you the default width and the title reads too narrow. PowerPoint and other non-variable environments have no width axis. The sanctioned static substitute there is "Archivo SemiExpanded" Bold (width 112.5) — the nearest fixed instance. Expanded (125) overshoots. */ --font-display: 'Archivo', var(--font); --wdth-display: 118; /* @kind font */ /* Archivo width axis */ --fw-display: 700; /* @kind font */ /* Archivo weight axis */ --ls-display: -.02em; /* ---------- Type scale (digital baseline, Rule 13) ---------- Floors: body 16, secondary 14, label 13. Nothing below 13. */ --fs-display: clamp(48px, 9vw, 120px); /* @kind font */ /* wordmark / hero */ --fs-h1: 28px; --fs-h2: 17px; /* card headings, session titles */ --fs-body: 16px; --fs-input: 16px; /* prevents iOS auto-zoom */ --fs-secondary: 14px; /* metadata, subtitles */ --fs-label: 13px; /* labels, badges, tags — ABSOLUTE FLOOR */ --lh-display: 0.92; /* @kind font */ --lh-heading: 1.3; /* @kind font */ --lh-body: 1.5; /* @kind font */ --lh-label: 1.4; /* @kind font */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 900; /* @kind font */ /* tight optical letter-spacing for the wordmark + labels */ --ls-wordmark: -0.03em; /* P1 — was -0.02em. The mark is set at -.03em in all 8 wordmark kits, the construction CSS, the live London page and 26 shipped files. This token is read in exactly one place (.u-wordmark below), so this is a one-line correction: do NOT sweep -0.02em out of the project — all 54 remaining occurrences are heading and display type, and none sit on a wordmark selector. */ --ls-label: 0.14em; /* uppercased labels */ } /* ============================================================ WARM ACCENTS — a documented exception to the 4-variant rule [P1] House pattern: canonical / lighter / 10% tint / 28% border. That pattern was derived on gold (#C9A84C) and Miami Blue (#0CC0DF), both LIGHTER than the warm accents that followed. London found the floor empirically and recorded it in deploy/london-2026/index.html: "rosewood is darker than the gold it replaces and #B0674F on the .12 tint fails 4.5:1." The fix is to carry body text on the LIGHTER sibling, and to lift the tint and border alphas so a tinted card still reads as intentional against near-black. So a warm or dark accent ships SIX variants, not four: --acc-* canonical: rules, bullets, bold leads, badges --acc-*-lt lighter sibling: ALL text on a tinted fill --acc-*-dim fill, .15 (house .10) --acc-*-dim2 whisper fill, .06 --acc-*-tint control fill, .12 --acc-*-border border, .42 (house .28), computed on the LIGHTER sibling — a border built on the dark canonical hex disappears into the panel. Any accent darker than gold inherits this pattern. Do not rediscover the contrast floor; do not flatten these to house. ============================================================ */ /* ---------- London 2026 · rosewood · the reference warm accent ---------- /* P1 */ :root { --acc-london-lt: #D9987F; /* text on tinted fills */ --acc-london-city: #CE8B72; /* the CITY WORD only — a distinct role, not the lighter sibling. This is --unc-rosewood-lt in the construction CSS. */ --acc-london-print: #8E4E38; /* London on light / in print */ --acc-london-dim: rgba(176,103,79,0.15); --acc-london-dim2: rgba(176,103,79,0.06); --acc-london-tint: rgba(176,103,79,0.12); --acc-london-border: rgba(208,141,116,0.42); --acc-london-bd-hi: rgba(208,141,116,0.28); /* quieter border variant */ /* ---------- Dublin 2026 · Irish emerald ---------- /* P1 */ --acc-dublin-lt: #4FBB90; /* OPEN: the Dublin tearsheet uses #5CC49B for the same role. Package value taken provisionally — see the changelog's open items. */ --acc-dublin-print: #166B4A; /* Dublin on light / in print */ --acc-dublin-dim: rgba(28,140,99,0.16); --acc-dublin-dim2: rgba(28,140,99,0.06); --acc-dublin-border: rgba(79,187,144,0.42); } /* ============================================================ SEMANTIC ELEMENT DEFAULTS (dark-first) ============================================================ */ body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-1); background: var(--navy); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Wordmark — Inter 900, lowercase, period included. WHITE on dark / #08080A on light. Never navy, never an accent. THE PERIOD IS PART OF THE MARK. [P1] It takes the mark's colour and nothing else. The .u-dot span is kept as a no-op so existing markup keeps working — do not delete the span, and do not give it a colour. Seven files still carry accent-dot rules of their own; they override this locally and are listed for repair in the Phase 1 changelog. */ .u-wordmark { font-family: var(--font); font-weight: var(--fw-black); letter-spacing: var(--ls-wordmark); text-transform: lowercase; color: var(--paper-mark); /* P1 — was #fff literal */ line-height: 1; } .u-wordmark .u-dot { color: inherit; } /* P1 — was var(--accent) */ .u-wordmark--ink { color: var(--ink-mark); } /* P1 — was #000 */ .u-wordmark--ink .u-dot { color: inherit; } /* P1 — was var(--accent) */ /* Sub-mark suffix grammar: wordmark + product/city in accent. The SUFFIX takes the accent. The period never does. */ .u-submark-suffix { font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent); } h1, .u-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: -0.01em; color: var(--text-1); } h2, .u-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--text-1); } p, .u-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-1); text-wrap: pretty; } .u-secondary { font-size: var(--fs-secondary); color: var(--text-2); line-height: var(--lh-body); } .u-label { font-size: var(--fs-label); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-label); line-height: var(--lh-label); color: var(--text-2); } /* ============================================================ BUTTONS (Rule 3.1–3.3) — three forms, never more. Hover inverts: solid -> outlined, outlined -> solid. "Ghost" is NOT a fourth button form. Where a text link does a navigation job, it is a tertiary LINK style — see .u-link--tertiary below. [P1] ============================================================ */ .u-btn { font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-semibold); min-height: 44px; padding: 0 22px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease; } /* Primary — solid accent */ .u-btn--primary { background: var(--accent); color: var(--navy); border-color: var(--accent); } .u-btn--primary:hover { background: transparent; color: var(--accent); } /* Secondary — outlined neutral, white text */ .u-btn--secondary { background: transparent; color: var(--text-1); border-color: rgba(255,255,255,0.30); } .u-btn--secondary:hover { background: #fff; color: var(--navy); border-color: #fff; } /* Destructive — outlined red only, never solid */ .u-btn--destructive { background: transparent; color: var(--error); border-color: var(--error); } .u-btn--destructive:hover { background: var(--error); color: #fff; } /* ---------- Tertiary link (was "ghost") ---------- /* P1 */ /* A text link doing a navigation job. Renders identically to the ghost treatment already deployed on the London site — this is a rename, not a redesign. It is a LINK, so the button count stays at three. */ .u-link--tertiary { font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-semibold); min-height: 44px; padding: 0 22px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--navy-mid); border: 1px solid var(--border); color: var(--text-2); transition: background .18s ease, color .18s ease, border-color .18s ease; } .u-link--tertiary:hover { background: var(--navy-hi); border-color: var(--accent); color: var(--accent-lt); } /* ============================================================ PER-CONFERENCE ACCENT THEMES Apply to any container to retheme its accent. One per section. ============================================================ */ .theme-pr { --accent: var(--acc-pr); --accent-lt:#E8C97A; --accent-dim:rgba(201,168,76,0.10); --accent-border:rgba(201,168,76,0.28); } .theme-bh { --accent: var(--acc-bh); --accent-lt:#F5C84A; --accent-dim:rgba(232,166,32,0.10); --accent-border:rgba(232,166,32,0.28); } .theme-mgs { --accent: var(--acc-mgs); --accent-lt:#6CB299; --accent-dim:rgba(61,170,123,0.10); --accent-border:rgba(61,170,123,0.28); } .theme-cayman { --accent: var(--acc-cayman); --accent-lt:#33B775; --accent-dim:rgba(0,158,89,0.10); --accent-border:rgba(0,158,89,0.28); } .theme-newport { --accent: var(--acc-newport); --accent-lt:#3FCC5C; --accent-dim:rgba(19,173,55,0.10); --accent-border:rgba(19,173,55,0.28); } .theme-miami { --accent: var(--acc-miami); --accent-lt:#5DD5EF; --accent-dim:rgba(12,192,223,0.10); --accent-border:rgba(12,192,223,0.28); } /* Monochrome: Console home, and any event with no ratified accent. Existing values only, no new colour. 8 Nov 2026 */ .theme-mono { --accent: var(--paper-mark); --accent-lt:var(--paper-mark); --accent-dim:var(--border); --accent-border:var(--text-3); } /* Warm accents — six variants, alphas per the WARM ACCENTS block. /* P1 */ .theme-london { --accent: var(--acc-london); --accent-lt:var(--acc-london-lt); --accent-dim:var(--acc-london-dim); --accent-border:var(--acc-london-border); --accent-dim2:var(--acc-london-dim2); --accent-tint:var(--acc-london-tint); --accent-city:var(--acc-london-city); } .theme-dublin { --accent: var(--acc-dublin); --accent-lt:var(--acc-dublin-lt); --accent-dim:var(--acc-dublin-dim); --accent-border:var(--acc-dublin-border); --accent-dim2:var(--acc-dublin-dim2); } /* ============================================================ U-ALTS — SIBLING BRAND NAMESPACE [P1] U-Alts is a sibling brand, not a skin. Its lockup lineage, wordmark art and cyan variant are legitimate, not drift. Mechanism: a prefixed --ua-* block IN THIS FILE, plus a .brand-ualts scope class. Not a separate stylesheet — the DS compiler harvests tokens from colors_and_type.css and styles.css only, so U-Alts tokens in a third file would be invisible to the Design System tab and to adherence linting. That invisibility is the drift this pass exists to end. SHARED with Uncorrelated (do not fork these): Inter and all six weights · the Rule 13 floors and the whole type scale · the three button forms and hover-invert · the 4px spacing scale · radii · elevation · the surface family (--navy / --navy-mid / --navy-hi / --paper) · the text opacity ramp · voice discipline and the no-emoji rule. BRAND-SPECIFIC (U-Alts owns these): the U-Alts wordmark and its rectangle hyphen · the "by uncorrelated." endorsement lockup · Miami Blue as PRIMARY rather than secondary · the "U-Alts Listed" seal · document-first light surfaces for diligence output. ============================================================ */ :root { --ua-primary: #0CC0DF; /* Miami Blue — U-Alts' primary, not secondary */ --ua-primary-lt: #5DD5EF; --ua-primary-dim: rgba(12,192,223,0.10); --ua-primary-border: rgba(12,192,223,0.28); --ua-hyphen: #0CC0DF; /* the rectangle hyphen. Never the font glyph. */ --ua-ink-mark: #08080A; /* U-Alts wordmark on light */ --ua-paper-mark: #FFFFFF; /* U-Alts wordmark on dark */ } /* Scope U-Alts surfaces with .brand-ualts. Inside it, --accent resolves to Miami Blue, so every shared component themes correctly without knowing which brand it is in. */ .brand-ualts { --accent: var(--ua-primary); --accent-lt: var(--ua-primary-lt); --accent-dim: var(--ua-primary-dim); --accent-border: var(--ua-primary-border); } /* U-Alts wordmark. The hyphen is an empty inline-block rectangle aligned to the A's crossbar — em-scaled, so it works at any size. The container must be inline-block, NOT flex: vertical-align has no effect on a flex item and the dash drops to the baseline, reading "U_Alts". */ .ua-wordmark { font-family: var(--font); font-weight: var(--fw-black); letter-spacing: var(--ls-wordmark); line-height: 1; display: inline-block; white-space: nowrap; text-transform: none; color: var(--ua-paper-mark); } .ua-wordmark--ink { color: var(--ua-ink-mark); } .ua-wordmark .hy { display: inline-block; width: .342em; height: .151em; background: var(--ua-hyphen); vertical-align: .252em; margin: 0 .03em 0 .08em; } /* ============================================================ A1 — Display type utility, ratified 19 Aug 2026. The only sanctioned way to set Archivo. Applying the family without the variation settings is the failure this exists to prevent: it silently renders at the default width. Synced into this project 28 Oct 2026 from the 19 Sep 2026 canonical sheet. ============================================================ */ .u-display { font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display), 'wght' var(--fw-display); font-weight: var(--fw-display); font-stretch: 118%; /* fallback for engines without axes */ letter-spacing: var(--ls-display); line-height: 1.04; } /* Non-variable fallback — print pipelines, Office, older engines. */ @supports not (font-variation-settings: 'wdth' 118) { .u-display { font-family: 'Archivo SemiExpanded', var(--font); } } /* ============================================================ MIST — SECOND SURFACE FAMILY (added 21 Sep 2026) STATUS: TOKENS FOR REVIEW. Nothing consumes these yet. Requested for the U-Alts DD & Allocation Platform as a cool Swiss pale-slate reading surface, alongside — not replacing — the warm paper family (--paper / --paper-soft / --navy). THE BOUNDARY, so this does not become a second house palette: Mist owns SURFACES AND SURFACE INKS ONLY. Accents stay house: --ua-primary #0CC0DF, and the wordmark hyphen --ua-hyphen is untouched (ratified v3, Geoff). The brief's #00b4d8 is NOT adopted — two cyans four hex points apart in one interface is worse than either alone. Semantics stay house: the brief's #10b981 / #f59e0b / #ef4444 are Tailwind defaults and are NOT adopted. Use --ok / --amber / --bad as they already resolve. ONE VALUE NEEDS SIGN-OFF BEFORE ANY FILE USES IT: [P1] --mist-deep #0B192C sits two hex steps from #0A1628, the pre-June navy this file retires by name ("if you find it in a file, that file is the bug"). It was already swept out of 47-ualts-dd-platform once. Either Peter ratifies #0B192C as a NEW value distinct from the retired one, or Mist ships light-only and header rails keep --navy. Do not resolve this by picking the newer file. ============================================================ */ :root { /* light reading surfaces — cool, where --paper-soft is warm */ --mist: #EBF0F3; /* primary ground */ --mist-paper: #FFFFFF; /* card and sheet surface */ --mist-raise: #F4F7F9; /* raised rows, table zebra, group heads */ --mist-line: #D8E0E6; /* hairline */ --mist-line-hi: #C3CED7; /* emphasis border, dashed dropzones */ /* dark surfaces — headers and rails only, pending the P1 above */ --mist-deep: #0B192C; /* [P1] see sign-off note */ --mist-deep-mid: #132238; --mist-deep-hi: #1E293B; /* inks, on the light family */ --mist-ink: #0F172A; /* body — 15.9:1 on --mist */ --mist-ink-soft: #475569; /* labels and subtitles — 7.4:1 */ --mist-ink-cap: #94A3B8; /* muted metadata — 2.9:1, NEVER body text */ --mist-folio: #7E838B; /* matches --folio-ink; a folio is wayfinding */ } /* Scope with .surface-mist, mirroring .brand-ualts. Inside it the shared surface names resolve cool, so components theme without knowing which family they are in. Accent is deliberately absent — it continues to resolve from .brand-ualts. */ .surface-mist { --shell: var(--mist); --paper: var(--mist-paper); --raise: var(--mist-raise); --line: var(--mist-line); --line-hi: var(--mist-line-hi); --ink: var(--mist-ink); --ink-soft: var(--mist-ink-soft); --ink-cap: var(--mist-ink-cap); --folio: var(--mist-folio); }