/* ========================================================================== The Terminology Tales — Brand Tokens v4.0 (single source of truth) "Vellum & Ink." A luxury editorial system: mostly neutral, one anchor, one precious accent. paper — warm vellum, the page. Layered: sheet (raised), paper-2 (the stone wash of an alternating section), paper-3 (pressed). ink — a deep navy. Headlines, the seal, buttons, and the two ink pages per site (the Throat band, the colophon). The anchor tone. text — carbon with a cool cast: body copy. Not the navy; 13.6:1 in a serif at reading size is harsh. ash — warm stone-grey: the caption voice (labels, meta, table heads). steel — the seal's second blue: links, active states. brass — aged brass, the one precious accent. Rules, ornament, the motto, the seal's foil on navy, an active nav underline. Never body text, never a fill, never a gradient. No white, no pure black, no grey without warmth, no gradient louder than the two-blue ombré of the one ink page per view. Type. Newsreader (one serif at every optical size: display for headlines, text for reading), Hanken Grotesk (the caption voice: small tracked capitals for labels, nav, buttons, metadata), Cinzel (inscriptional capitals — the seal's ring and the house motto only), Great Vibes (the wordmark only), Gentium Ling for every linguistic form, Amiri and Noto Nastaliq Urdu for the scripts that need them. Token names are hue-neutral; a palette change is values only. When a value changes, change it HERE and propagate — never fork a :root. Palette history: see docs/VERSIONS.md. v1 white and plum; v2 plum ink on parchment; v3 navy on powder blue; v4 this — the blues kept as anchor and accent, the page returned to a warm vellum, brass added as the one precious accent, and the whole system tightened for a luxury editorial register. ========================================================================== */ :root { /* ---- Paper — layered surfaces ------------------------------------------------ */ --paper: #F4F1EA; /* the page: warm vellum, hsl(42,31%,94%) */ --sheet: #FAF8F3; /* a raised sheet: cards, plates, the player, the register */ --paper-2: #ECE8DF; /* the stone wash: alternating sections, notes, table heads */ --paper-3: #E2DDD2; /* pressed: hover fills, selected rows */ --field: #FCFBF8; /* inputs */ /* legacy aliases kept for the instruments; new rules use the names above */ --paper-lift: var(--sheet); --wash: var(--paper-2); --wash-deep: var(--paper-3); /* ---- Ink — the anchor ------------------------------------------------------------ */ --ink: #0F2B4A; /* navy: headlines, the seal, buttons, the ink pages */ --ink-mid: var(--steel); --ink-hover: #234C5E; --ink-deep: #0A1F37; /* the colophon's base */ --band-top: #285C76; /* the light end of the one ombré page */ --band-mid: #163D5C; /* ---- Steel — links and the second blue ----------------------------------------- */ --steel: #2C6076; --steel-deep: #234C5E; --accent: var(--steel); /* legacy alias */ --accent-deep: var(--steel-deep); /* ---- Text ---------------------------------------------------------------------------- */ --text: #1F2530; --text-2: #4A5261; --text-quiet: #5F6774; --ash: #6E6A63; /* the caption voice on paper and sheet */ --ash-deep: #5C5851; /* the caption voice on the stone wash */ /* ---- Brass — the precious accent ------------------------------------------------- */ --brass: #9A7B3F; /* rules, ornament, large numerals; never small text */ --brass-deep: #7E6432; /* the motto and any brass small text */ --foil: #C9A961; /* brass on the ink pages */ /* ---- Paper on ink — the light type of the ink pages ---------------------------- */ --vellum: #E8E2D4; /* body on ink */ --sky: #BFD0DC; /* secondary on ink */ --haze: #8FB0C4; /* DECORATION ONLY */ /* ---- Rules ---------------------------------------------------------------------------- */ --line: #D5D2CB; /* the paper's creases */ --line-strong: #B9B6AF; --line-ink: #0F2B4A; /* engraved: 1px navy, or the 3px double rule */ --line-brass: #9A7B3F; /* the accent hairline: eyebrows, the motto, the proof line */ --line-on-ink: rgba(232, 226, 212, 0.2); /* ---- The ombré — one ink page per view --------------------------------------- */ --band-grad: linear-gradient(172deg, #285C76 0%, #163D5C 52%, #0F2B4A 100%); --band-glow: radial-gradient(75% 70% at 0% 100%, rgba(232, 226, 212, 0.10), rgba(232, 226, 212, 0) 62%); --ink-grad: linear-gradient(180deg, #0F2B4A 0%, #0A1F37 100%); --plate-grad: linear-gradient(165deg, #FAF8F3 0%, #F4F1EA 100%); --wash-grad: linear-gradient(180deg, #F4F1EA 0%, #ECE8DF 100%); --vignette: radial-gradient(120% 85% at 50% 35%, rgba(15, 43, 74, 0) 60%, rgba(15, 43, 74, 0.045) 100%); /* ---- Grain ------------------------------------------------------------------------------ */ --grain-ink: url(../img/grain-ink.png); --grain-light: url(../img/grain-light.png); /* ---- Legacy aliases kept for old selectors; the appraisal apparatus (ranks, the asterisk ladder, the tilde) was withdrawn in v5.0 — do not use ------------- */ --rank-0: #1F2530; --rank-1: #0F2B4A; --rank-2: #2C6076; --rank-3: #586170; --tilde: #2C6076; --tilde-on-ink: #BFD0DC; /* ---- Semantic states ------------------------------------------------------------------ */ --ok: #2E5E4E; --ok-bg: #DFE1D9; --warn: #7A5A2A; --warn-bg: #E7E1D6; --error: #8E3B45; --error-bg: #EBDED8; /* ---- Focus (WCAG 1.4.11) ---------------------------------------------------------------- */ --focus-ring: var(--steel); --focus-ring-on-ink: var(--foil); /* ---- Tints — composites over vellum ---------------------------------------------- */ --ink-tint: rgba(15, 43, 74, 0.05); /* the depth scale: The Throat's six storeys, deepest first — one navy that lightens toward the lips, so the airway in the plate and the tower beside it can be read by tone as well as by numeral */ --depth-1: #0F2B4A; --depth-2: #1E3F5A; --depth-3: #2D536B; --depth-4: #3D667B; --depth-5: #4C7A8C; --depth-6: #5B8E9C; --ink-tint-2: rgba(15, 43, 74, 0.10); /* ---- Type ------------------------------------------------------------------------------- display — Newsreader, optical size auto (72 at headline sizes). Weight 500. reading — Newsreader, optical size auto (16–20 at text sizes). Weight 400. caps — Hanken Grotesk 500–600, uppercase, tracked: labels, nav, buttons, metadata, table heads, chips. The caption voice. seal — Cinzel: the seal's ring and the house motto. Nowhere else. script — Great Vibes: the wordmark. Nowhere else. forms — Gentium Ling: every linguistic form and asterisk. */ --font-display: 'Newsreader', 'Times New Roman', Times, Georgia, serif; --font-reading: 'Newsreader', 'Times New Roman', Times, Georgia, serif; --font-caps: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-seal: 'Cinzel', 'Trajan Pro', Georgia, serif; --font-script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive; --font-forms: 'Gentium Ling', 'Gentium Book Plus', 'Palatino Linotype', Georgia, serif; --font-ui: var(--font-caps); --font-arabic: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Times New Roman', serif; --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Amiri', serif; --font-hebrew: 'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif; --font-japanese: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif; /* Scale */ --t-xs: 0.75rem; /* 12px meta */ --t-sm: 0.875rem; /* 14px captions */ --t-md: 1rem; /* 16px interface */ --t-read: 1.15rem; /* 18.4px reading body */ --t-lg: 1.3rem; /* deks */ --t-xl: 1.5rem; /* h3 */ --t-2xl: clamp(1.85rem, 1.3rem + 1.8vw, 2.7rem); /* h2 */ --t-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem); /* h1 */ --t-hero: clamp(3rem, 1.4rem + 6.2vw, 6.8rem); /* the wordmark */ --t-cap: 0.6875rem; /* 11px the caption voice */ --t-cap-sm: 0.625rem; /* 10px chips, table heads */ --lh-tight: 1.02; --lh-head: 1.1; --lh-read: 1.6; --lh-ui: 1.45; --track-display: -0.012em; --track-head: -0.006em; --track-caps: 0.16em; --track-caps-sm: 0.12em; /* ---- Space, radius, shadow ---------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --wrap: 74rem; --wrap-read: 40rem; /* ≈ 66ch of Newsreader at 18.4px */ --gutter: clamp(1.25rem, 4.5vw, 3rem); --r-chip: 2px; --r-card: 2px; --shadow-player: 0 18px 50px rgba(15, 43, 74, 0.12); --deboss: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 -1px 0 rgba(15, 43, 74, 0.18)); --emboss-on-ink: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 -1px 0 rgba(232, 226, 212, 0.12)); /* ---- Motion — one curve, three tiers, full reduced-motion parity -------------------- */ --ease-luxe: cubic-bezier(.22, 1, .36, 1); --d-fast: 180ms; --d-base: 360ms; --d-slow: 720ms; --rise: 10px; } /* Contrast ledger — every rendered pair, computed (WCAG 2.x relative luminance). Text 4.5:1, large text 3:1, non-text boundaries 3:1. Gradients checked at both ends. ink on paper 12.71 headlines, the anchor text on paper 13.63 body text-2 on paper 6.97 secondary text-quiet on paper 5.06 captions, meta ash on paper 4.77 labels (the caption voice) ash on sheet 5.07 labels on a raised sheet ash-deep on paper-2 5.78 labels on the stone wash — never plain ash there (4.40) steel on paper 6.12 links, active states steel on paper-2 5.65 links on the wash rank-3 on paper 5.54 legacy token, unused — kept for the record brass-deep on paper 4.96 the motto, brass small text (rare) brass on paper 3.53 RULES, ORNAMENT, LARGE NUMERALS ONLY — never small text ok / warn / error on paper 6.58 / 5.60 / 6.51 form states paper on ink 12.71 headlines on the ink pages vellum on ink 11.10 body on the ink pages sky on ink 9.06 secondary on the ink pages foil on ink 6.37 brass foil: the seal, rules, small caps on ink vellum on band-top 5.64 body at the light end of the ombré sky on band-top 4.60 secondary at the light end foil on band-top 3.24 LARGE / DECORATIVE ONLY at the light end paper on steel 6.12 chip labels ink on vellum@.6 4.95 tower storey labels at the ink end haze on paper 2.03 DECORATIVE ONLY line-strong on paper 1.79 DECORATIVE ONLY — hairlines Rule: no colour is added to this file without a ledger line. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --rise: 0px; } }