/* --------------------------------------------------------------------------- * tokens-local.css — site-only tokens. HAND-AUTHORED. * * Loads AFTER assets/css/tokens.css (the generated brand snapshot) so every * declaration here may reference the brand primitives that snapshot defines. * * WHAT BELONGS HERE * Only tokens the shared design system does not own. If a value exists * upstream, consume it from the snapshot — do NOT restate it here. Restating * upstream values is exactly the fork that let this site serve the retired * vermilion accent for five weeks after the 2026-07-09 rebrand. * * WHAT IS HERE, AND WHY * 1. Editorial type register — DM Serif Display / DM Serif Text / DM Sans / * Kanit and their composed text styles. Deliberate local addition per * decisions/decisions.md 2026-06-03 (Digital case-study register). The brand * system has no serif face. Several steps are not consumed yet: the ADR * scopes the register to all five Digital case studies and only one is * built, so they are reserved, not dead. * 2. Illustration aliases — non---sc- names the Three.js scenes read via * getComputedStyle (assets/js/woodworking-viewer.js, work/index.html). * Each points at its closest brand equivalent. * * Created 2026-08-17 when tokens.css became a generated snapshot. * ------------------------------------------------------------------------- */ :root { /* ===== Editorial families — local addition 2026-06-03 ===== * Not on brand.shokunincrafthouse.com; local until the brand system carries a * serif. Loaded from Google Fonts on the Digital case-study pages. */ --sc-p-font-family-serif-display: "DM Serif Display", "Hoefler Text", Georgia, "Times New Roman", serif; --sc-p-font-family-sans-reading: "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif; --sc-p-font-family-condensed: "Kanit", "Arial Narrow", system-ui, sans-serif; --sc-p-font-family-serif-text: "DM Serif Text", "Hoefler Text", Georgia, "Times New Roman", serif; /* ===== Semantic typography: editorial register ===== * Digital case-study pages only. Serif display (DM Serif Display, single weight, * heft is intrinsic) + DM Sans reading body. Sizes bind to existing primitives * (nearest-token mapping, no new size values). Local addition 2026-06-03. */ --sc-font-text-editorial-hero-family: var(--sc-p-font-family-serif-display); --sc-font-text-editorial-hero-size: var(--sc-p-font-size-60); --sc-font-text-editorial-hero-weight: var(--sc-p-font-weight-regular); --sc-font-text-editorial-hero-line-height: var(--sc-p-font-line-height-tight); --sc-font-text-editorial-hero-letter-spacing: var(--sc-p-font-tracking-tight); --sc-font-text-editorial-section-family: var(--sc-p-font-family-serif-display); --sc-font-text-editorial-section-size: var(--sc-p-font-size-32); --sc-font-text-editorial-section-weight: var(--sc-p-font-weight-regular); --sc-font-text-editorial-section-line-height: var(--sc-p-font-line-height-snug); --sc-font-text-editorial-section-letter-spacing: var(--sc-p-font-tracking-snug); --sc-font-text-editorial-title-family: var(--sc-p-font-family-serif-display); --sc-font-text-editorial-title-size: var(--sc-p-font-size-24); --sc-font-text-editorial-title-weight: var(--sc-p-font-weight-regular); --sc-font-text-editorial-title-line-height: var(--sc-p-font-line-height-snug); --sc-font-text-editorial-title-letter-spacing: var(--sc-p-font-tracking-snug); --sc-font-text-reading-body-family: var(--sc-p-font-family-sans-reading); --sc-font-text-reading-body-size: var(--sc-p-font-size-16); --sc-font-text-reading-body-weight: var(--sc-p-font-weight-regular); --sc-font-text-reading-body-line-height: var(--sc-p-font-line-height-relaxed); --sc-font-text-reading-body-letter-spacing: var(--sc-p-font-tracking-normal); /* Editorial pull-quote — DM Serif Text (italic set in component CSS). Local addition 2026-06-05. */ --sc-font-text-editorial-quote-family: var(--sc-p-font-family-serif-text); --sc-font-text-editorial-quote-size: var(--sc-p-font-size-24); --sc-font-text-editorial-quote-weight: var(--sc-p-font-weight-regular); --sc-font-text-editorial-quote-line-height: var(--sc-p-font-line-height-snug); --sc-font-text-editorial-quote-letter-spacing: var(--sc-p-font-tracking-tight); --sc-font-text-reading-lead-family: var(--sc-p-font-family-sans-reading); --sc-font-text-reading-lead-size: var(--sc-p-font-size-20); --sc-font-text-reading-lead-weight: var(--sc-p-font-weight-regular); --sc-font-text-reading-lead-line-height: var(--sc-p-font-line-height-relaxed); --sc-font-text-reading-lead-letter-spacing: var(--sc-p-font-tracking-normal); /* ===== Shadow (pending) ===== * Upstream now defines --sc-shadow-control-raised / --sc-shadow-control-inset * (button-only neumorphic tokens). The generic sm/md/lg slots this file once * reserved were never populated and are not planned — consume the control * tokens from the snapshot if a control needs them. */ /* ===== Breakpoints (pending) ===== * Agreed values: 390 / 768 / 1024 / 1440 / 1920. * Still not exported as CSS custom properties by the brand system — * use as build-time constants in JS / media queries until they are. */ /* ===== Illustration aliases ===== * The Three.js scenes read these NAMES via getComputedStyle, so they cannot * be renamed to --sc-* without touching the viewers. Each alias points at the * closest brand equivalent. Visual fidelity of the wood/rattan/LED scene is * lower than the original gold-wood palette — accepted, the brand palette has * no warm wood tones. * * Do not consume these from new code. Use --sc-* directly. * (--focus-ring currently has no consumer; left in place rather than pruned * mid-reconcile — a separate cleanup, not this PR.) */ --focus-ring: var(--sc-color-border-focus); --wood-top: var(--sc-p-color-warm-gray-100); --wood-side-left: var(--sc-p-color-warm-gray-250); --wood-side-right: var(--sc-p-color-warm-gray-200); --wood-leg: var(--sc-p-color-warm-gray-250); --wood-leg-edge: var(--sc-p-color-warm-gray-200); --wood-cord: var(--sc-p-color-warm-gray-700); --wood-cedar-burnt: var(--sc-p-color-warm-gray-800); --led-warm-3000k: var(--sc-p-color-warm-gray-50); --rattan-tan: var(--sc-p-color-warm-gray-100); --rattan-hole: color-mix(in srgb, var(--sc-p-color-utility-black) 55%, transparent); --scene-key-tint: var(--sc-p-color-warm-gray-50); }