/* ========================================================================== Ramon Alexander — Design Tokens -------------------------------------------------------------------------- Single source of styling truth. Every color, size, space, and font in the build should reference a token here — do NOT hardcode raw hex/px values in page CSS. See docs/design-system.md for rationale, contrast data, and the layout patterns that consume these tokens. Palette concept: a warm Cape Jazz "record-label sleeve" — deep warm piano-black, parchment/bone paper, brass accent, ghoema-terracotta and oxblood (winemaking nod) as heritage earth tones. NOT the generic jazz = navy + gold cliché. Structure: 1. Raw palette (--c-*) the literal colors, never used directly 2. Semantic roles (--color-*) what page CSS actually references 3. Typography (--font-*, --step-*, --leading-*, --tracking-*) 4. Spacing (--space-*, --section-y, --gutter) 5. Layout (--container-*, breakpoints are documented, not vars) 6. Radius / shadow / border 7. Motion / z-index / focus ========================================================================== */ :root { /* ------------------------------------------------------------------ * * 1. RAW PALETTE — reference via the semantic roles below, not direct * * ------------------------------------------------------------------ */ /* Piano-black / warm dark neutrals (brown-black, never pure #000) */ --c-ink-900: #17130f; /* deepest surface — hero/footer background */ --c-ink-800: #201a14; /* raised dark surface (cards on dark) */ --c-ink-700: #2c251d; /* dark borders / hover on dark */ --c-ink-600: #453b30; /* muted dark line */ /* Parchment / bone paper (warm light neutrals) */ --c-paper-50: #faf4ea; /* lightest paper */ --c-paper-100: #f5ede0; /* default light surface */ --c-paper-200: #ece0cd; /* subtle light fill / hover on light */ --c-paper-300: #dccbb0; /* light border / hairline */ /* Muted warm text tones (for use on dark) */ --c-sand-300: #c9b79c; /* secondary/muted text on dark */ --c-sand-400: #b2a084; /* Brass / gold accent (warm, not lemon) */ --c-brass-300: #e4c079; /* light brass (hover/emphasis on dark) */ --c-brass-400: #cb9f4c; /* PRIMARY brass accent */ --c-brass-500: #a97f33; /* brass on light paper (AA text) */ /* Ghoema terracotta / Cape earth (secondary accent, rhythm/energy) */ --c-terra-400: #c0592f; /* terracotta */ --c-terra-500: #a4471f; /* terracotta on light (AA text) */ /* Oxblood / wine (winemaking-to-jazz nod; used sparingly, deep accents) */ --c-wine-500: #7a2f2c; --c-wine-600: #5f2422; /* Utility signal colors (forms / states) — warm-tuned, still legible */ --c-success: #4e7c52; --c-error: #b23b2e; --c-focus: #7fb0d6; /* cool focus ring reads clearly on all bg's */ --c-white: #ffffff; --c-black: #000000; /* ------------------------------------------------------------------ * * 2. SEMANTIC ROLES — page CSS references THESE * * ------------------------------------------------------------------ */ /* Surfaces */ --color-bg: var(--c-paper-100); /* default page background */ --color-bg-raised: var(--c-paper-50); /* cards on light */ --color-bg-sunken: var(--c-paper-200); /* wells / alternating bands */ --color-bg-inverse: var(--c-ink-900); /* dark sections / hero / footer */ --color-bg-inverse-raised: var(--c-ink-800); /* Text on light surfaces */ --color-text: var(--c-ink-900); /* body on paper — 14.5:1 */ --color-text-muted: var(--c-ink-600); /* captions/meta on paper */ --color-heading: var(--c-ink-900); /* Text on dark/inverse surfaces */ --color-text-inverse: var(--c-paper-100); /* body on ink — 16:1 */ --color-text-inverse-muted: var(--c-sand-300); /* muted on ink — 9.6:1 */ /* Accents */ --color-accent: var(--c-brass-400); /* brass — links/UI on dark */ --color-accent-strong: var(--c-brass-300); /* brass hover on dark */ --color-accent-on-light: var(--c-brass-500); /* AA brass text on paper */ --color-accent-2: var(--c-terra-400); /* terracotta secondary accent */ --color-accent-2-on-light: var(--c-terra-500); --color-accent-3: var(--c-wine-500); /* oxblood, deep detail */ /* Links (default context = light surface) */ --color-link: var(--c-terra-500); --color-link-hover: var(--c-wine-600); --color-link-inverse: var(--c-brass-300); --color-link-inverse-hover: var(--c-brass-400); /* Borders / hairlines */ --color-border: var(--c-paper-300); --color-border-strong: var(--c-ink-600); --color-border-inverse: var(--c-ink-700); /* State */ --color-success: var(--c-success); --color-error: var(--c-error); /* ------------------------------------------------------------------ * * 3. TYPOGRAPHY * * ------------------------------------------------------------------ * * Display: Fraunces — a warm, editorial "old-style" variable serif with * optical-size character, per design-system.md §3. This is the face that * carries the jazz-label / liner-notes heritage feel; a geometric sans * reads as tech-startup and flattens the whole identity. Loaded as ONE * Google-hosted variable font (opsz + wght axes, latin) with * font-display: swap. Georgia is the metrics-close fallback that holds * the layout while it swaps in. * Body: a tuned humanist SYSTEM stack — zero webfont network cost, so the * only font download on the page is the display face. Heading/body * contrast comes from the serif/sans split plus weight. * Mono: system monospace — used for "liner-notes" metadata (years, catalog * numbers, eyebrows, video timestamp chips). */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; /* Weights (Fraunces variable covers 400–700; body stack uses nearest) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Modular type scale — base 1rem (16px), ratio ~1.25 (major third). Large display steps are fluid via clamp() (mobile-first: min at small viewport, max on large). Body steps are fixed for predictable reading. */ --step--1: 0.833rem; /* 13.3px — caption/meta */ --step-0: 1rem; /* 16px — body */ --step-1: 1.125rem; /* 18px — large body */ --step-2: 1.25rem; /* 20px — lead / h5 */ --step-3: clamp(1.4rem, 1.32rem + 0.40vw, 1.75rem); /* h4 */ --step-4: clamp(1.65rem, 1.53rem + 0.60vw, 2.15rem); /* h3 */ --step-5: clamp(2rem, 1.80rem + 1.00vw, 2.85rem); /* h2 */ --step-6: clamp(2.5rem, 2.15rem + 1.75vw, 3.9rem); /* h1 / page title */ --step-7: clamp(3rem, 2.30rem + 3.50vw, 5.5rem); /* hero display */ /* Line-heights */ --leading-tight: 1.08; /* display / hero */ --leading-snug: 1.2; /* headings */ --leading-normal: 1.5; --leading-relaxed: 1.65; /* long-form body */ /* Letter-spacing / tracking */ --tracking-tight: -0.02em; /* large display type reads tighter */ --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrows / small-caps meta */ --tracking-wider: 0.16em; /* uppercase labels */ /* Optimal reading measure for long-form */ --measure: 66ch; --measure-narrow: 54ch; /* ------------------------------------------------------------------ * * 4. SPACING — 4px base grid, rem-based, fluid section rhythm * * ------------------------------------------------------------------ */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 8rem; /* 128 */ /* Vertical rhythm for full-width sections (mobile-first fluid) */ --section-y: clamp(3rem, 6vw, 6.5rem); --section-y-lg: clamp(4rem, 9vw, 9rem); /* ------------------------------------------------------------------ * * 5. LAYOUT — container widths + horizontal gutter * * Breakpoints are documented in design-system.md (media queries * * can't read custom props); listed here as reference only: * * sm 40em / md 48em / lg 64em / xl 80em * * ------------------------------------------------------------------ */ --container-narrow: 46rem; /* 736px — long-form reading column */ --container-max: 75rem; /* 1200px — default content max */ --container-wide: 85rem; /* 1360px — galleries / wide grids */ --gutter: clamp(1.25rem, 5vw, 3rem); /* page side padding, mobile→desktop */ /* ------------------------------------------------------------------ * * 6. RADIUS / SHADOW / BORDER — crafted & tight, not bubbly * * ------------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --border-hairline: 1px; --border-thick: 2px; /* Warm-tinted shadows (brown-black, never neutral gray) */ --shadow-sm: 0 1px 2px rgba(23, 19, 15, 0.10), 0 1px 1px rgba(23, 19, 15, 0.06); --shadow-md: 0 4px 12px rgba(23, 19, 15, 0.12), 0 2px 4px rgba(23, 19, 15, 0.08); --shadow-lg: 0 16px 40px rgba(23, 19, 15, 0.18), 0 6px 12px rgba(23, 19, 15, 0.10); --shadow-ring-brass: 0 0 0 1px var(--c-brass-400); /* ------------------------------------------------------------------ * * 7. MOTION / Z-INDEX / FOCUS * * ------------------------------------------------------------------ */ --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 400ms; --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --z-base: 0; --z-raised: 10; --z-sticky-header: 100; --z-mobile-menu: 200; --z-skip-link: 300; /* Focus ring — used site-wide via :focus-visible. High-contrast, offset. */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-color: var(--c-focus); } /* Respect reduced-motion at the token level so components inherit it. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; } }