/* ========================================================================== Psilobase v2 - Design Tokens ("Forager's Market") Source of truth: Figma file hQUHJq4ISHiCochVlVxisR, collections "Primitives", "Color" (Light/Dark) and "Spacing & Radius". Keep names in sync with the Figma variable names (slash -> dash). Theme switching follows the existing site convention: (see js/dark-mode.js), with prefers-color-scheme as the default when no choice is stored. ========================================================================== */ :root { /* ---------- Primitives ---------- */ --pine-900: #0F2A1F; --pine-700: #173A2C; --pine-500: #2A5A43; --pine-300: #9CCBB0; --pine-100: #DCEFE2; --cream-0: #FFFCF5; --cream-50: #FFF6E6; --cream-100: #FBEBD0; --cream-200: #F0DDBB; --cream-300: #E2C99C; --tomato-700: #A93418; --tomato-600: #C73E20; /* Amazon CTA - 4.7:1 with cream-50 text (AA) */ --tomato-500: #E8502F; /* energy only: marquee, stickers - NOT for text buttons */ --tomato-100: #FDE0D6; --butter-800: #6E5200; --butter-500: #F7D774; --butter-100: #FDF1C4; --sky-700: #1F4E63; --sky-600: #2F6F8A; --sky-300: #A9D4E6; --sky-100: #DCEEF5; --pink-300: #F2B8C6; --pink-100: #FBE3E9; --ink-900: #1B1A17; --ink-700: #3F3B33; --ink-500: #6B6456; --ink-300: #CFC3AE; /* ---------- Semantic (light) ---------- */ --bg-page: var(--cream-50); --bg-surface: var(--cream-0); --bg-subtle: var(--cream-100); --bg-inverse: var(--pine-700); --bg-shop: var(--butter-100); --bg-research: var(--sky-100); --bg-sticker: var(--butter-500); --text-primary: var(--ink-900); --text-secondary: var(--ink-700); --text-muted: var(--ink-500); --text-inverse: var(--cream-50); --text-brand: var(--pine-500); --text-on-cta: var(--cream-50); --text-display: var(--pine-700); /* big headings, prices, scores */ --research-accent: var(--sky-600); --action-cta: var(--tomato-600); --action-cta-hover: var(--tomato-700); --action-primary: var(--pine-700); --accent: var(--tomato-600); --border-default: var(--cream-300); --border-ink: var(--ink-900); /* ---------- Type ---------- */ --font-display: "Dela Gothic One", "Arial Black", system-ui, sans-serif; --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --fs-display-xl: clamp(3rem, 2rem + 5vw, 5rem); /* 80 */ --fs-display-l: clamp(2.5rem, 1.8rem + 3.5vw, 3.75rem); /* 60 */ --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); /* 46 */ --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); /* 34 */ --fs-h3: 1.5rem; /* 24 */ --fs-h4: 1.3125rem; /* 21 */ --fs-h5: 1.0625rem; /* 17 */ --fs-body-l: 1.125rem; --fs-body: 1rem; --fs-body-s: 0.875rem; --fs-caption: 0.75rem; --fs-price: 1.25rem; /* ---------- Space & radius ---------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px; --radius-field: 14px; --radius-row: 20px; --radius-card: 24px; --radius-pill: 999px; /* ---------- Outline & hard shadows ---------- */ --stroke: 2px solid var(--border-ink); --shadow-button: 3px 3px 0 0 var(--border-ink); --shadow-row: 4px 4px 0 0 var(--border-ink); --shadow-card: 6px 6px 0 0 var(--border-ink); --container: 1312px; --gutter: clamp(16px, 4vw, 64px); --ease-spring: cubic-bezier(.3, 1.4, .5, 1); } /* ---------- Semantic (dark) ---------- */ :root[data-theme="dark"] { --bg-page: var(--ink-900); --bg-surface: var(--pine-900); --bg-subtle: var(--pine-700); --bg-inverse: var(--cream-50); --bg-shop: var(--pine-700); --bg-research: var(--sky-700); --text-primary: var(--cream-50); --text-secondary: var(--cream-200); --text-muted: var(--ink-300); --text-inverse: var(--ink-900); --text-brand: var(--pine-300); --text-display: var(--butter-500); --research-accent: var(--sky-300); --action-primary: var(--pine-300); --accent: var(--butter-500); --border-default: var(--pine-700); --border-ink: var(--cream-50); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-page: var(--ink-900); --bg-surface: var(--pine-900); --bg-subtle: var(--pine-700); --bg-inverse: var(--cream-50); --bg-shop: var(--pine-700); --bg-research: var(--sky-700); --text-primary: var(--cream-50); --text-secondary: var(--cream-200); --text-muted: var(--ink-300); --text-inverse: var(--ink-900); --text-brand: var(--pine-300); --text-display: var(--butter-500); --research-accent: var(--sky-300); --action-primary: var(--pine-300); --accent: var(--butter-500); --border-default: var(--pine-700); --border-ink: var(--cream-50); } } /* ---------- Fixed-light surfaces ---------- Butter / sky / pink / pine-100 etc. stay light in dark mode (they are brand colours, not theme surfaces), so anything placed on them re-scopes the semantic tokens back to their light values. Add .psb-on-light to any custom container that uses a fixed light background. */ .psb-on-light, .psb-section--butter, .psb-section--sky, .psb-section--pink, .psb-callout--forage, .psb-callout--warn, .psb-tile, .psb-quiz-option, .psb-path { --bg-surface: var(--cream-0); --bg-subtle: var(--cream-100); --bg-shop: var(--butter-100); --text-primary: var(--ink-900); --text-secondary: var(--ink-700); --text-muted: var(--ink-500); --text-brand: var(--pine-500); --text-display: var(--pine-700); --accent: var(--tomato-600); --border-default: var(--cream-300); --border-ink: var(--ink-900); /* composite tokens resolve where declared, so re-declare them in scope */ --stroke: 2px solid var(--border-ink); --shadow-button: 3px 3px 0 0 var(--border-ink); --shadow-row: 4px 4px 0 0 var(--border-ink); --shadow-card: 6px 6px 0 0 var(--border-ink); color: var(--ink-900); }