/*
Belle McCaffrey Design System: tokens
Link this one file to get fonts, colors, type, spacing, radius, shadow and motion.
Themes
Light is the default. Opt in per project or element:
data-theme="auto" follows the device setting (light or dark)
data-theme="dark" always dark
data-theme="light" always light (e.g. inside a dark area)
Client documents (quotes, invoices, PDFs) should stay light.
Naming
--bm-- primitive palette. Use rarely.
--color-* semantic colors. Use these in components.
--font-*, --size-*, --weight-*, --leading-*, --tracking-* type
--space-*, --radius-*, --shadow-*, --duration-*, --ease everything else
*/
:root {
/* Primitive palette */
--bm-emerald-950: #0f2622; /* Deepest emerald. Dark theme page background. */
--bm-emerald-900: #12322c; /* Deep emerald. Strong headings on light. */
--bm-emerald-850: #163631; /* Dark theme card surface. */
--bm-emerald-800: #163a34; /* Primary hover on light. Footer. */
--bm-emerald-750: #1f4740; /* Dark theme raised surface and pill fill. */
--bm-emerald-700: #1d4a42; /* Brand emerald. Primary buttons, headings, hero. */
--bm-emerald-650: #245a4f; /* Italic heading accent on light. */
--bm-emerald-600: #2f6b5f; /* Emerald mid. Labels, links, italic accents. */
--bm-emerald-500: #2c5148; /* Dark theme border. */
--bm-mint-300: #9fd0be; /* Mint. Accent on dark surfaces. */
--bm-mint-200: #b9ddd0; /* Light mint. Dark theme primary hover. */
--bm-mint-100: #d9ece4; /* Mint wash. Pills and checks on light. */
--bm-mint-050: #cfe8de; /* Pill text on dark. */
--bm-neutral-cream: #f6f1ea; /* Cream. Light theme page background, text on emerald. */
--bm-neutral-paper: #fffdf9; /* Paper. Light theme cards. */
--bm-neutral-sand: #ece4d8; /* Sand. Alternate section background. */
--bm-neutral-line: #d8cfc2; /* Hairlines and outlined cards on light. */
--bm-neutral-ink: #1c2b28; /* Ink. Body text on light. */
--bm-neutral-slate: #56645f; /* Muted text on light. */
--bm-neutral-fog: #b5c2bd; /* Muted text on dark. */
--bm-neutral-linen: #efe8de; /* Body text on dark. */
/* Type */
--font-heading: "Zodiak", "Iowan Old Style", Georgia, serif; /* Headings, titles, display, pull lines */
--font-body: "Roundo", "Avenir Next", "Segoe UI", system-ui, sans-serif; /* Body text, buttons, labels, UI */
--weight-heading: 600; /* Default Zodiak weight for headings (Zodiak Bold file) */
--weight-heading-light: 400; /* Zodiak for large statements and lead lines */
--weight-body: 400; /* Roundo body */
--weight-medium: 500; /* Roundo emphasis in running text */
--weight-button: 600; /* Roundo buttons and list items */
--weight-label: 700; /* Roundo uppercase labels */
--size-display: clamp(3.25rem, 7vw, 5.5rem); /* Hero name (52–88px) */
--size-h1: clamp(2.25rem, 4.6vw, 3.5rem); /* Section titles (36–56px) */
--size-h2: clamp(1.75rem, 3vw, 2.25rem); /* Card and project titles (28–36px) */
--size-h3: clamp(1.375rem, 2vw, 1.5rem); /* Small titles, step names (22–24px) */
--size-statement: clamp(1.875rem, 3.6vw, 2.75rem); /* Hero statement (30–44px) */
--size-lead: 1.25rem; /* Lead paragraph (20px) */
--size-body: 1.125rem; /* Body (18px) */
--size-small: 1rem; /* Small text, chips (16px) */
--size-caption: 0.875rem; /* Captions, pills (14px) */
--size-label: 0.8125rem; /* Uppercase labels (13px) */
--leading-tight: 1.05; /* Display and large headings */
--leading-heading: 1.15; /* Headings */
--leading-body: 1.65; /* Body text */
--tracking-label: 0.18em; /* Uppercase labels */
--tracking-heading: -0.01em; /* Large headings */
/* Spacing (4px base) */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem; /* Base unit */
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem; /* Large gaps between blocks */
--space-14: 3.5rem;
--space-16: 4rem; /* Section padding (phone) */
--space-24: 6rem; /* Section padding (desktop) */
/* Radius */
--radius-sm: 8px; /* Small controls, inner screenshots */
--radius-md: 14px; /* Small cards, icons */
--radius-lg: 18px; /* Cards, steps, fact boxes */
--radius-xl: 22px; /* Skill cards, tools panel */
--radius-2xl: 28px; /* Case study panels, device stages */
--radius-pill: 999px; /* Buttons, pills, chips */
--radius-arch: 999px 999px 26px 26px; /* Portrait arch (signature shape) */
/* Shadow */
--shadow-card: 0 1px 2px rgb(15 38 34 / 0.06), 0 8px 24px -12px rgb(15 38 34 / 0.18); /* Raised cards */
--shadow-device: 0 24px 50px -20px rgb(22 58 52 / 0.45); /* Phone and tablet frames */
--shadow-float: 0 10px 30px rgb(0 0 0 / 0.18); /* Floating labels and popovers */
/* Layout */
--content-width: 1120px; /* Max content width */
--reading-width: 680px; /* Max width for running text */
--gutter: 20px; /* Minimum side gutter */
--nav-height: 64px; /* Sticky navigation height */
/* Motion */
--duration-fast: 150ms; /* @kind other */ /* Hover lifts */
--duration-reveal: 700ms; /* @kind other */ /* Scroll reveal */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */ /* Default easing */
}
/* Light theme (default) */
:root,
[data-theme="light"] {
--color-bg: var(--bm-neutral-cream); /* Page background */
--color-bg-alt: var(--bm-neutral-sand); /* Alternate section background (for example, case studies) */
--color-surface: var(--bm-neutral-paper); /* Cards and panels */
--color-surface-raised: var(--bm-neutral-cream); /* Inset blocks inside cards (fact boxes, steps) */
--color-text: var(--bm-neutral-ink); /* Body text */
--color-text-muted: var(--bm-neutral-slate); /* Supporting text, descriptions */
--color-heading: var(--bm-emerald-700); /* Headings */
--color-heading-strong: var(--bm-emerald-900); /* Extra-strong headings and pull lines */
--color-heading-accent: var(--bm-emerald-600); /* Italic accent word inside headings */
--color-label: var(--bm-emerald-600); /* Uppercase eyebrow labels */
--color-border: var(--bm-neutral-line); /* Hairlines and outlined cards */
--color-primary: var(--bm-emerald-700); /* Primary buttons and key actions */
--color-primary-hover: var(--bm-emerald-800); /* Primary hover */
--color-on-primary: var(--bm-neutral-cream); /* Text on primary */
--color-accent-soft: var(--bm-mint-100); /* Pills, chips, check circles */
--color-on-accent-soft: var(--bm-emerald-700); /* Text on accent-soft */
--color-inverse-bg: var(--bm-emerald-700); /* Inverse band (hero, contact) */
--color-inverse-bg-strong: var(--bm-emerald-800); /* Footer */
--color-inverse-text: var(--bm-neutral-cream); /* Text on inverse band */
--color-inverse-muted: var(--bm-neutral-fog); /* Muted text on inverse band */
--color-inverse-accent: var(--bm-mint-300); /* Accent on inverse band */
--color-focus: var(--bm-mint-300); /* Keyboard focus ring */
--color-device: #0f1f1c; /* Phone, tablet frame */
color-scheme: light;
}
/* Dark theme */
[data-theme="dark"] {
--color-bg: var(--bm-emerald-950); /* Page background */
--color-bg-alt: var(--bm-emerald-850); /* Alternate section background (for example, case studies) */
--color-surface: var(--bm-emerald-850); /* Cards and panels */
--color-surface-raised: var(--bm-emerald-750); /* Inset blocks inside cards (fact boxes, steps) */
--color-text: var(--bm-neutral-linen); /* Body text */
--color-text-muted: var(--bm-neutral-fog); /* Supporting text, descriptions */
--color-heading: var(--bm-neutral-cream); /* Headings */
--color-heading-strong: var(--bm-neutral-cream); /* Extra-strong headings and pull lines */
--color-heading-accent: var(--bm-mint-300); /* Italic accent word inside headings */
--color-label: var(--bm-mint-300); /* Uppercase eyebrow labels */
--color-border: var(--bm-emerald-500); /* Hairlines and outlined cards */
--color-primary: var(--bm-mint-300); /* Primary buttons and key actions */
--color-primary-hover: var(--bm-mint-200); /* Primary hover */
--color-on-primary: var(--bm-emerald-950); /* Text on primary */
--color-accent-soft: var(--bm-emerald-750); /* Pills, chips, check circles */
--color-on-accent-soft: var(--bm-mint-050); /* Text on accent-soft */
--color-inverse-bg: var(--bm-emerald-750); /* Inverse band (hero, contact) */
--color-inverse-bg-strong: var(--bm-emerald-850); /* Footer */
--color-inverse-text: var(--bm-neutral-cream); /* Text on inverse band */
--color-inverse-muted: var(--bm-neutral-fog); /* Muted text on inverse band */
--color-inverse-accent: var(--bm-mint-300); /* Accent on inverse band */
--color-focus: var(--bm-mint-300); /* Keyboard focus ring */
--color-device: #081512; /* Phone, tablet frame */
color-scheme: dark;
}
/* Auto theme: follows the device setting (light or dark). Opt in with data-theme="auto" on or any element.
Uses CSS light-dark(); supported in all current browsers. */
[data-theme="auto"] {
color-scheme: light dark;
--color-bg: light-dark(var(--bm-neutral-cream), var(--bm-emerald-950));
--color-bg-alt: light-dark(var(--bm-neutral-sand), var(--bm-emerald-850));
--color-surface: light-dark(var(--bm-neutral-paper), var(--bm-emerald-850));
--color-surface-raised: light-dark(var(--bm-neutral-cream), var(--bm-emerald-750));
--color-text: light-dark(var(--bm-neutral-ink), var(--bm-neutral-linen));
--color-text-muted: light-dark(var(--bm-neutral-slate), var(--bm-neutral-fog));
--color-heading: light-dark(var(--bm-emerald-700), var(--bm-neutral-cream));
--color-heading-strong: light-dark(var(--bm-emerald-900), var(--bm-neutral-cream));
--color-heading-accent: light-dark(var(--bm-emerald-600), var(--bm-mint-300));
--color-label: light-dark(var(--bm-emerald-600), var(--bm-mint-300));
--color-border: light-dark(var(--bm-neutral-line), var(--bm-emerald-500));
--color-primary: light-dark(var(--bm-emerald-700), var(--bm-mint-300));
--color-primary-hover: light-dark(var(--bm-emerald-800), var(--bm-mint-200));
--color-on-primary: light-dark(var(--bm-neutral-cream), var(--bm-emerald-950));
--color-accent-soft: light-dark(var(--bm-mint-100), var(--bm-emerald-750));
--color-on-accent-soft: light-dark(var(--bm-emerald-700), var(--bm-mint-050));
--color-inverse-bg: light-dark(var(--bm-emerald-700), var(--bm-emerald-750));
--color-inverse-bg-strong: light-dark(var(--bm-emerald-800), var(--bm-emerald-850));
--color-inverse-text: light-dark(var(--bm-neutral-cream), var(--bm-neutral-cream));
--color-inverse-muted: light-dark(var(--bm-neutral-fog), var(--bm-neutral-fog));
--color-inverse-accent: light-dark(var(--bm-mint-300), var(--bm-mint-300));
--color-focus: light-dark(var(--bm-mint-300), var(--bm-mint-300));
--color-device: light-dark(#0f1f1c, #081512);
}
/* Base element defaults (optional but recommended) */
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-weight: var(--weight-body);
font-size: var(--size-body);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: var(--weight-heading);
color: var(--color-heading);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
text-wrap: balance;
}
h1 em, h2 em, h3 em, h4 em { color: var(--color-heading-accent); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}