/* Geoffrey design tokens.
*
* Copied VERBATIM from the Claude Design project's design system
* (_ds/geoffrey-design-system-64df99a3-0842-4099-8b51-aa9861a28a97/tokens/*.css),
* concatenated in the same order styles.css imports them: colors, typography,
* spacing, effects, base. Do not "tidy" values here — this file's whole job is
* to be diffable against the design system, so a drift shows up as a diff.
*
* The one deliberate omission is tokens/fonts.css, which pulls the webfonts via
* a CSS `@import`. That serialises the font fetch behind this stylesheet; the
* pages carry the equivalent +
* in instead, which starts the fetch earlier. Same three families, same
* axes, same display=swap.
*/
:root {
/* ===== Base scales ===== */
/* Ink green — the Geoffrey brand color. Deep, calm, buttoned-up. */
--green-950: #0F1D15;
--green-900: #16291D;
--green-800: #1E3728;
--green-700: #274633;
--green-600: #33573F;
--green-500: #47705A;
--green-400: #6B9078;
--green-300: #93B29E;
--green-200: #BFD3C6;
--green-100: #DFE9E2;
--green-50: #F0F5F1;
/* Cream / oat — warm paper neutrals. Never pure white, never pure gray. */
--cream-50: #FAF7F0;
--cream-100: #F4EFE4;
--cream-200: #E9E1D0;
--cream-300: #D8CDB6;
--cream-400: #B7A98D;
--cream-500: #94856A;
/* Ink — green-tinted near-black for text. */
--ink-900: #1B241E;
--ink-700: #3A453E;
--ink-500: #5E6A62;
--ink-400: #7E897F;
/* Brass — the accent. Used sparingly: highlights, prices, small flourishes. */
--brass-100: #F1E7CF;
--brass-300: #D3B878;
--brass-500: #B08A3E;
--brass-600: #96742F;
--brass-700: #7A5D24;
/* Semantic hues */
--red-600: #A8402F; /* danger / remove */
--red-100: #F5E0DB;
--amber-600:#A16A1B; /* warning / attention */
--amber-100:#F4E7CE;
--blue-600: #33608C; /* info */
--blue-100: #DEE7F0;
/* ===== Semantic aliases ===== */
/* Surfaces */
--surface-page: var(--cream-50);
--surface-card: #FFFDF8;
--surface-sunken: var(--cream-100);
--surface-brand: var(--green-900);
--surface-brand-2: var(--green-800);
/* Text */
--text-heading: var(--ink-900);
--text-body: var(--ink-700);
--text-muted: var(--ink-500);
--text-faint: var(--ink-400);
--text-on-brand: var(--cream-50);
--text-on-brand-muted: var(--green-300);
--text-accent: var(--brass-600);
--text-link: var(--green-700);
/* Interactive */
--action-primary: var(--green-800);
--action-primary-hover: var(--green-700);
--action-primary-press: var(--green-900);
--action-secondary-border: var(--cream-300);
--focus-ring: var(--green-500);
/* Borders */
--border-subtle: var(--cream-200);
--border-strong: var(--cream-300);
--border-on-brand: rgba(250, 247, 240, 0.16);
/* Status */
--status-success-fg: var(--green-600);
--status-success-bg: var(--green-100);
--status-warning-fg: var(--amber-600);
--status-warning-bg: var(--amber-100);
--status-danger-fg: var(--red-600);
--status-danger-bg: var(--red-100);
--status-info-fg: var(--blue-600);
--status-info-bg: var(--blue-100);
/* Families */
--font-serif-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
--font-sans: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Spline Sans Mono', 'SF Mono', Menlo, monospace;
/* Scale */
--text-xs: 0.75rem; /* 12 — labels, meta */
--text-sm: 0.8125rem; /* 13 — secondary UI */
--text-base: 0.9375rem; /* 15 — body */
--text-md: 1.0625rem; /* 17 — emphasized body */
--text-lg: 1.375rem; /* 22 — card titles (serif) */
--text-xl: 1.75rem; /* 28 — screen titles (serif) */
--text-2xl: 2.375rem; /* 38 — section display (serif) */
--text-3xl: 3.25rem; /* 52 — hero display (serif) */
/* Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* Line heights */
--leading-tight: 1.15; /* display serif */
--leading-snug: 1.35; /* headings, UI */
--leading-body: 1.55; /* body copy */
/* Letter spacing */
--tracking-display: -0.01em;
--tracking-caps: 0.08em; /* small-caps labels */
/* Spacing — 4px base */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* Radii — restrained, not bubbly */
--radius-sm: 6px; /* inputs, tags */
--radius-md: 10px; /* buttons, small cards */
--radius-lg: 16px; /* cards, dialogs */
--radius-pill: 999px;
/* Layout */
--container-max: 1120px;
--app-width: 390px; /* mobile app canvas */
/* Shadows — warm, soft, low. No hard drop shadows. */
--shadow-card: 0 1px 2px rgba(27, 36, 30, 0.05), 0 4px 16px rgba(27, 36, 30, 0.06);
--shadow-raised: 0 2px 6px rgba(27, 36, 30, 0.08), 0 12px 32px rgba(27, 36, 30, 0.10);
--shadow-overlay: 0 8px 20px rgba(27, 36, 30, 0.14), 0 24px 64px rgba(27, 36, 30, 0.18);
--shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);
/* Motion — composed, unhurried. No bounces. */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
/* Scrims */
--scrim: rgba(15, 29, 21, 0.44);
}
/* Minimal base — applies brand defaults to bare elements. */
body {
margin: 0;
background: var(--surface-page);
color: var(--text-body);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--font-serif-display);
font-weight: var(--weight-medium);
color: var(--text-heading);
letter-spacing: var(--tracking-display);
line-height: var(--leading-tight);
margin: 0;
}
a { color: var(--text-link); }
::selection { background: var(--green-200); }