/* Umbrage Studio — design tokens (colors, typography, spacing)
Copied from the studio design system. Page styles live in site.css. */
/* Fonts are loaded from tags in each page's , not @import.
An @import here would chain two round-trips (tokens.css, then Google) before
any text could paint. If you add a page, copy the two font s over. */
/* Kollektif is the body face, self-hosted from assets/fonts/. Only regular and
bold exist; italics are synthesised by the browser, which is fine because the
only real italic on the site is Cormorant Garamond for quotes. */
@font-face {
font-family: 'Kollektif';
src: url('../assets/fonts/Kollektif.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Kollektif';
src: url('../assets/fonts/Kollektif-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
/* ---- greens (dappled sunlight through leaves) ---- */
--green-50: #eef4f0;
--green-100: #dcebe2;
--green-200: #b9d7c6;
--green-300: #93c1aa;
--green-400: #63a887;
--green-500: #4f9273;
--green-600: #3f7860;
--green-700: #435042;
--green-800: #333d32;
--green-900: #232a23;
/* ---- ginkgo / chartreuse ---- */
--ginkgo-100: #f7f9d9;
--ginkgo-200: #edf4a8;
--ginkgo-300: #edf479;
--ginkgo-400: #dbe75a;
--ginkgo-500: #c3cf42;
/* ---- gold ---- */
--gold-400: #e8c11f;
--gold-eyebrow: #e8dfa0;
/* ---- dusty rose ---- */
--pink-50: #faf1f0;
--pink-100: #f3e0df;
--pink-200: #e7c6c5;
--pink-300: #d9adad;
--pink-400: #cc9ea1;
--pink-500: #b8848a;
--pink-600: #9c6870;
/* ---- warm neutrals / cream ---- */
--cream-000: #fffcf7;
--cream-100: #faf6ee;
--cream-200: #f2ead9;
--stone-300: #ddd3c2;
--stone-500: #a49c8d;
--stone-700: #5d574c;
--ivory-100: #f4ece0;
--ivory-200: #e9dbc9;
/* ---- goth ink ---- */
--ink-900: #201d1a;
--ink-800: #2b2723;
/* =============== semantic aliases =============== */
--surface-page: var(--cream-000);
--surface-raised: #ffffff;
--surface-sunken: var(--cream-200);
--surface-dark: var(--green-700);
--surface-dark-2: var(--ink-900);
--text-heading: var(--ink-900);
--text-body: var(--stone-700);
--text-muted: var(--stone-500);
--text-on-dark: var(--cream-100);
--text-on-dark-muted: #c8ccc5;
--brand-primary: var(--green-500);
--brand-primary-hover: var(--green-600);
--brand-primary-active: var(--green-700);
--brand-accent: var(--pink-400);
--brand-accent-hover: var(--pink-500);
--brand-highlight: var(--ginkgo-300);
--border-subtle: var(--stone-300);
--border-strong: var(--stone-500);
--border-focus: var(--green-500);
--feedback-success: var(--green-500);
--feedback-error: #b5495b;
--feedback-warning: #c99a3e;
--feedback-info: var(--green-400);
--shadow-color: 30, 25, 20;
/* ---- typography ---- */
--font-display: 'Dosis', 'Poppins', ui-rounded, system-ui, sans-serif;
--font-body: 'Kollektif', 'Poppins', 'Segoe UI', system-ui, sans-serif;
--font-serif-accent: 'Cormorant Garamond', 'Times New Roman', serif;
--text-display-xl: 700 4.5rem/1.02 var(--font-display);
--text-display-l: 700 3.25rem/1.05 var(--font-display);
--text-display-m: 600 2.25rem/1.1 var(--font-display);
--text-display-s: 600 1.5rem/1.2 var(--font-display);
--text-body-l: 400 1.125rem/1.6 var(--font-body);
--text-body-m: 400 1rem/1.6 var(--font-body);
--text-body-s: 400 0.875rem/1.5 var(--font-body);
--text-label: 600 0.75rem/1.3 var(--font-body);
--text-quote: 500 italic 1.75rem/1.4 var(--font-serif-accent);
--tracking-label: 0.08em;
--tracking-display: 0.01em;
/* ---- spacing / radii / shadows ---- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
--radius-s: 8px;
--radius-m: 16px;
--radius-l: 28px;
--radius-pill: 999px;
--shadow-s: 0 1px 3px rgba(var(--shadow-color), 0.08), 0 1px 2px rgba(var(--shadow-color), 0.06);
--shadow-m: 0 6px 20px rgba(var(--shadow-color), 0.10), 0 2px 6px rgba(var(--shadow-color), 0.06);
--shadow-l: 0 20px 48px rgba(var(--shadow-color), 0.14), 0 6px 16px rgba(var(--shadow-color), 0.08);
--border-w: 1.5px;
--ease-soft: cubic-bezier(.25,.8,.4,1);
--duration-fast: 140ms;
--duration-med: 260ms;
}