/** * plugpress.co — design tokens. The ONLY file allowed to contain raw hex. * * v2 EXPERIMENT (2026-07-27, Fahim: "just experiment, direct change"): * cool neutrals — pure white + #f5f5f5 grays (heyclicky's palette) instead of * the warm paper, a tuned brand blue, and a CC0 blue-sky wallpaper (sky.jpg) * on every canvas instead of the paintings (override in pp_wallpaper_style). * Every changed token keeps its v1 value in a trailing comment — revert by * restoring those + deleting the helper override. * * v5 "WP desktop" base: white windows floating on canvas wallpapers, one * electric blue accent. Heyclicky leads the personality, cursor restrains it. * Per-product accents are injected inline (style="--accent: …") from * inc/data/products.php and appear only on that product's card + page. * Never two accents on one screen. */ :root { color-scheme: light; /* light-only theme: keeps UA form controls + scrollbars honest */ interpolate-size: allow-keywords; /* lets
height animate to auto where supported */ /* base — v2: cool neutral, white + #f5f5f5 grays (heyclicky) */ --bg: #ffffff; /* page background: the desk (v1: #faf9f7) */ --surface: #ffffff; /* window / card surface */ --surface-alt: #f5f5f5; /* window title bars, chips, wells (v1: #f4f3ef) */ --ink: #171717; /* neutral near-black text (v1: #1c1b18) */ --ink-soft: #6f6f6f; /* secondary text (v1: #6d6a63) */ --line: #e5e5e5; /* hairlines, chrome borders (v1: #e7e5de) */ --line-strong: #d4d4d4; /* hover borders, dotted separators (v1: #cfccc2) */ --blue: #2563eb; /* v2 brand blue — sky-native, AA on white (5.2:1). CTA + links ONLY. logo.svg/icon.svg/favicon.png recolored to match 2026-07-27 (v1: #2A49E5) */ --blue-hover: #1d4ed8; /* (v1: #1E37C9) */ --on-accent: #ffffff; /* text on blue / accent fills */ /* section bands + full-bleed blue band gradient */ --band: #f5f5f5; /* alternating cool gray band (v1: #f3f1ec) */ --blue-deep-a: #2563eb; /* (v1: #2A49E5) */ --blue-deep-b: #1e40af; /* (v1: #1B2FA8) */ /* highlighter — founder-note + sticky-note prop ONLY */ --marker: #ffe86b; --marker-soft: #fff3bf; /* product-page header — wp-admin's own admin-bar palette, verbatim (home = the desktop's mac menu bar; product page = inside wp-admin). Contrast pre-vetted by core: ink 12.5:1, muted 7.4:1 on bg. */ --adminbar-bg: #1d2327; --adminbar-bg-hover: #2c3338; --adminbar-ink: #f0f0f1; --adminbar-muted: #c3c4c7; --adminbar-link-hover: #72aee6; /* CLI terminal mock ONLY — macOS's own traffic-light colors + Claude's brand coral. These are DATA (real-world UI/brand hues, same rationale as the crawler brand hexes in mock-scene.php), never decoration. */ --mac-red: #ff5f57; --mac-yellow: #febc2e; --mac-green: #28c840; --claude-coral: #d97757; /* reserved — AI features only (Saddle agent, AI labels). Never decorative */ --ai-purple: #7C3AED; /* per-page accent; defaults to blue, overridden inline per product */ --accent: var(--blue); /* type */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* wordmark + headings */ --font-sans: 'Instrument Sans', system-ui, sans-serif; --font-mono: 'Space Mono', monospace; /* the artifact voice: real data only */ --font-hand: 'Caveat', cursive; /* founder signature + sticky note only */ /* type scale — the ONLY sizes; no raw font-size literals outside this file (exception: the footer ghost wordmark clamp, documented at point of use) */ --text-display: clamp(4rem, 10vw, 7.5rem); /* hero wordmark */ --text-h1: clamp(2.75rem, 5.5vw, 4.25rem); /* every page hero h1 (home scale adopted site-wide) */ --text-h2: clamp(1.875rem, 3.5vw, 2.75rem); --text-h3: 1.375rem; --text-lg: 1.125rem; /* emphasized body: hero sub floor, was-price, icons */ --text-btn-hero: 1.25rem; /* hero CTA labels — 20px/500 (Fahim, 2026-07-28) */ --text-body: 1.0625rem; --text-small: 0.9375rem; --text-mono: 0.8125rem; /* mono captions, chips, buttons-small */ --text-label: 0.75rem; /* mono labels: eyebrow, clock, frame bars, props */ --text-micro: 0.71rem; /* scene-mock data rows only */ /* shape — window/canvas radii measured off the references (2026-07-26): cursor.com hero panel 4px / app window 10px, heyclicky panels 4px. The old 24/14 read soft and toy-like next to them ("too much border radius" — Fahim). */ --r-window: 10px; /* admin-frame windows + icon tiles */ --r-card: 16px; /* cards, panels */ --r-inner: 8px; /* buttons, chips, wells */ --r-canvas: 4px; /* canvas panels */ /* elevation — every window is lit from above: 1px inset top highlight, then ink-tinted contact / ambient / drop layers (never plain black). v2: shadow ink went neutral 23/23/23 (v1: warm 28/27/24). */ --shadow-window: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(23 23 23 / 0.05), 0 4px 10px rgb(23 23 23 / 0.05), 0 12px 28px -8px rgb(23 23 23 / 0.08); --shadow-float: /* soft, reference weight — cursor's floats whisper; the old 40px/0.35 drop read heavy against them */ inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(23 23 23 / 0.08), 0 12px 32px -8px rgb(23 23 23 / 0.12); --shadow-lift: /* hover elevation step — cards rising to meet the cursor */ 0 6px 16px -4px rgb(23 23 23 / 0.10), 0 20px 44px -16px rgb(23 23 23 / 0.16); /* one easing voice for settles + reveals */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* desktop window tilts */ --tilt-1: -2.2deg; --tilt-2: 1.6deg; --tilt-3: -1.2deg; /* rhythm */ --container: 1080px; --container-narrow: 720px; --container-wide: 1240px; /* desktop hero stage */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-section: clamp(4rem, 9vw, 6.5rem); --space-hero: clamp(3rem, 6vh, 4.5rem); /* hero breathing room — the ONE formula (intro top, stage gap, product hero) */ /* derived surfaces */ --tint: #f5f5f5; /* subtle wash for placeholder slots (v1: #f4f3ef) */ /* NOTE: no --accent-tint token — var() inside a :root custom property freezes against :root's --accent; accent mixes must be computed at point of use. */ }