/* ============================================================================ Brushworks Pro Services — Design Tokens ---------------------------------------------------------------------------- Single source of truth for color, type, space, motion, radius, shadow, and layout primitives. Consumed directly by web components via shadow DOM (use ::part or :host(:where(.theme-light)) inheritance), and by Houdini paint worklets via the @property declarations at the bottom. Themes: .theme-light (default) and .theme-dark, both selectable by class on or any ancestor. Falls back to prefers-color-scheme. ============================================================================ */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ── Raw color scales ───────────────────────────────────────────────── */ --bw-navy-50: #E6EAF2; --bw-navy-100: #BFC8DC; --bw-navy-200: #8E9BBA; --bw-navy-300: #5F6F97; --bw-navy-400: #3A4D70; --bw-navy-500: #2E437A; --bw-navy-600: #233562; --bw-navy-700: #18264A; --bw-navy-800: #0F1B33; --bw-navy-900: #0A1024; --bw-paint-50: #FAF7EC; --bw-paint-100: #F5F1E8; --bw-paint-200: #E8E2D2; --bw-paint-300: #DCD6C2; --bw-paint-400: #C9C2B0; --bw-paint-500: #A89F88; --bw-paint-600: #8E8569; --bw-paint-700: #6E6650; --bw-chrome-50: #F7F8FA; --bw-chrome-100: #F2F4F7; --bw-chrome-200: #E0E4E8; --bw-chrome-300: #C9CED4; --bw-chrome-400: #A5ABB3; --bw-chrome-500: #7E848C; --bw-chrome-600: #5A6168; --bw-chrome-700: #4A4F56; --bw-chrome-800: #2F343A; --bw-charcoal-50: #EDEFF2; --bw-charcoal-100: #C9CDD2; --bw-charcoal-200: #9098A1; --bw-charcoal-300: #5E6770; --bw-charcoal-400: #4A535E; --bw-charcoal-500: #3A424B; --bw-charcoal-600: #2E353D; --bw-charcoal-700: #242A30; --bw-charcoal-800: #1B2026; --bw-charcoal-900: #0F1318; --bw-success: #3A7D5C; --bw-warning: #C29B3A; --bw-danger: #A8453B; --bw-info: #3A6E9C; /* ── Brand gradients (auto-rendering, animatable via @property) ────── */ --bw-grad-navy: linear-gradient(135deg, var(--bw-navy-800) 0%, var(--bw-navy-600) 60%, var(--bw-navy-500) 100%); --bw-grad-charcoal: radial-gradient(ellipse at 50% 30%, var(--bw-charcoal-600) 0%, var(--bw-charcoal-800) 70%, var(--bw-charcoal-900) 100%); --bw-grad-paint: linear-gradient(180deg, var(--bw-paint-50) 0%, var(--bw-paint-100) 60%, var(--bw-paint-200) 100%); --bw-grad-chrome: linear-gradient(90deg, var(--bw-chrome-700) 0%, var(--bw-chrome-300) 18%, var(--bw-chrome-100) 38%, var(--bw-chrome-400) 58%, var(--bw-chrome-200) 78%, var(--bw-chrome-700) 100%); /* ── Typography ─────────────────────────────────────────────────────── */ --bw-font-display: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --bw-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --bw-font-eyebrow: 'Montserrat', 'Helvetica Neue', system-ui, sans-serif; --bw-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --bw-weight-regular: 400; --bw-weight-medium: 500; --bw-weight-semibold: 600; --bw-weight-bold: 700; --bw-weight-heavy: 800; --bw-weight-black: 900; --bw-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); --bw-text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); --bw-text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); --bw-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); --bw-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --bw-text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); --bw-text-3xl: clamp(1.875rem, 1.55rem + 1.3vw, 2.5rem); --bw-text-4xl: clamp(2.25rem, 1.85rem + 1.7vw, 3.25rem); --bw-text-5xl: clamp(2.75rem, 2.2rem + 2.4vw, 4.25rem); --bw-text-6xl: clamp(3.5rem, 2.6rem + 3.6vw, 5.75rem); --bw-leading-tight: 1.1; --bw-leading-snug: 1.25; --bw-leading-normal: 1.5; --bw-leading-relaxed: 1.65; --bw-leading-loose: 1.9; --bw-tracking-tighter: -0.02em; --bw-tracking-tight: -0.01em; --bw-tracking-normal: 0; --bw-tracking-wide: 0.04em; --bw-tracking-wider: 0.1em; --bw-tracking-widest: 0.3em; /* ── Spacing (4px base) ─────────────────────────────────────────────── */ --bw-space-0: 0; --bw-space-1: 0.25rem; --bw-space-2: 0.5rem; --bw-space-3: 0.75rem; --bw-space-4: 1rem; --bw-space-5: 1.25rem; --bw-space-6: 1.5rem; --bw-space-8: 2rem; --bw-space-10: 2.5rem; --bw-space-12: 3rem; --bw-space-16: 4rem; --bw-space-20: 5rem; --bw-space-24: 6rem; --bw-space-32: 8rem; /* ── Radii ──────────────────────────────────────────────────────────── */ --bw-radius-none: 0; --bw-radius-sm: 2px; --bw-radius: 4px; --bw-radius-md: 6px; --bw-radius-lg: 12px; --bw-radius-xl: 20px; --bw-radius-2xl: 28px; --bw-radius-full: 9999px; /* ── Shadows (navy-tinted) ──────────────────────────────────────────── */ --bw-shadow-sm: 0 1px 2px rgb(15 27 51 / 0.08); --bw-shadow: 0 2px 6px rgb(15 27 51 / 0.12), 0 1px 2px rgb(15 27 51 / 0.08); --bw-shadow-md: 0 6px 14px rgb(15 27 51 / 0.14), 0 2px 4px rgb(15 27 51 / 0.08); --bw-shadow-lg: 0 12px 28px rgb(15 27 51 / 0.18), 0 4px 8px rgb(15 27 51 / 0.10); --bw-shadow-xl: 0 24px 48px rgb(15 27 51 / 0.22), 0 8px 16px rgb(15 27 51 / 0.12); --bw-shadow-inset: inset 0 1px 2px rgb(15 27 51 / 0.16); --bw-shadow-paint: 0 2px 0 rgb(245 241 232 / 0.6), 0 -2px 0 rgb(15 27 51 / 0.12); /* ── Motion ─────────────────────────────────────────────────────────── */ --bw-duration-instant: 80ms; --bw-duration-fast: 150ms; --bw-duration: 240ms; --bw-duration-slow: 380ms; --bw-duration-slower: 560ms; --bw-duration-paint: 900ms; --bw-ease-linear: linear; --bw-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --bw-ease-in: cubic-bezier(0.4, 0, 1, 1); --bw-ease-out: cubic-bezier(0, 0, 0.2, 1); --bw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --bw-ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); --bw-ease-brush: cubic-bezier(0.34, 1.56, 0.64, 1); --bw-ease-paint: cubic-bezier(0.65, 0, 0.35, 1); /* ── Z-index ────────────────────────────────────────────────────────── */ --bw-z-base: 0; --bw-z-raised: 10; --bw-z-dropdown: 100; --bw-z-sticky: 200; --bw-z-overlay: 1000; --bw-z-modal: 1100; --bw-z-toast: 1200; --bw-z-tooltip: 1300; /* ── Layout ─────────────────────────────────────────────────────────── */ --bw-size-content: 72ch; --bw-size-prose: 65ch; --bw-size-page: 1240px; --bw-size-wide: 1480px; /* ── Breakpoints ──────────────────────────────────────────────────────── FOUR core viewport breakpoints — every @media query in this codebase references these exact values. Per MDN's responsive design guidance, breakpoints are chosen by content/layout needs, not specific devices, but these four hit the canonical content-break points well: sm → 480px : phone landscape, large phones md → 768px : tablet portrait, small laptops, 2-col layouts lg → 1024px : tablet landscape, standard laptops, 3-col layouts xl → 1280px : desktop, full-width hero compositions Below `sm` is the mobile base (no media query). CSS values can't be referenced inside @media conditions yet — these custom properties are documentation/JS-side, with the actual pixel values hardcoded in @media rules. Keep them in sync. ─────────────────────────────────────────────────────────────────── */ --bw-bp-sm: 480px; --bw-bp-md: 768px; --bw-bp-lg: 1024px; --bw-bp-xl: 1280px; /* ── Default semantic tokens (light) ────────────────────────────────── */ --bw-bg: var(--bw-paint-100); --bw-bg-elevated: #FFFFFF; --bw-bg-sunken: var(--bw-paint-50); --bw-fg: var(--bw-navy-800); --bw-fg-muted: var(--bw-charcoal-500); --bw-fg-subtle: var(--bw-charcoal-400); --bw-fg-inverse: var(--bw-paint-50); --bw-border: var(--bw-paint-300); --bw-border-strong: var(--bw-charcoal-300); --bw-brand: var(--bw-navy-700); --bw-brand-hover: var(--bw-navy-600); --bw-brand-active: var(--bw-navy-800); --bw-accent: var(--bw-navy-500); --bw-paint: var(--bw-paint-100); --bw-chrome: var(--bw-chrome-300); color-scheme: light; } /* ── Dark theme (manual or media-query) ───────────────────────────────── */ .theme-dark, :root.theme-dark { --bw-bg: var(--bw-charcoal-800); --bw-bg-elevated: var(--bw-charcoal-700); --bw-bg-sunken: var(--bw-charcoal-900); --bw-fg: var(--bw-paint-50); --bw-fg-muted: var(--bw-paint-300); --bw-fg-subtle: var(--bw-charcoal-200); --bw-fg-inverse: var(--bw-navy-800); --bw-border: var(--bw-charcoal-500); --bw-border-strong: var(--bw-charcoal-300); --bw-brand: var(--bw-paint-100); --bw-brand-hover: var(--bw-paint-50); --bw-brand-active: var(--bw-paint-200); --bw-accent: var(--bw-navy-400); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --bw-bg: var(--bw-charcoal-800); --bw-bg-elevated: var(--bw-charcoal-700); --bw-bg-sunken: var(--bw-charcoal-900); --bw-fg: var(--bw-paint-50); --bw-fg-muted: var(--bw-paint-300); --bw-fg-subtle: var(--bw-charcoal-200); --bw-fg-inverse: var(--bw-navy-800); --bw-border: var(--bw-charcoal-500); --bw-border-strong: var(--bw-charcoal-300); --bw-brand: var(--bw-paint-100); --bw-brand-hover: var(--bw-paint-50); --bw-brand-active: var(--bw-paint-200); --bw-accent: var(--bw-navy-400); color-scheme: dark; } } } /* ============================================================================ Houdini @property declarations — animatable / interpolatable custom props. Browsers that support CSS.registerProperty (Chromium, Safari 16.4+) treat these as typed values, enabling transition/animation on otherwise non- animatable variables. Paint worklets read these as inputProperties. ============================================================================ */ @property --bw-paint-progress { syntax: ""; inherits: false; initial-value: 0%; } @property --bw-paint-color { syntax: ""; inherits: true; initial-value: #F5F1E8; } @property --bw-paint-density { syntax: ""; inherits: false; initial-value: 1; } @property --bw-paint-angle { syntax: ""; inherits: false; initial-value: 0deg; } @property --bw-brush-pressure { syntax: ""; inherits: false; initial-value: 0.5; } @property --bw-brush-bristles { syntax: ""; inherits: false; initial-value: 24; } @property --bw-stroke-seed { syntax: ""; inherits: false; initial-value: 1; } @property --bw-grain-opacity { syntax: ""; inherits: false; initial-value: 0.06; } /* ============================================================================ Reduced motion override — keep accessibility honest. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --bw-duration-instant: 0ms; --bw-duration-fast: 0ms; --bw-duration: 0ms; --bw-duration-slow: 0ms; --bw-duration-slower: 0ms; --bw-duration-paint: 0ms; } } /* ============================================================================ @custom-media — CSS Media Queries Level 5 draft. Not yet implemented in any browser (as of 2026), but kept here as the canonical declaration of the breakpoint contract. When the spec lands, media queries can reference --bp-md, etc. directly. Until then, copy the px values into the (min-width: …) clauses. ============================================================================ */ @custom-media --bp-sm (min-width: 480px); @custom-media --bp-md (min-width: 768px); @custom-media --bp-lg (min-width: 1024px); @custom-media --bp-xl (min-width: 1280px); @custom-media --bp-sm-down (max-width: 479.98px); @custom-media --bp-md-down (max-width: 767.98px); @custom-media --bp-lg-down (max-width: 1023.98px); @custom-media --bp-xl-down (max-width: 1279.98px);