/* ===================================================================== KITHE — bekithe.com design tokens · READING EDITION HOW TO ADJUST: change a Tier-1 primitive to restyle globally; change a Tier-2 semantic alias to re-map a role. This file is the single source of truth — no design values live in index.html. Structure (one :root block, three tiers, top to bottom): TIER 1 — PRIMITIVES raw values. The ONLY place literal hex/px live. TIER 2 — SEMANTIC role names. The page always uses these. TIER 3 — COMPONENT knobs for repeated components. Reference Tier 2. Type discipline (the reading edition's law): exactly FOUR voices — CHAPTER LABEL small mono, faint, wide-tracked → --text-label DISPLAY Archivo, one size per level → --text-heading / --text-hero BODY the reading face, short measure → --text-body (+ --text-lead) SAGE QUOTE the serif, the two philosophical → --text-sage Never more than 2–3 sizes on one phone screenful. Convention note: index.html media queries use `ch` widths (e.g. 90ch) because custom properties cannot be read inside @media conditions. ===================================================================== */ :root { /* =================================================================== TIER 1 — PRIMITIVES (raw values) =================================================================== */ /* ---- Color · "Moss & Stone", day/light only ---------------------- */ --c-stone: #C3C5BE; /* page ground */ --c-panel: #E9EAE4; /* raised paper panel */ --c-panel-sunk: #DCDED7; /* recessed panel */ --c-panel-mine: #D3DAC7; /* "mine" — surfaces that belong to the owner */ --c-panel-mine-sunk: #C4CDB5; /* recessed "mine" surface (the plot of land) */ --c-ink: #292B25; /* text + strokes */ --c-muted: #474940; /* secondary text */ --c-faint: #5D5F54; /* captions, hairlines-in-spirit */ --c-moss: #88A25F; /* the ONE accent */ --c-moss-ink: #21270F; /* text on moss */ --c-on-ink: #E9EAE4; /* text on ink */ --c-danger: #9C5A44; /* honest-limits marker only */ --c-danger-ink: #F1EEE7; /* text on danger */ /* ---- Texture · the living ground ---------------------------------- */ /* Paper grain: inline SVG turbulence, tiled. Self-contained data URI — no request leaves the page. */ --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); --op-grain: 0.05; /* grain layer opacity */ --op-contour: 0.12; /* survey contour-line opacity */ /* ---- Space -------------------------------------------------------- */ --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-15: 15px; --sp-16: 16px; --sp-22: 22px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px; --sp-160: 160px; --sp-192: 192px; /* ---- Radius ------------------------------------------------------- */ --r-control: 3px; --r-card: 4px; --r-screen: 8px; --r-full: 9999px; /* ---- Border width ------------------------------------------------- */ --bw-stroke: 2px; --bw-hair: 1px; /* ---- Font size · the STRICT scale (seven steps, nothing else) ----- */ --fs-xs: 12px; /* labels, captions */ --fs-sm: 14px; /* mono interface */ --fs-md: 17px; /* the reading size */ --fs-lg: 20px; /* living-card value */ --fs-lead: clamp(21px, 18px + 1.2vw, 26px); /* lead / stanza line */ --fs-heading: clamp(33px, 25px + 2.8vw, 50px); /* chapter head */ --fs-sage: clamp(26px, 20px + 2.4vw, 38px); /* the serif voice */ --fs-hero: clamp(44px, 26px + 5.4vw, 92px); /* title page only */ /* ---- Line height ---------------------------------------------------- */ --lh-xs: 16px; --lh-sm: 20px; --lh-md: 24px; /* pairs with --fs-md when set solid (card name) */ --lh-lg: 28px; /* pairs with --fs-lg mono */ --lh-lead: 1.3; /* unitless — lead lines */ --lh-heading: 1.06; /* unitless — chapter heads */ --lh-hero: 1.01; /* unitless — tracks the fluid hero size */ --lh-body: 1.75; /* unitless ratio for reading copy */ --lh-quote: 1.45; /* unitless — the serif sage voice breathes more */ /* ---- Weight --------------------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Family --------------------------------------------------------- */ --ff-head: 'Archivo', sans-serif; --ff-mono: 'IBM Plex Mono', monospace; /* PROVISIONAL — the warm humanist reading face. One token; swap it here and every body paragraph on the site follows. */ --ff-body: 'Seravek', 'Gill Sans Nova', 'Trebuchet MS', Ubuntu, Calibri, 'DejaVu Sans', sans-serif; /* PROVISIONAL — the sage voice. A warm humanist serif for the two philosophical blockquotes only. One token; swap it here later. */ --ff-quote: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; /* ---- Letter spacing -------------------------------------------------- */ --ls-wide: 0.14em; /* chapter labels */ --ls-wider: 0.24em; /* wordmark */ --ls-tight: -0.015em; /* large display heads */ --ls-tighter: -0.03em; /* the hero head only */ /* ---- Motion ----------------------------------------------------------- */ --t-quick: 150ms; --t-pop: 240ms; /* quick fade-up of a stroke as it starts drawing */ --t-chip-fade: 500ms; --t-fill: 600ms; /* diagram fills/labels fading in after the draw */ --t-slow: 700ms; --t-card-cross: 900ms; /* living-card value crossfade (each direction) */ --t-draw: 1400ms; /* one diagram stroke drawing itself */ --t-chip-hold: 2600ms; /* how long "· just updated" stays */ --t-card-cycle: 5500ms; /* living-card update loop */ --t-ground: 60s; /* ground contour drift, one direction */ --ease-drift: cubic-bezier(0.19, 0.6, 0.24, 1); --ease-ground: ease-in-out; --drift-x: -1.5%; /* ground drift travel */ --drift-y: 1%; --drift-scale: 1.04; /* ---- Layout ------------------------------------------------------------ */ --w-page: 760px; /* ONE book column — the reading edition's page */ --w-card: 360px; /* living hero card max width */ --w-diagram-min: 640px; /* a plat never shrinks below legibility; it pans */ --w-ph-logo: 260px; /* logo-lockup placeholder max width */ --w-ph-phone: 280px; /* app-screen placeholder max width */ --w-ph-wide: 520px; /* wide app-detail placeholder max width */ --h-title: 88svh; /* the title page (small-viewport units) */ --h-title-vh: 88vh; /* fallback where svh is unsupported */ --h-stanza: 78svh; /* a full-screen sage-quote page */ --h-stanza-vh: 78vh; /* fallback */ --z-back: -1; /* behind all content */ /* ---- Aspect ratios (placeholder figures) -------------------------------- */ --ar-logo: 5 / 2; /* a lockup is wide and short */ --ar-phone: 9 / 16; /* an app screen */ --ar-wide: 4 / 3; /* a cropped app detail */ /* =================================================================== TIER 2 — SEMANTIC (roles; markup uses these, never primitives) =================================================================== */ /* ---- Color roles ---------------------------------------------------- */ --color-bg: var(--c-stone); --color-surface: var(--c-panel); --color-surface-sunk: var(--c-panel-sunk); --color-surface-mine: var(--c-panel-mine); --color-surface-mine-sunk: var(--c-panel-mine-sunk); --color-text: var(--c-ink); --color-text-muted: var(--c-muted); --color-text-faint: var(--c-faint); --color-accent: var(--c-moss); --color-on-accent: var(--c-moss-ink); --color-border: var(--c-ink); --color-hairline: var(--c-ink); --color-rule: var(--c-faint); /* survey hairlines between sections */ --color-danger: var(--c-danger); --color-on-danger: var(--c-danger-ink); --color-focus: var(--c-ink); --color-on-ink: var(--c-on-ink); /* ---- Space roles · the book's vertical rhythm ------------------------ */ --space-gutter: var(--sp-22); --space-row: var(--sp-15); --space-stanza: var(--sp-32); /* stanza-to-stanza — a full blank line of air */ --space-block: var(--sp-48); /* block-to-block inside a chapter */ --space-breath: clamp(var(--sp-48), 10vw, var(--sp-64)); /* head-to-content air */ --space-figure: clamp(var(--sp-64), 18vw, var(--sp-96)); /* air around figures */ --space-section: clamp(var(--sp-96), 28vw, var(--sp-160)); /* chapter break — a page turn */ --space-section-grand: clamp(var(--sp-128), 34vw, var(--sp-192)); /* the §④ embassy moment */ /* ---- Type roles · the FOUR voices (font shorthand bundles) ----------- */ /* CHAPTER LABEL — the quiet section marker */ --text-label: var(--fw-medium) var(--fs-xs)/var(--lh-xs) var(--ff-mono); --text-caption: var(--fw-regular) var(--fs-xs)/var(--lh-xs) var(--ff-mono); --text-mono-md: var(--fw-medium) var(--fs-sm)/var(--lh-sm) var(--ff-mono); --text-mono-lg: var(--fw-medium) var(--fs-lg)/var(--lh-lg) var(--ff-mono); /* BODY — the reading voice */ --text-body: var(--fw-regular) var(--fs-md)/var(--lh-body) var(--ff-body); /* LEAD — the short strong line that opens or lands a thought */ --text-lead: var(--fw-semibold) var(--fs-lead)/var(--lh-lead) var(--ff-head); /* DISPLAY — one size per level, nothing in between */ --text-heading: var(--fw-black) var(--fs-heading)/var(--lh-heading) var(--ff-head); --text-hero: var(--fw-black) var(--fs-hero)/var(--lh-hero) var(--ff-head); /* SAGE — serif, only the two philosophical blockquotes */ --text-sage: var(--fw-regular) var(--fs-sage)/var(--lh-quote) var(--ff-quote); --tracking-label: var(--ls-wide); --tracking-wordmark: var(--ls-wider); --tracking-display: var(--ls-tight); --tracking-hero: var(--ls-tighter); /* ---- Layout roles ------------------------------------------------------ */ --measure: 56ch; /* body reading measure */ --measure-quote: 26ch; /* the sage page — one thought, wide margin */ --content-max: var(--w-page); /* the book column */ --layer-ground: var(--z-back); /* the living ground sits behind everything */ /* =================================================================== TIER 3 — COMPONENT (knobs for repeated components) =================================================================== */ /* ---- Living ground (fixed page background) ----------------------------- */ --ground-grain: var(--tex-grain); --ground-grain-opacity: var(--op-grain); --ground-contour-opacity: var(--op-contour); --ground-contour-color: var(--color-text-faint); --ground-contour-width: var(--bw-hair); --ground-drift-duration: var(--t-ground); --ground-drift-x: var(--drift-x); --ground-drift-y: var(--drift-y); --ground-drift-scale: var(--drift-scale); --ground-ease: var(--ease-ground); /* ---- Panel (bordered flat card) --------------------------------------- */ --panel-bg: var(--color-surface); --panel-border-color: var(--color-border); --panel-border-width: var(--bw-stroke); --panel-border: var(--panel-border-width) solid var(--panel-border-color); --panel-radius: var(--r-card); --panel-pad: var(--sp-24); /* ---- Title page (the hero as a book's opening page) --------------------- */ --title-min-h: var(--h-title); --title-min-h-fallback: var(--h-title-vh); /* ---- Stanza page (a full-screen sage-quote spread) ----------------------- */ --stanza-min-h: var(--h-stanza); --stanza-min-h-fallback: var(--h-stanza-vh); /* ---- Living card (the quiet demonstration below the title) --------------- */ --card-bg: var(--color-surface-mine); --card-border: var(--bw-stroke) solid var(--color-border); --card-radius: var(--r-card); --card-pad: var(--sp-24); --card-max: var(--w-card); --card-cross: var(--t-card-cross); --card-cycle: var(--t-card-cycle); --card-name-font: var(--fw-semibold) var(--fs-md)/var(--lh-md) var(--ff-head); /* the plot of land the card sits on */ --card-plot-bg: var(--color-surface-mine-sunk); --card-plot-border: var(--bw-hair) dashed var(--color-text-faint); --card-plot-radius: var(--r-screen); --card-plot-pad: var(--sp-12); /* the "· just updated" chip */ --chip-bg: var(--color-accent); --chip-text: var(--color-on-accent); --chip-border: var(--bw-hair) solid var(--color-border); --chip-radius: var(--r-full); --chip-pad-y: var(--sp-2); --chip-pad-x: var(--sp-12); --chip-fade: var(--t-chip-fade); --chip-hold: var(--t-chip-hold); /* ---- Sage quote mark (the short moss rule above each quote) --------------- */ --quote-mark-color: var(--color-accent); --quote-mark-width: var(--sp-48); --quote-mark-thickness: var(--bw-stroke); --quote-mark-gap: var(--space-block); /* ---- Placeholder figures (deliberate, framed, labeled) -------------------- They must read as intention, never as broken content. */ --ph-bg: var(--color-surface-sunk); --ph-border: var(--bw-hair) dashed var(--color-text-faint); --ph-radius: var(--r-screen); --ph-pad: var(--sp-24); --ph-caption-font: var(--text-caption); --ph-caption-color: var(--color-text-faint); --ph-caption-tracking: var(--tracking-label); --ph-mark-color: var(--color-text-faint); --ph-mark-size: var(--sp-12); --ph-mark-stroke: var(--bw-hair); --ph-aspect-logo: var(--ar-logo); --ph-aspect-phone: var(--ar-phone); --ph-aspect-wide: var(--ar-wide); --ph-max-logo: var(--w-ph-logo); --ph-max-phone: var(--w-ph-phone); --ph-max-wide: var(--w-ph-wide); /* ---- Text links ----------------------------------------------------------- */ --link-color: var(--color-text); --link-underline-color: var(--color-accent); --link-underline-width: var(--bw-stroke); --link-underline-width-hover: var(--sp-4); --link-underline-gap: var(--sp-4); /* ---- Store badge (coming-soon, disabled) ----------------------------------- */ --badge-bg: var(--color-surface-sunk); --badge-text: var(--color-text-muted); --badge-border-color: var(--color-text-faint); --badge-border-width: var(--bw-hair); --badge-radius: var(--r-full); --badge-pad-y: var(--sp-12); --badge-pad-x: var(--sp-24); --badge-font: var(--text-label); /* ---- Diagrams (inline SVG) ---------------------------------------------------- */ --diagram-stroke: var(--color-border); --diagram-surface: var(--color-surface); --diagram-surface-sunk: var(--color-surface-sunk); --diagram-mine: var(--color-surface-mine); --diagram-mine-sunk: var(--color-surface-mine-sunk); --diagram-faint: var(--color-text-faint); --diagram-accent: var(--color-accent); --diagram-label: var(--color-text-muted); --diagram-caption: var(--color-text-faint); --diagram-min: var(--w-diagram-min); /* below this, the plat pans */ --diagram-air: var(--space-figure); /* room around each plat */ /* ---- Diagram draw-on-scroll (the surveyor's plat) ------------------------------- */ --draw-duration: var(--t-draw); --draw-stagger: var(--t-quick); --draw-pop: var(--t-pop); --draw-fill: var(--t-fill); --draw-ease: var(--ease-drift); --draw-detail-delay: calc(var(--t-draw) + var(--t-quick) * 4); /* ---- Survey rules + margin labels ------------------------------------------------ */ --rule: var(--bw-hair) solid var(--color-rule); --survey-label-pad: var(--sp-8); /* ---- Honest-limits panel marker -------------------------------------------------- */ --honest-bar-color: var(--color-danger); --honest-bar-width: var(--sp-8); /* ---- Scroll reveal -------------------------------------------------------------------- */ --reveal-shift: var(--sp-16); --reveal-duration: var(--t-slow); --reveal-ease: var(--ease-drift); --reveal-stagger: var(--t-quick); }