/* ========================================================================== KPSCRT '97 — design tokens (single source of truth) -------------------------------------------------------------------------- Aesthetic contract, derived from one reference artifact (FAO Schwarz, 1997): 1. COLOR A saturated yellow field carries everything. Plum, signal red, tangerine, and pine green are overprinted at full strength — no tints, no alpha washes. Red is the link color, not blue. 2. EDGES Nothing is rounded. Chrome is a 2px two-tone bevel (lit edge top/left, shade edge bottom/right) exactly like system widgets of the era; depth flips when pressed. Radius is a token so it is *visibly* locked to 0. 3. SHADOW Shadows are hard offset blocks, zero blur — GIF chrome could not blur, so neither do we. 4. GRADIENT Real gradients dither. The checkerboard pattern below stands in for 8-bit dithering wherever two colors must meet softly. 5. SPACE The spacing scale is the old cellpadding ladder (2/4/8/12…) — table rhythm, tight at small steps. 6. TYPE Sizes are the seven legacy stops. Display and body are serif (Times); tiny UI text is Verdana (1996-issue); code is Courier. 7. MOTION State changes are instant (no tweens in 1997). Anything that animates runs on steps(), like GIF frames. ========================================================================== */ :root { /* --- color / ground ---------------------------------------------------- */ --kp-color-field: #ffd200; /* the yellow page field */ --kp-color-field-deep: #edb500; /* darker yellow: tiling, seams on field */ --kp-color-paper: #fffbee; /* panel + card surface */ --kp-color-well: #ffffff; /* input wells, table cells */ --kp-color-ink: #241a05; /* warm near-black text */ --kp-color-ink-soft: #6f5d28; /* secondary text, disabled labels */ /* --- color / overprint ramp (sampled from the collage) ------------------ */ --kp-color-plum: #5b2b8f; --kp-color-plum-deep: #3c1b62; --kp-color-plum-lit: #9268c6; --kp-color-signal: #e01300; --kp-color-signal-deep: #9c0d00; --kp-color-signal-lit: #ff6a4a; --kp-color-tangerine: #ee7d00; --kp-color-tangerine-deep: #a85800; --kp-color-pine: #0e7f63; --kp-color-pine-deep: #084d3b; --kp-color-navy: #232378; /* --- color / roles ------------------------------------------------------ */ --kp-color-link: var(--kp-color-signal); /* links are red here, not blue */ --kp-color-link-visited: var(--kp-color-plum); --kp-color-accent: var(--kp-color-plum); --kp-color-error: var(--kp-color-signal); --kp-color-ok: var(--kp-color-pine); --kp-color-warn: var(--kp-color-tangerine); --kp-color-info: var(--kp-color-navy); --kp-color-select-bg: var(--kp-color-plum); /* selection = solid plum bar, */ --kp-color-select-fg: #ffffff; /* white text (system-highlight logic) */ /* --- edges / bevel ramps ------------------------------------------------ */ /* Components set --kp-bevel-lit / --kp-bevel-shade locally per surface, then borders read them. Outset = lit top/left; inset (pressed) flips. */ --kp-bevel-paper-lit: #ffffff; --kp-bevel-paper-shade: #b1a06a; --kp-bevel-field-lit: #ffef9c; --kp-bevel-field-shade: #a37e00; --kp-bevel-plum-lit: var(--kp-color-plum-lit); --kp-bevel-plum-shade: var(--kp-color-plum-deep); --kp-bevel-signal-lit: var(--kp-color-signal-lit); --kp-bevel-signal-shade: var(--kp-color-signal-deep); --kp-border-seam: 1px solid var(--kp-color-ink); /* the visible 1px joint */ --kp-border-bevel-w: 2px; --kp-radius: 0px; /* locked. it is 1997. */ /* --- shadow (hard offset, never blurred) -------------------------------- */ --kp-shadow-panel: 4px 4px 0 0 var(--kp-color-ink); --kp-shadow-pop: 6px 6px 0 0 var(--kp-color-ink); --kp-shadow-press: 1px 1px 0 0 var(--kp-color-ink); /* --- dither (stands in for every gradient) ------------------------------ */ --kp-dither-size: 4px 4px; --kp-dither-field: repeating-conic-gradient( var(--kp-color-field) 0% 25%, var(--kp-color-field-deep) 0% 50%); --kp-dither-paper: repeating-conic-gradient( var(--kp-color-paper) 0% 25%, #e4d9b4 0% 50%); --kp-dither-plum: repeating-conic-gradient( var(--kp-color-plum) 0% 25%, var(--kp-color-plum-deep) 0% 50%); --kp-dither-veil: repeating-conic-gradient( var(--kp-color-navy) 0% 25%, transparent 0% 50%); /* modal scrim: 50% checker, no alpha */ /* --- space (the cellpadding ladder) ------------------------------------- */ --kp-space-1: 2px; --kp-space-2: 4px; --kp-space-3: 8px; --kp-space-4: 12px; --kp-space-5: 16px; --kp-space-6: 24px; --kp-space-7: 32px; --kp-space-8: 48px; /* --- type (the seven stops) --------------------------------- */ --kp-font-display: "Times New Roman", Times, Georgia, serif; --kp-font-body: "Times New Roman", Times, Georgia, serif; --kp-font-ui: Verdana, Geneva, Tahoma, sans-serif; /* tiny UI text only */ --kp-font-mono: "Courier New", Courier, monospace; --kp-text-1: 10px; /* fine print, badges, status bars */ --kp-text-2: 13px; /* UI labels, buttons */ --kp-text-3: 16px; /* body */ --kp-text-4: 18px; /* lead */ --kp-text-5: 24px; /* section heads */ --kp-text-6: 32px; /* page heads */ --kp-text-7: 48px; /* display */ --kp-leading-tight: 1.15; --kp-leading-body: 1.35; --kp-tracking-caps: 0.08em; /* letterspaced serif caps, the house voice */ --kp-tracking-display: -0.01em; /* --- focus (the dotted marching-ants ring, thickened for contrast) ------ */ --kp-focus-ring: 2px dotted var(--kp-color-ink); --kp-focus-ring-inverse: 2px dotted var(--kp-color-paper); --kp-focus-offset: 2px; /* --- motion (GIF frames, not tweens) ------------------------------------ */ --kp-frames-4: steps(4, end); --kp-frames-8: steps(8, end); --kp-tick: 0.5s; /* one animation beat */ /* --- layers -------------------------------------------------------------- */ --kp-layer-sticky: 10; --kp-layer-overlay: 100; /* drawer, modal scrim */ --kp-layer-pop: 200; /* menu, popover, tooltip */ --kp-layer-toast: 300; }