/* Bellamy design tokens. Ported verbatim from the design system in the handoff bundle.
Do not edit values here without changing the brand system. */
/* ============================================================
Bellamy — Webfonts
------------------------------------------------------------
Brand fonts, all available on Google Fonts EXCEPT:
- "Glacial Indifference" (secondary geometric sans) — not on
Google Fonts. Inter covers the UI/sans role, so it is used
as the substitute. Flag to brand team if the licensed file
is required.
- The "Bellamy" script wordmark is a CUSTOM logo. NEVER typeset
it from a font — always use the official logo asset
(assets/logos/). Pinyon Script is the nearest cousin and is
reserved for short accent flourishes, never the wordmark.
============================================================ */
/* The webfonts are loaded from a in src/layout.html, NOT with @import
here. An @import inside a stylesheet is serial: the browser has to fetch and
parse this file before it even learns the font CSS exists, and only then can
it fetch the font files. That is three round trips before the first word is
painted in the right face, and it is measured as Largest Contentful Paint.
The starts the font request in parallel with this file instead.
If a family or weight changes, change it in layout.html. */
/* ============================================================
Bellamy — Color Tokens
Navy-anchored coastal New England palette.
Source of truth: "Bellamy Color Palette" brand artifact.
Avoid: gold, bronze, beige wellness tones, saturated brights.
============================================================ */
:root {
/* ---- Brand scale (raw values) ---- */
--bellamy-navy: #2C3E86; /* PRIMARY — the anchor */
--bellamy-navy-deep: #1F2F6B; /* Deeper navy — depth, footers, overlays */
--bellamy-muted-blue: #5F7FA6; /* Secondary — quiet supporting blue */
--bellamy-blue: #7F9FC4; /* Accent — primary mid-tone accent */
--bellamy-blue-light: #AFC3DB; /* Light Blue B — soft tints, borders */
--bellamy-sky: #CFE7FF; /* Light Blue A — airy backgrounds, used sparingly */
/* ---- Neutrals ---- */
--bellamy-base: #F5F3EF; /* Base Neutral — warm paper ground */
--bellamy-off-white: #F4F4F2; /* Off-white — cards / surfaces */
--bellamy-soft-gray: #E9E7E4; /* Soft Gray — hairlines, dividers */
--bellamy-white: #FFFFFF;
--bellamy-ink: #1A1A1A; /* Near-black — body text on light */
/* ---- Derived tints (oklch, harmonious with the scale) ---- */
--bellamy-navy-100: oklch(0.96 0.02 265); /* faintest navy wash */
--bellamy-navy-200: oklch(0.91 0.04 265);
--bellamy-navy-tint: rgba(44, 62, 134, 0.06); /* navy @ 6% for hovers/washes */
--bellamy-navy-line: rgba(44, 62, 134, 0.14); /* navy hairline */
/* ============================================================
Semantic aliases — reference these in components, not raw hex
============================================================ */
/* Surfaces */
--surface-page: var(--bellamy-base);
--surface-card: var(--bellamy-white);
--surface-raised: var(--bellamy-off-white);
--surface-sunken: var(--bellamy-soft-gray);
--surface-sky: var(--bellamy-sky);
--surface-navy: var(--bellamy-navy);
--surface-navy-deep: var(--bellamy-navy-deep);
/* Text */
--text-strong: var(--bellamy-navy-deep); /* headlines on light */
--text-body: #2A2E3A; /* warm near-ink for prose */
--text-muted: var(--bellamy-muted-blue);
--text-soft: #8893A6; /* captions, meta */
--text-on-navy: var(--bellamy-off-white);
--text-on-navy-muted: rgba(244, 244, 242, 0.66);
/* Brand / interactive */
--color-primary: var(--bellamy-navy);
--color-primary-hover: var(--bellamy-navy-deep);
--color-accent: var(--bellamy-blue);
--color-link: var(--bellamy-navy);
/* Lines & borders */
--border-hairline: var(--bellamy-soft-gray);
--border-soft: var(--bellamy-blue-light);
--border-strong: var(--bellamy-navy);
--border-on-navy: rgba(244, 244, 242, 0.24);
/* Focus ring */
--focus-ring: var(--bellamy-blue);
/* Status (kept muted + coastal, never alarming) */
--status-positive: #4E7C6B; /* sea glass green */
--status-attention: #B07A4A; /* muted dune (used rarely; not "gold") */
--status-info: var(--bellamy-muted-blue);
}
/* ============================================================
Bellamy — Typography Tokens
Editorial serif-led system. Playfair leads, Source Serif for
long-form, Inter for UI, Pinyon Script for rare accent flourish.
============================================================ */
:root {
/* ---- Families ---- */
--font-display: 'Playfair Display', 'Times New Roman', serif; /* headlines, titles */
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* body prose */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* UI, nav, labels */
--font-script: 'Pinyon Script', cursive; /* accent flourish ONLY — never the wordmark */
/* ---- Weights ---- */
--fw-light: 300; /* @kind font */
--fw-regular: 400; /* @kind font */
--fw-medium: 500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold: 700; /* @kind font */
/* ---- Type scale (editorial, generous) ---- */
--text-3xs: 0.6875rem; /* 11px — overline / eyebrow micro */
--text-2xs: 0.75rem; /* 12px */
--text-xs: 0.8125rem; /* 13px */
--text-sm: 0.9375rem; /* 15px */
--text-base: 1.0625rem; /* 17px — body default */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 2.75rem; /* 44px */
--text-4xl: 3.75rem; /* 60px */
--text-5xl: 5rem; /* 80px */
--text-6xl: 6.5rem; /* 104px — editorial display */
/* ---- Line heights ---- */
--leading-tight: 1.08; /* large display */
--leading-snug: 1.22; /* headings */
--leading-normal: 1.5; /* UI */
--leading-relaxed: 1.7; /* body prose */
/* ---- Letter spacing ---- */
--tracking-tight: -0.02em; /* large Playfair display */
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-eyebrow: 0.22em; /* the signature wide-set caps eyebrow */
/* ---- Semantic roles ---- */
--eyebrow-font: var(--font-sans);
--eyebrow-size: var(--text-2xs);
--eyebrow-track: var(--tracking-eyebrow);
--display-font: var(--font-display);
--heading-font: var(--font-display);
--body-font: var(--font-serif);
--ui-font: var(--font-sans);
}
/* ============================================================
Bellamy — Spacing, Radius, Shadow, Motion Tokens
Airy and generous. Restraint over density.
============================================================ */
:root {
/* ---- Spacing scale (4px base) ---- */
--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.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 8rem; /* 128 */
/* ---- Layout ---- */
--container-sm: 640px;
--container-md: 860px; /* editorial reading measure */
--container-lg: 1120px;
--container-xl: 1320px;
--gutter: var(--space-6);
/* ---- Corner radius — soft, restrained. Never pill-everything ---- */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 14px; /* cards */
--radius-xl: 22px; /* large feature panels */
--radius-full: 999px; /* chips, avatars, dots */
/* ---- Borders ---- */
--border-width: 1px;
--border-width-thick:1.5px;
/* ---- Shadows — soft, low, diffuse. Coastal light, never heavy ---- */
--shadow-xs: 0 1px 2px rgba(31, 47, 107, 0.05);
--shadow-sm: 0 2px 8px rgba(31, 47, 107, 0.06);
--shadow-md: 0 10px 30px -12px rgba(31, 47, 107, 0.16);
--shadow-lg: 0 24px 60px -20px rgba(31, 47, 107, 0.22);
--shadow-inset-hairline: inset 0 0 0 1px var(--bellamy-soft-gray);
/* ---- Motion — slow, composed, editorial. No bounce ---- */
--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--dur-fast: 140ms; /* @kind other */
--dur-base: 240ms; /* @kind other */
--dur-slow: 420ms; /* @kind other */
--dur-reveal: 720ms; /* @kind other */
}