/* ===================================================================== vrhshk DESIGN CODE — design-tokens.css (v1, 2026-09-06) Semantic tokens for product / SaaS UI in the vrhshk visual language. Status legend (see DESIGN_CODE.md): [SOURCE] exact value from the reference landing CSS [NORMALIZED] landing used irregular values; rounded to the scale [DERIVED] not in the source; derived by the system's rules [UNKNOWN] not established — placeholder, decide before use The style is single-theme (dark, warm). There is no light theme. Do not add a light palette without redefining the visual identity. ===================================================================== */ :root { color-scheme: dark; /* ---------- BACKGROUNDS (warm brown-black; never neutral grey) ---- */ --bg-canvas: #120e0a; /* [SOURCE] page ground (--ground) */ --bg-sunken: #0c0906; /* [SOURCE] deepest: recessed areas, tooltips, footer ground */ --bg-surface: #1e1712; /* [SOURCE] panel / card base (--stone) */ --bg-surface-deep: #181209; /* [SOURCE] lower stop of panel gradient */ --bg-elevated: #241b14; /* [SOURCE] top stop of popover/card gradient */ --bg-elevated-hi: #2a2018; /* [SOURCE] lit edge of raised stone (--stone-2) */ --bg-subtle: rgba(201,161,95,.06); /* [DERIVED] zebra rows, disabled fields */ --bg-hover: rgba(201,161,95,.08); /* [DERIVED] row / menu-item hover */ --bg-selected: rgba(201,161,95,.14); /* [SOURCE] = accent-soft; selected segment, active nav */ --surface-gradient: linear-gradient(160deg, #2a2119, #181209 60%, #120d09); /* [SOURCE] panel */ --elevated-gradient: linear-gradient(180deg, #241b14, #160f0b 65%, #0f0b08); /* [SOURCE] popover / pennant */ --row-gradient: linear-gradient(180deg, #1d150f, #120d09); /* [SOURCE] plate / list card */ /* ---------- TEXT (parchment ink; hierarchy by tone, not weight) --- */ --text-primary: #e9dcc2; /* [SOURCE] --ink 14.1:1 on canvas */ --text-secondary: #a89273; /* [SOURCE] --ink-dim 6.0:1 on surface */ --text-tertiary: #94806a; /* [DERIVED] metadata 4.7:1 on surface */ --text-disabled: #5e4f3f; /* [DERIVED] intentionally ~2:1 */ --text-accent: #f1cf8f; /* [SOURCE] --gold-hi: titles on stone, links hover */ --text-on-accent: #120e0a; /* [DERIVED] text on solid gold */ /* ---------- BORDERS (always gold at alpha; never opaque grey) ----- */ --border-subtle: rgba(201,161,95,.16); /* [SOURCE] inner frame line, table rows */ --border-default: rgba(201,161,95,.28); /* [SOURCE] --rule: panels, fields, dividers */ --border-strong: rgba(201,161,95,.45); /* [SOURCE] hover / focused-within / modal edge */ --border-highlight: rgba(241,207,143,.18); /* [SOURCE] 1px inset top light on stone */ --border-focus: #f1cf8f; /* [SOURCE] 2px outline, offset 4px */ /* ---------- ACCENT (gold = light, not paint) ---------------------- */ --accent-primary: #c9a15f; /* [SOURCE] --gold */ --accent-hover: #f1cf8f; /* [SOURCE] --gold-hi */ --accent-pressed: #a8844c; /* [DERIVED] */ --accent-soft: rgba(201,161,95,.14); /* [SOURCE] primary button fill top */ --accent-soft-hover:rgba(201,161,95,.20); /* [SOURCE] primary button hover */ --accent-glow: rgba(241,207,143,.30); /* [SOURCE] drop-shadow on brand mark only */ --accent-ramp: linear-gradient(180deg, #f6e6c4 0%, #d9b97e 52%, #9c7843 100%); /* [SOURCE] display text only */ --accent-line: linear-gradient(90deg, transparent, #c9a15f, transparent); /* [SOURCE] active/selected hairline */ /* ---------- SEMANTIC [DERIVED — not in source] -------------------- Desaturated, warm-shifted so they sit inside the sepia world. Used only in badges, status rings/dots, inline message hairlines, toast hairlines and the value text itself. Never as decoration. */ --success: #8aa87a; --success-soft: rgba(138,168,122,.14); --warning: #d07a3a; --warning-soft: rgba(208,122,58,.14); /* NOT gold: gold is the accent */ --danger: #c25b4a; --danger-soft: rgba(194,91,74,.14); --info: #7f9bb3; --info-soft: rgba(127,155,179,.14); --neutral: #94806a; --neutral-soft: rgba(201,161,95,.08); /* "draft", "idle" */ /* ---------- TYPOGRAPHY -------------------------------------------- */ --font-display: 'Oranienbaum', 'Times New Roman', Georgia, serif; /* [SOURCE] one weight: 400 */ --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif; /* [SOURCE] 400, 500, italic 400 */ --font-hand: 'Marck Script', 'Segoe Script', 'Bradley Hand', cursive; /* [SOURCE] LANDING-ONLY */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* [UNKNOWN] no mono established */ --weight-regular: 400; --weight-medium: 500; /* max weight in the system */ --text-xs: .6875rem; /* 11px metadata floor — never smaller */ --text-sm: .8125rem; /* 13px caption, badge, table meta */ --text-md: .9375rem; /* 15px secondary body, dense rows */ --text-base: 1rem; /* 16px product body (landing used 18px) */ --text-lg: 1.125rem; /* 18px lede, landing body */ --text-xl: 1.25rem; /* 20px card title (display face) */ --text-2xl: 1.5rem; /* 24px section title */ --text-3xl: 2.25rem; /* 36px page title cap in product */ --text-display: clamp(3.6rem, 9vw, 8.2rem); /* [SOURCE] LANDING-ONLY */ --leading-display: .92; /* [SOURCE] */ --leading-title: 1.02; /* [SOURCE] */ --leading-snug: 1.15; --leading-body: 1.5; /* [SOURCE] */ --leading-caps: 1.75; /* [SOURCE] stacked uppercase lines */ --tracking-display: .02em; /* [SOURCE] */ --tracking-title: .04em; /* [SOURCE] h2 */ --tracking-section: .06em; /* [SOURCE] plaque titles .07em */ --tracking-caps: .20em; /* [SOURCE] labels */ --tracking-button: .22em; /* [SOURCE] */ --tracking-meta: .24em; /* [SOURCE] .24–.26em */ --tracking-eyebrow: .28em; /* [SOURCE] */ /* ---------- SPACING [NORMALIZED] ---------------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-120: 120px; /* landing section padding only */ --gutter: 24px; /* [SOURCE] frame = 100% - 48px */ --gutter-mobile: 16px; /* [SOURCE] frame = 100% - 32px */ /* ---------- GEOMETRY ---------------------------------------------- */ --radius-none: 0; /* [SOURCE] default for everything built of "stone" */ --radius-object: 12px; /* [SOURCE] only for depictions of physical objects (a card) */ --radius-round: 50%; /* [SOURCE] rings, holes, knobs, brand mark */ --border-width: 1px; /* [SOURCE] the only border width */ --focus-width: 2px; /* [SOURCE] */ --focus-offset: 4px; /* [SOURCE] */ --frame-inset: 8px; /* [SOURCE] inner hairline of a framed panel (landing: 9px) */ /* ---------- SHADOWS / DEPTH --------------------------------------- */ --inset-highlight: inset 0 1px 0 rgba(241,207,143,.18); /* [SOURCE] */ --inset-vignette: inset 0 0 48px rgba(0,0,0,.65); /* [SOURCE] */ --shadow-raised: 0 24px 40px -28px rgba(0,0,0,1); /* [SOURCE] */ --shadow-panel: inset 0 1px 0 rgba(241,207,143,.18), inset 0 0 48px rgba(0,0,0,.65), 0 40px 60px -30px rgba(0,0,0,.95); /* [SOURCE] */ --shadow-popover: 0 24px 40px -20px rgba(0,0,0,.9); /* [DERIVED from raised] */ --shadow-modal: 0 40px 80px -30px rgba(0,0,0,.95); /* [DERIVED from panel] */ --shadow-text: 0 1px 0 rgba(0,0,0,.7); /* [SOURCE] "carved" caps */ --shadow-title: 0 2px 0 rgba(0,0,0,.6); /* [SOURCE] */ --overlay-scrim: rgba(6,4,2,.72); /* [DERIVED] no blur */ /* ---------- TEXTURE ----------------------------------------------- */ --grain-opacity: .12; /* [SOURCE .16 on landing] product: .10–.12 */ --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --canvas-glow: radial-gradient(60% 55% at 78% 0%, rgba(241,207,143,.18), rgba(217,155,74,.06) 42%, transparent 72%); /* [SOURCE, reduced] one light source, top-right */ /* ---------- MOTION ------------------------------------------------ */ --duration-fast: 150ms; /* [DERIVED] press, selection, tooltip */ --duration-normal: 300ms; /* [SOURCE] hover colour, small translate */ --duration-slow: 600ms; /* [SOURCE .5–.8s] panel lift, drawer, modal */ --duration-enter: 900ms; /* [SOURCE 1s] landing page-load only */ --ease-standard: cubic-bezier(.2,.7,.2,1); /* [SOURCE] */ --ease-enter: cubic-bezier(.2,.7,.2,1); /* [SOURCE] same curve, longer duration */ --ease-exit: cubic-bezier(.4,0,1,1); /* [DERIVED] */ --lift-hover: -2px; /* product; landing used -5px on plaques */ /* ---------- SIZES ------------------------------------------------- */ --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px; /* [SOURCE] landing CTA ≈ 48px */ --row-h-dense: 44px; --row-h: 56px; --touch-min: 44px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-stroke: 1.5px; /* [SOURCE 1.5–1.6] */ --mark-sm: 20px; --mark-md: 46px; --mark-lg: 88px; /* [SOURCE] brand-mark sizes */ --container-content: 1240px; /* [SOURCE] */ --container-reading: 65ch; --sidebar-w: 260px; /* [DERIVED] */ --panel-w: 380px; /* [DERIVED] inspection panel / drawer */ --modal-w: 560px; /* [DERIVED] */ --modal-w-lg: 760px; /* [DERIVED] */ /* ---------- Z-INDEX ----------------------------------------------- */ --z-nav: 40; --z-drawer: 60; --z-popover: 70; --z-modal: 80; --z-toast: 90; --z-grain: 100; /* [SOURCE] film grain sits above everything, pointer-events:none */ } /* Breakpoints (documentation; not CSS vars): --bp-mobile 600px [SOURCE] one column, gutter 16, section padding 80 --bp-compact 980px [SOURCE] grids collapse, sidebar → top bar --bp-content 1240px [SOURCE] content frame max width */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-enter: 0ms; } }