/* ============================================ DESIGN TOKENS — Generated from _data/variables.json ┌─ LOAD ORDER (set in layouts/layout.html ) ─┐ │ 1. main.css (_variables.scss defaults)│ │ 2. bookshop.css (component styles) │ │ 3. design-tokens.css (THIS FILE — overrides 1) │ └───────────────────────────────────────────────────┘ Every custom property declared here OVERRIDES the same-named property in _variables.scss because both target :root and this file loads later. Editable via the CloudCannon Data panel (_inputs in cloudcannon.config.yml). This file is the single source of truth for every value CloudCannon controls. Utopia fluid tokens (type scale, space scale, layout margins, radii) are NOT overridden here — those live in _variables.scss and require utopia.fyi to regenerate. ============================================ */ :root { /* ── Brand Colours ── JSON key → CSS variable (default hex) brand.navy → --bp-navy-900 (#0D2045, anchor — text, action, dark surfaces) brand.teal → --bp-teal-500 (#38A7B0, decorative brightness only) brand.clay → --bp-clay-500 (#B4543A, warm accent — sparing) `| default:` ensures a null/empty editor value falls back to the SCSS default — without it, an empty value emits `--bp-x: ;` which is a VALID custom-property declaration with empty content, and that empty value propagates through every var() chain that references it (the fallback in `var(--x, default)` is NOT triggered for empty values — only for properties that don't exist). End result of an empty value: dependent properties become invalid at computed-value time and unset themselves, killing borders, colours, etc. */ --bp-navy-900: #0D2045; --bp-teal-500: #38A7B0; --bp-clay-500: #b4543a; /* ── Neutral Colours ── */ --white: #FFFFFF; --off-white: #F0F4F9; --surface-sunken: #E8EEF5; --bp-slate-600: #475569; /* ── Status Colours ── Raw --bp-* tokens. Semantic --color-success / --color-warning / etc. in _variables.scss alias these, so editor changes here cascade through. */ --bp-success: #157F4F; --bp-success-bg: #E6F4EC; --bp-success-text: #0C5436; --bp-warning: #B7791F; --bp-warning-bg: #FBF1DA; --bp-warning-text: #8A5A12; --bp-error: #D12F2F; --bp-error-bg: #FCEAEA; --bp-error-text: #9B2020; --bp-info: #1F6FB2; --bp-info-bg: #E7F0FA; --bp-info-text: #114B7E; /* ── Typography ── */ --font-body: "Greycliff CF", system-ui, sans-serif; --font-heading: "Greycliff CF", system-ui, sans-serif; --font-weight-normal: 200; --font-weight-medium: 300; --font-weight-semibold: 400; --font-weight-bold: 600; --font-weight-extrabold: 700; --line-height-none: 1; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --line-height-relaxed: 1.8; --letter-spacing-tight: -0.03em; --letter-spacing-wide: 0.06em; /* ── Surfaces ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); --glass-blur: 12px; --blur-md: 16px; --blur-lg: 32px; --blur-xl: 64px; --glass-bg-light: rgba(255, 255, 255, 0.12); --glass-bg-light-strong: rgba(255, 255, 255, 0.18); --glass-border-light: rgba(255, 255, 255, 0.2); --glass-bg-dark: rgba(0, 0, 0, 0.15); --glass-border-dark: rgba(255, 255, 255, 0.1); --card-accent-color: #38A7B0; /* ── Motion ── */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; /* ── Button ── Editor-controlled global button look. Dark (navy) sections still invert to white-on-navy for contrast — see [data-theme="dark"] in _themes.scss. Blank JSON fields fall back to the SCSS defaults in _variables.scss / the design system, so the editor can opt out of any one control by clearing its field. */ --button-bg: #0D2045; --button-text: #FFFFFF; --button-bg-hover: #38a7b0; --button-radius: 0.5rem; --button-padding-block: 0.5rem; --button-padding-inline: 1rem; --button-font-weight: 600; /* ── Grid Pattern ── */ --grid-pattern-size: 1.5rem; --grid-pattern-opacity: 0.07; }