/* ==========================================================================
SERENE BAY — PORTABLE DESIGN TOKENS
Deep navy + warm ivory + muted antique gold
--------------------------------------------------------------------------
Framework-agnostic CSS custom properties. Drop this in before your own
styles, then reference tokens only — never hardcode a value.
Requires these fonts (or swap the two --font-* vars for your own):
Dark mode: follows the OS by default. To override manually, set
data-theme="light" or data-theme="dark" on .
========================================================================== */
/* --------------------------------------------------------------------------
1. MODE-INDEPENDENT TOKENS
Type scale, spacing, radius, motion, layout widths, font stacks.
-------------------------------------------------------------------------- */
:root {
/* --- Fonts ------------------------------------------------------------ */
--font-display: 'Cormorant', 'Georgia', serif;
--font-body: 'Work Sans', 'Helvetica Neue', sans-serif;
/* --- Fluid type scale ------------------------------------------------- */
/* 12px floor on everything. Display font only at --text-xl and above. */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12 → 14px labels, eyebrows, metadata */
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14 → 16px nav, buttons, list items */
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18px body copy */
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); /* 18 → 24px subheads, lede paragraphs */
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); /* 24 → 36px section titles */
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); /* 32 → 56px interior page heroes */
--text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); /* 40 → 80px stat numbers */
--text-hero: clamp(2.5rem, 0.5rem + 4.5vw, 5rem); /* 40 → 80px homepage hero only */
/* --- Spacing (4px base unit) ------------------------------------------ */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* Fluid section rhythm — vary between sections, don't apply uniformly */
--section-pad: clamp(var(--space-16), 8vw, var(--space-24));
--section-pad-tight: clamp(var(--space-10), 5vw, var(--space-16));
/* --- Radius ----------------------------------------------------------- */
/* Deliberately tight. Large radii read casual rather than refined. */
--radius-sm: 0.25rem; /* 4px buttons, inputs */
--radius-md: 0.375rem; /* 6px dropdowns */
--radius-lg: 0.5rem; /* 8px cards, images */
--radius-xl: 0.75rem; /* 12px CTA banners */
--radius-full: 9999px; /* pills, avatars */
/* --- Motion ----------------------------------------------------------- */
--transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
/* --- Layout widths ---------------------------------------------------- */
--content-narrow: 640px; /* forms, focused prose */
--content-default: 1000px; /* standard page content */
--content-wide: 1240px; /* default container */
--content-full: 100%; /* full-bleed media */
--prose-measure: 72ch; /* max line length */
}
/* --------------------------------------------------------------------------
2. LIGHT MODE (default)
-------------------------------------------------------------------------- */
:root,
[data-theme='light'] {
/* --- Surfaces (warm ivory) ------------------------------------------- */
--color-bg: #faf8f4;
--color-surface: #ffffff;
--color-surface-2: #f4f1ea;
--color-surface-offset: #eeeae1;
--color-surface-dynamic: #e6e1d4;
--color-divider: #e2ddd0;
--color-border: #d8d2c2;
/* --- Text (deep navy) ------------------------------------------------ */
--color-text: #14213a;
--color-text-muted: #5b6479;
--color-text-faint: #9aa0af;
--color-text-inverse: #faf8f4;
/* --- Primary (deep navy) --------------------------------------------- */
--color-primary: #0d2247;
--color-primary-hover: #1a3663;
--color-primary-active: #081630;
--color-primary-highlight: #dbe2ee;
/* --- Accent (muted antique gold) — the ONLY non-neutral hue ---------- */
--color-accent: #a4823c;
--color-accent-hover: #8a6c2f;
--color-accent-highlight: #ebe0c6;
/* --- Semantic -------------------------------------------------------- */
--color-success: #3f6b4c;
--color-warning: #96591f;
/* --- Shadows (navy-tinted, never pure black) ------------------------- */
--shadow-sm: 0 1px 2px oklch(0.2 0.02 250 / 0.06);
--shadow-md: 0 6px 20px oklch(0.2 0.02 250 / 0.10);
--shadow-lg: 0 16px 40px oklch(0.2 0.02 250 / 0.16);
/* --- Hero scrim (keeps white display type legible over photos) ------- */
--scrim-hero: linear-gradient(
180deg,
oklch(0.12 0.03 250 / 0.15) 0%,
oklch(0.1 0.03 250 / 0.55) 65%,
oklch(0.08 0.03 250 / 0.85) 100%
);
}
/* --------------------------------------------------------------------------
3. DARK MODE
-------------------------------------------------------------------------- */
[data-theme='dark'] {
--color-bg: #0b1526;
--color-surface: #10192c;
--color-surface-2: #141f35;
--color-surface-offset: #182440;
--color-surface-dynamic: #1c2b4a;
--color-divider: #223252;
--color-border: #2b3d60;
--color-text: #eae6db;
--color-text-muted: #a9b0c2;
--color-text-faint: #6f7a92;
--color-text-inverse: #0b1526;
--color-primary: #b9c6e0;
--color-primary-hover: #d3dcee;
--color-primary-active: #98a9cc;
--color-primary-highlight: #223252;
/* Gold brightens on dark so it keeps AA contrast */
--color-accent: #d1b06a;
--color-accent-hover: #e2c688;
--color-accent-highlight: #2c2617;
--color-success: #7fb08d;
--color-warning: #d4924f;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
--shadow-md: 0 6px 20px oklch(0 0 0 / 0.35);
--shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
}
/* Follow the OS when no data-theme has been set explicitly */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-bg: #0b1526;
--color-surface: #10192c;
--color-surface-2: #141f35;
--color-surface-offset: #182440;
--color-surface-dynamic: #1c2b4a;
--color-divider: #223252;
--color-border: #2b3d60;
--color-text: #eae6db;
--color-text-muted: #a9b0c2;
--color-text-faint: #6f7a92;
--color-text-inverse: #0b1526;
--color-primary: #b9c6e0;
--color-primary-hover: #d3dcee;
--color-primary-active: #98a9cc;
--color-primary-highlight: #223252;
--color-accent: #d1b06a;
--color-accent-hover: #e2c688;
--color-accent-highlight: #2c2617;
--color-success: #7fb08d;
--color-warning: #d4924f;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
--shadow-md: 0 6px 20px oklch(0 0 0 / 0.35);
--shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
}
}
/* --------------------------------------------------------------------------
4. SIGNATURE BRAND TREATMENTS
The three patterns that actually make it look like this brand.
Optional — delete if you only want raw tokens.
-------------------------------------------------------------------------- */
/* Headings: display serif, navy, subtly letterspaced */
.brand-heading {
font-family: var(--font-display);
font-weight: 500;
color: var(--color-primary);
letter-spacing: 0.01em;
line-height: 1.15;
text-wrap: balance;
}
[data-theme='dark'] .brand-heading {
color: var(--color-text);
}
/* Eyebrow: gold uppercase kicker with a short leading rule.
Sits above nearly every section heading. */
.brand-eyebrow {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.brand-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--color-accent);
}
/* Centered variant drops the rule */
.brand-eyebrow--center {
justify-content: center;
}
.brand-eyebrow--center::before {
display: none;
}
/* Logo lockup: serif wordmark with a wide-tracked gold descriptor beneath */
.brand-lockup {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-text);
letter-spacing: 0.04em;
line-height: 1.1;
}
.brand-lockup small {
display: block;
font-family: var(--font-body);
font-size: 0.55em;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
}