/* ============================================================================ Bumblebae design tokens ---------------------------------------------------------------------------- Ported verbatim from the Claude Design handoff bundle: design_handoff/_ds/bumblebae-design-system-e735eb1a-.../tokens/*.css The seven token partials (fonts, colors, typography, spacing, shape, motion, base) are concatenated here in the same order styles.css imported them, so this file stays a drop-in replacement when the design system is updated. Only deliberate change: the Google Fonts @import was removed. An @import inside CSS serialises the font request behind the stylesheet; the same fonts are loaded from in each page instead. The font stacks below are unchanged. ========================================================================= */ /* ── tokens/fonts.css ───────────────────────────────────────────────────── No brand font files were supplied — these are Google Fonts stand-ins. Marcellus = engraved, elegant display serif. Jost = geometric humanist sans for UI + body; NL/DE/EN, umlauts, ß. */ :root { --font-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-sans: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } /* ── tokens/colors.css ─────────────────────────────────────────────────── */ :root { /* Neutrals: warm white → sand → stone → ink */ --warm-white: #FBF8F4; --sand-50: #F7F1E9; --sand-100: #F0E7DB; --sand-200: #E4D8C8; --clay-300: #CFBCA6; --stone-400: #A79C8F; --stone-500: #6F675D; --ink-700: #453F39; --ink-900: #221E1A; --pure-white: #FFFFFF; /* Prism accents: the rainbow the product throws. Use sparingly. */ --prism-rose: #F2CBCF; --prism-honey: #F2DCAB; --prism-mint: #C9E3D6; --prism-lilac: #D0CAE9; --prism-sky: #C7DAED; /* Deepened prism tones — only these pass text/border contrast on light */ --prism-lilac-deep: #6F63A8; --prism-honey-deep: #8A6A22; --prism-mint-deep: #3F7361; --prism-sweep: linear-gradient(96deg, var(--prism-rose) 0%, var(--prism-honey) 32%, var(--prism-mint) 62%, var(--prism-lilac) 100%); --prism-sweep-soft: linear-gradient(96deg, rgba(242, 203, 207, .55) 0%, rgba(242, 220, 171, .55) 32%, rgba(201, 227, 214, .55) 62%, rgba(208, 202, 233, .55) 100%); /* Surfaces */ --surface-page: var(--warm-white); --surface-raised: var(--pure-white); --surface-sunken: var(--sand-50); --surface-card: var(--pure-white); --surface-tint: var(--sand-100); --surface-contrast: var(--ink-900); --surface-photo: var(--sand-200); --surface-overlay: rgba(34, 30, 26, .42); /* Text */ --text-heading: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--stone-500); --text-on-contrast: var(--warm-white); --text-link: var(--ink-900); --text-price: var(--ink-900); /* Lines */ --line-hairline: var(--sand-200); --line-strong: var(--clay-300); --line-contrast: var(--ink-900); --focus-ring: var(--prism-lilac-deep); /* Interactive */ --action-solid: var(--ink-900); --action-solid-hover: var(--ink-700); --action-solid-text: var(--warm-white); --action-quiet-hover: var(--sand-100); --action-disabled: var(--sand-200); --action-disabled-text: var(--stone-400); /* Status — muted, never shouty */ --status-success: #3F7361; --status-success-bg: #E7F0EA; --status-warning: #8A6A22; --status-warning-bg: #F7EEDA; --status-danger: #95403A; --status-danger-bg: #F6E6E3; --status-info: #3F5F7E; --status-info-bg: #E6EDF3; } /* ── tokens/typography.css ─────────────────────────────────────────────── */ :root { /* Display / heading — Marcellus, tight leading, never bold (one weight) */ --fs-display-1: clamp(2.5rem, 9vw, 4.5rem); --fs-display-2: clamp(2rem, 6.5vw, 3.25rem); --fs-heading-1: clamp(1.75rem, 5vw, 2.5rem); --fs-heading-2: clamp(1.375rem, 3.6vw, 1.875rem); --fs-heading-3: clamp(1.125rem, 2.6vw, 1.375rem); /* Body — Jost. 17px mobile base: light palettes need size as well as contrast */ --fs-body-lg: 1.125rem; /* 18px intro paragraphs */ --fs-body: 1.0625rem; /* 17px default */ --fs-body-sm: 0.9375rem; /* 15px secondary */ --fs-caption: 0.8125rem; /* 13px captions, min for prose */ --fs-label: 0.75rem; /* 12px letterspaced caps only */ --lh-display: 1.08; --lh-heading: 1.18; --lh-body: 1.65; /* generous — German runs long */ --lh-tight: 1.35; --ls-display: -0.005em; --ls-heading: 0; --ls-body: 0.004em; --ls-caps: 0.16em; /* eyebrows, buttons, nav */ --ls-caps-wide: 0.24em; /* wordmark, section eyebrows */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --measure-prose: 64ch; --measure-narrow: 46ch; } /* ── tokens/spacing.css ────────────────────────────────────────────────── */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Section rhythm — the whitespace is the design */ --section-y-mobile: var(--space-16); --section-y: var(--space-24); --section-y-air: var(--space-32); --gutter-mobile: var(--space-5); --gutter: var(--space-8); --content-max: 1280px; --content-narrow: 720px; --tap-min: 48px; /* mobile-first minimum hit target */ --tap-comfort: 56px; } /* ── tokens/shape.css ──────────────────────────────────────────────────── */ :root { /* Corners stay nearly square — the references are gallery-flat, not app-bubbly */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --radius-arch: 999px 999px var(--radius-xs) var(--radius-xs); --border-hairline: 1px; --border-strong: 1.5px; /* Shadows are warm, wide and almost invisible. No hard drop shadows. */ --shadow-none: none; --shadow-hairline: 0 1px 0 rgba(34, 30, 26, .05); --shadow-sm: 0 1px 2px rgba(34, 30, 26, .04), 0 4px 10px -6px rgba(34, 30, 26, .08); --shadow-md: 0 2px 4px rgba(34, 30, 26, .03), 0 18px 40px -22px rgba(34, 30, 26, .14); --shadow-lg: 0 30px 70px -34px rgba(34, 30, 26, .22); --shadow-inset-hairline: inset 0 0 0 1px var(--line-hairline); /* The one glow allowed: light thrown by the product */ --glow-prism: 0 0 48px rgba(208, 202, 233, .5), 0 0 96px rgba(242, 220, 171, .28); --blur-veil: saturate(120%) blur(14px); /* sticky bars over photography only */ --veil-light: rgba(251, 248, 244, .82); --veil-dark: rgba(34, 30, 26, .28); } /* ── tokens/motion.css ─────────────────────────────────────────────────── */ :root { --dur-instant: 120ms; --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-veil: 700ms; /* photo fade-ins, prism sweeps */ --ease-soft: cubic-bezier(.22, .61, .36, 1); /* default: calm ease-out */ --ease-inout: cubic-bezier(.4, 0, .2, 1); --ease-veil: cubic-bezier(.16, .84, .28, 1); /* No bounce, no spring, no overshoot anywhere in this system. */ --lift-hover: -2px; --press-scale: 0.985; } /* ── tokens/base.css ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-regular); color: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0 0 var(--space-4); } h1 { font-size: var(--fs-heading-1); line-height: var(--lh-display); } h2 { font-size: var(--fs-heading-2); } h3 { font-size: var(--fs-heading-3); } p { margin: 0 0 var(--space-4); max-width: var(--measure-prose); text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); } a:hover { color: var(--ink-900); border-bottom-color: var(--ink-900); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } img { max-width: 100%; display: block; } button { font: inherit; } ::selection { background: var(--prism-lilac); color: var(--ink-900); } .ds-eyebrow { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps-wide); text-transform: uppercase; color: var(--text-muted); } .ds-wordmark { font-family: var(--font-display); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-heading); } /* Photography placeholder: a lit wall, not a grey box. Replace with real sfeerfoto's. */ .ds-photo { background: linear-gradient(160deg, var(--sand-100) 0%, var(--sand-200) 55%, var(--clay-300) 100%); position: relative; overflow: hidden; } .ds-photo::after { content: ""; position: absolute; inset: 0; background: var(--prism-sweep-soft); opacity: .35; mix-blend-mode: screen; transform: rotate(-8deg) scale(1.4); pointer-events: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }