/* 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. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Pinyon+Script&family=Inter:wght@300;400;500;600;700&display=swap'); /* ============================================================ 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 */ }