/* Warnes Studio design tokens. See design-system.md for usage and composition guidance. */ :root { /* --- BRAND COLOR (the only brand colors) --------------------------------- */ --color-ink: #2b2118; /* primary text, dark surfaces, default logo */ --color-cream: #f7f3e3; /* primary light background */ --color-lava: #6f1a07; /* lead action / graphic accent */ --color-copper: #a8763e; /* editorial / supporting accent, rules, focus */ --color-white: #ffffff; /* reverse logo and high-contrast type */ /* --- FUNCTIONAL NEUTRALS (NOT brand colors; ink at opacity) -------------- Structure and hierarchy only. Never introduce a separate grey hue. */ --ink-90: rgba(43, 33, 24, 0.90); /* near-full ink */ --ink-75: rgba(43, 33, 24, 0.75); /* muted / secondary text on cream */ --ink-45: rgba(43, 33, 24, 0.45); /* decorative / non-text muted structure */ --ink-12: rgba(43, 33, 24, 0.12); /* hairline / border on cream */ --ink-06: rgba(43, 33, 24, 0.06); /* subtle fill / hover wash */ /* --- SEMANTIC ALIASES ---------------------------------------------------- Components reference these, not raw names, so theming is one edit. */ --bg: var(--color-cream); --surface: var(--color-cream); --surface-tint: color-mix(in srgb, var(--color-cream) 88%, var(--color-white)); --bg-invert: var(--color-ink); --text: var(--color-ink); --text-muted: var(--ink-75); --text-invert: var(--color-cream); --accent: var(--color-lava); /* lead */ --accent-2: var(--color-copper); /* secondary */ --mark-color: var(--color-lava); /* editorial marks on light grounds */ --link: var(--color-lava); --link-hover: var(--color-ink); --border: var(--ink-12); --border-strong: rgba(43, 33, 24, 0.50); /* 3:1+ control boundary on cream */ --focus-color: var(--color-copper); --focus-width: 2px; --focus-offset: 3px; /* --- TYPE FAMILIES (Adobe Fonts kit dgr6otg) ----------------------------- Web kit names are lowercase and differ from desktop names. Fallbacks keep layout sane before the kit is added. */ --font-display: "trade-gothic-next-condensed", "Oswald", "Arial Narrow", sans-serif; --font-display-wide: "trade-gothic-next", "Helvetica Neue", Arial, sans-serif; --font-display-serif: "adelle-condensed", "Roboto Slab", Georgia, serif; /* condensed serif display */ --font-display-thin: "adelle-ultrathin", "adelle-condensed", Georgia, serif; /* 100 hairline display only */ --font-body: "adelle", "Rockwell", "Roboto Slab", Georgia, serif; /* Available weights in Adobe Fonts kit dgr6otg. */ --weight-display: 700; /* Trade Gothic Next Condensed - Bold lead */ --weight-display-reg: 400; /* Trade Gothic Next Condensed - Regular */ --weight-display-regular: var(--weight-display-reg); /* compatibility alias */ --weight-body-light: 300; /* Adelle Light - lighter running body */ --weight-body: 400; /* Adelle Regular - running body */ --weight-body-bold: 700; /* Adelle Bold */ /* adelle-condensed display run: 200 / 300 / 400 / 600 / 700 / 800 / 900 */ --weight-serif-thin: 200; /* Adelle Condensed - lightest display lead */ --weight-serif-light: 300; /* Adelle Condensed - light display */ --weight-serif-display: 400; /* Adelle Condensed - regular display */ --weight-serif-bold: 700; /* Adelle Condensed - bold display */ --weight-hairline: 100; /* Adelle Ultrathin - hero hairline only */ /* --- SCALE GENERATORS ---------------------------------------------------- Reading uses 1.25; display uses 1.618. Both meet at the 25px hinge. */ --scale-ratio: 1.25; /* reading: base x ratio^n */ --display-ratio: 1.618; /* display: the golden section */ --display-base: 1.5625rem; /* 25px, the hinge, = --text-xl */ --baseline: 8px; /* typographic/layout baseline grid */ --baseline-grid: var(--baseline); /* --- TYPE SCALE (generated; px shown is at a 16px root) ------------------- */ --text-xs: 0.75rem; /* 12 label floor, exempt from the scale */ --text-sm: 0.875rem; /* 14 label floor, exempt from the scale */ --text-base: 1rem; /* 16 body reading ^0 */ --text-lg: 1.25rem; /* 20 lead reading ^1 */ --text-xl: 1.5625rem; /* 25 subhead reading ^2, the hinge */ --text-2xl: 1.9375rem; /* 31 section head reading ^3 */ --text-3xl: 2.5rem; /* 40 display golden ^1 */ --text-4xl: 4.0625rem; /* 65 display golden ^2 */ --text-5xl: 6.625rem; /* 106 poster display golden ^3 */ --leading-tight: 1.05; /* condensed display headlines */ --leading-snug: 1.25; /* subheads */ --leading-body: 1.6; /* Adelle reads best with open leading */ --tracking-display: 0.01em; /* Trade Gothic Condensed, slight open */ --tracking-caps: 0.08em; /* small-caps labels. Eyebrows run .18em; see identity-sheet.html .eyebrow */ /* --- SPACING (4px base) --------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px - section rhythm */ /* --- LAYOUT --------------------------------------------------------------- */ --measure: 68ch; /* max reading width for body copy */ --container: 1200px; /* max content width */ --gutter: var(--space-6); /* --- RADIUS (editorial = near-sharp) ------------------------------------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* --- ELEVATION (restrained; premium print rarely floats) ----------------- */ --shadow-sm: 0 1px 2px rgba(43, 33, 24, 0.08); --shadow-md: 0 6px 24px rgba(43, 33, 24, 0.10); /* --- MOTION --------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-fast: 120ms; --dur: 220ms; --duration-fast: var(--dur-fast); --duration: var(--dur); /* --- SCREEN / WEB --------------------------------------------------------- */ --canvas-single: 640px; /* under this: 4 col (12 collapsed 3:1) */ --canvas-narrow: 1024px; /* 640-1023: 6 col (12 collapsed 2:1) */ --canvas-page: 1440px; /* 1024-1439: 12 col */ --canvas-wide-max: 1680px; /* 1440+: 12 col live-area cap; alignment is layout-owned */ --margin-screen: clamp(24px, 6.25vw, 120px); --gutter-screen: clamp(8px, 2.08vw, 40px); --col-max: calc((var(--canvas-wide-max) - 11 * var(--gutter-screen)) / 12); /* Screen type floors. Print's small sizes do not transfer to a screen. */ --text-screen-body: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); /* 16 floor, 17-19 on Page/Wide */ --text-screen-lead: var(--text-lg); /* 20px lead floor */ --text-screen-caption: 0.8125rem; /* 13px; 12px muted is not readable */ --text-screen-caps: 0.75rem; /* 12px; tracking buys apparent size */ --leading-body-single: 1.65; /* Single runs 40-50ch, so open leading by ~.05 */ --target-min: 48px; /* minimum interactive target size */ --target-gap: var(--space-2); /* minimum between adjacent targets */ --tap-min: var(--target-min); /* compatibility aliases */ --tap-gap: var(--target-gap); color-scheme: light; } /* --- DARK / INK THEME (opt-in) --------------------------------------------- Add data-theme="ink" to a section or to flip surfaces. Neutrals here are cream at opacity - still no separate grey hue. */ [data-theme="ink"] { --bg: var(--color-ink); --surface: rgba(247, 243, 227, 0.06); /* cream wash on ink */ --bg-invert: var(--color-cream); --text: var(--color-cream); --text-muted: rgba(247, 243, 227, 0.70); --text-invert: var(--color-ink); --accent: var(--color-copper); --accent-2: var(--color-cream); --mark-color: var(--color-cream); --link: var(--color-cream); --link-hover: var(--color-white); --border: rgba(247, 243, 227, 0.16); --border-strong: rgba(247, 243, 227, 0.40); --focus-color: var(--color-copper); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } }