/* Shared design foundation — Full Color + Pup Therapist ====================================================== Contract file for the 5 homepage-direction builders. Full rationale, contrast ratios, and component anatomy live in docs/design/design-system.md — this file is the source of truth for actual values. HOW TO USE ---------- 1. Import/inline this file, then apply exactly one skin class to or : "skin-fullcolor" or "skin-pup". 2. Optionally set data-theme="light" / data-theme="dark" on the same element for a manual toggle. Without it, theme follows the OS via prefers-color-scheme automatically. 3. Self-host and @font-face the three webfonts named in §2 below in your OWN stylesheet — this file deliberately ships no CDN calls or @font-face rules (CSP-safety), only system-stack fallbacks. 4. Do not invent new hex values or ad-hoc custom properties for roles already defined here (surface / ink / muted / line / accent / accent-secondary / semantic). If you need a shade that isn't here, that's a foundation gap — flag it upstream instead of one-off-ing it. CASCADE STRUCTURE ------------------ :root -> shared tokens + base LIGHT neutrals @media (prefers-color-scheme:dark) -> base DARK neutrals (OS-driven) [data-theme="dark"] -> base DARK neutrals (manual, wins on specificity) [data-theme="light"] -> base LIGHT neutrals (manual, wins on specificity) .skin-fullcolor / .skin-pup -> skin LIGHT overrides (accent, fonts, radius, tempo) @media (dark) .skin-* -> skin DARK overrides (OS-driven) [data-theme="dark"] .skin-* -> skin DARK overrides (manual) [data-theme="light"] .skin-* -> skin LIGHT overrides (manual, forces light under OS dark) Attribute selectors (specificity 0,0,2,0) always beat the plain :root rules inside the prefers-color-scheme media block (specificity 0,0,1,0), regardless of source order — that's what lets a manual toggle win both directions even when it disagrees with the OS setting. */ /* ============================================================ 1. RESET + BASE ELEMENT RULES ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; color-scheme: light dark; } body, h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } img, picture, svg, video { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { min-height: 100vh; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } h4, h5 { font-family: var(--font-display); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } p, li { text-wrap: pretty; max-width: var(--measure); } a { color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: from-font; transition: color var(--duration-fast) var(--ease-out-quart), text-underline-offset var(--duration-fast) var(--ease-out-quart); } a:hover { text-underline-offset: 0.25em; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } ::selection { background: var(--accent); color: var(--surface); } /* ============================================================ 2. SHARED TOKENS + BASE LIGHT NEUTRALS ============================================================ */ :root { /* --- Fonts --------------------------------------------------- System-stack fallbacks only. See docs/design/design-system.md §2 for the exact webfont files each direction must self-host: - "Gambetta" (weights 400, 500) -> Full Color display - "ClashDisplay"(weights 600, 700) -> Pup display - "Switzer" (variable, 400-600) -> shared body, both skins All three: Fontshare, free for commercial use, self-host the woff2 files — do not link fonts.fontshare.com or any other CDN here. */ --font-display: ui-serif, Georgia, "Times New Roman", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Type scale (see design-system.md §2 for px reference) --- */ --text-2xs: 0.75rem; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-md: 1.1875rem; --text-lg: 1.4375rem; --text-xl: 1.75rem; --text-2xl: 2.1875rem; --text-3xl: clamp(2.75rem, 2.35rem + 2vw, 4.25rem); --text-4xl: clamp(3rem, 2.1rem + 4.5vw, 5.75rem); --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.02em; --measure: 68ch; --container: 1280px; --container-narrow: 800px; /* --- Spacing --------------------------------------------------- */ --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-section: clamp(4rem, 3rem + 5vw, 8rem); /* --- Radius scale + shared default component-role mapping ------ Skins override the component-role tokens below; the raw scale itself never changes per skin. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px; --radius-button: var(--radius-sm); --radius-card: var(--radius-md); --radius-field: var(--radius-sm); --radius-chip: var(--radius-full); /* --- Motion ----------------------------------------------------- Base mechanics are shared; .skin-fullcolor / .skin-pup nudge the duration tokens (not the easings) to carry brand tempo. */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --duration-instant: 100ms; --duration-fast: 180ms; --duration-base: 280ms; --duration-slow: 480ms; --duration-signature: 900ms; /* --- Z-index scale ------------------------------------------- */ --z-dropdown: 10; --z-sticky: 20; --z-modal-backdrop: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; /* --- Base neutral + semantic roles (LIGHT, default) ----------- Used only if no .skin-* class is applied — production directions always carry a skin class, which overrides surface/ink/muted/line/ accent below. Semantic colors (success/warning/danger/info) are shared across both skins and NOT re-skinned. */ --surface: #fafafa; --surface-raised: #f1f1f3; --ink: #18181b; --ink-rgb: 24 24 27; --muted: #6b6b70; --line: #e4e4e7; --accent: #4f5d8c; --accent-rgb: 79 93 140; --accent-secondary: #4f5d8c; --success: #1f7a45; --warning: #8a5606; --danger: #c43d3d; --info: #2e6fe0; /* Elevation — tinted with --ink-rgb / --accent-rgb so shadows stay in-theme automatically as those companions change per skin/theme. */ --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / 0.06); --shadow-md: 0 4px 16px rgb(var(--ink-rgb) / 0.08); --shadow-lg: 0 16px 48px rgb(var(--ink-rgb) / 0.14); --shadow-glow: 0 0 32px rgb(var(--accent-rgb) / 0.35); } /* ============================================================ 3. BASE NEUTRALS — DARK (OS-driven, then manual override) ============================================================ */ @media (prefers-color-scheme: dark) { :root { --surface: #17171a; --surface-raised: #1f1f23; --ink: #f4f4f5; --ink-rgb: 244 244 245; --muted: #a6a6ac; --line: #303034; --accent: #93a3d6; --accent-rgb: 147 163 214; --accent-secondary: #93a3d6; --success: #5fcb8e; --warning: #f0b429; --danger: #f0716c; --info: #7fa8ff; } } :root[data-theme="dark"] { --surface: #17171a; --surface-raised: #1f1f23; --ink: #f4f4f5; --ink-rgb: 244 244 245; --muted: #a6a6ac; --line: #303034; --accent: #93a3d6; --accent-rgb: 147 163 214; --accent-secondary: #93a3d6; --success: #5fcb8e; --warning: #f0b429; --danger: #f0716c; --info: #7fa8ff; } :root[data-theme="light"] { --surface: #fafafa; --surface-raised: #f1f1f3; --ink: #18181b; --ink-rgb: 24 24 27; --muted: #6b6b70; --line: #e4e4e7; --accent: #4f5d8c; --accent-rgb: 79 93 140; --accent-secondary: #4f5d8c; --success: #1f7a45; --warning: #8a5606; --danger: #c43d3d; --info: #2e6fe0; } /* ============================================================ 4. SKIN — FULL COLOR (flagship: luminous, restrained, Committed accent) ============================================================ */ .skin-fullcolor { --font-display: "Gambetta", ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif; /* Tempo: slower, more contemplative than the shared defaults. */ --duration-base: 320ms; --duration-slow: 560ms; /* Component-role radius: rectangular-soft, restrained — never a pill. */ --radius-button: var(--radius-sm); --radius-card: var(--radius-md); --radius-field: var(--radius-xs); /* Light surface: cool-luminous violet-white. Never cream/sand. */ --surface: #fbfafd; --surface-raised: #f3f1f8; --ink: #1b1720; --ink-rgb: 27 23 32; --muted: #6b6478; /* 5.43:1 on --surface, 5.04:1 on --surface-raised */ --line: #e3deea; --accent: #5b4ee0; /* 5.59:1 text, 5.82:1 white-on-button */ --accent-rgb: 91 78 224; --accent-secondary: #c1425f; /* 4.79:1 text, 4.99:1 white-on-button */ /* Signature device: desaturation -> full color. --filter-muted is the "before" state, --filter-vivid the "after"; transition over --duration-signature on --ease-out-expo. --gradient-signature reuses --muted as its own "before" stop so it stays tied to the palette. */ --filter-muted: grayscale(0.9) contrast(0.95) brightness(1.02); --filter-vivid: grayscale(0) saturate(1.05); --gradient-signature: linear-gradient( 135deg, var(--muted) 0%, var(--accent) 55%, var(--accent-secondary) 100% ); } @media (prefers-color-scheme: dark) { .skin-fullcolor { --surface: #15121c; --surface-raised: #1d1927; --ink: #f3f1f8; --ink-rgb: 243 241 248; --muted: #a79fb5; /* 7.28:1 */ --line: #322c3f; --accent: #8f7ff5; /* 5.75:1 both directions */ --accent-rgb: 143 127 245; --accent-secondary: #ea8ca6; /* 7.75:1 both directions */ } } [data-theme="dark"] .skin-fullcolor, .skin-fullcolor[data-theme="dark"] { --surface: #15121c; --surface-raised: #1d1927; --ink: #f3f1f8; --ink-rgb: 243 241 248; --muted: #a79fb5; --line: #322c3f; --accent: #8f7ff5; --accent-rgb: 143 127 245; --accent-secondary: #ea8ca6; } [data-theme="light"] .skin-fullcolor, .skin-fullcolor[data-theme="light"] { --surface: #fbfafd; --surface-raised: #f3f1f8; --ink: #1b1720; --ink-rgb: 27 23 32; --muted: #6b6478; --line: #e3deea; --accent: #5b4ee0; --accent-rgb: 91 78 224; --accent-secondary: #c1425f; } /* ============================================================ 5. SKIN — PUP THERAPIST (disco sibling: warm, Full-palette accent) ============================================================ */ .skin-pup { --font-display: "ClashDisplay", ui-sans-serif, "Futura PT", Avenir, "Century Gothic", sans-serif; /* Tempo: faster, snappier than the shared defaults — energy comes from speed + stagger, never from a bounce/elastic easing. */ --duration-fast: 140ms; --duration-base: 220ms; /* Component-role radius: pill button is the single clearest "different energy" tell in the system. */ --radius-button: var(--radius-full); --radius-card: var(--radius-lg); --radius-field: var(--radius-md); /* Light surface: warm pink-white. Hue sits ~330-350°, well outside the cream/sand AI-default band (40-100° at high L / low C). */ --surface: #fdf6fa; --surface-raised: #fbeaf3; --ink: #241220; --ink-rgb: 36 18 32; --muted: #7a5d74; /* 5.41:1 on --surface */ --line: #f1d9e7; --accent: #c81f73; /* AA-safe interactive pink: 5.06:1 text, 5.39:1 white-on-button */ --accent-rgb: 200 31 115; --accent-secondary: #7c4de0; /* violet, shared-DNA nod to Full Color: 4.94:1 / 5.26:1 */ /* Decorative-only accents — never use these for small body or button-label text; see design-system.md §3 for the full rule. */ --accent-vivid: #e8368f; /* 3.69:1 / 3.92:1 — large text (>=18px) or UI/background only */ --accent-tertiary: #e8a93a; /* gold, decorative bg (8.60:1 with --ink text on top) */ --accent-tertiary-text: #8f5e10; /* gold if it must render as small text: 5.23:1 */ } @media (prefers-color-scheme: dark) { .skin-pup { --surface: #1c1120; --surface-raised: #26182c; --ink: #fbf0f6; --ink-rgb: 251 240 246; --muted: #c9a9c0; /* 8.62:1 */ --line: #3b2a3f; --accent: #ff6fb3; /* 7.11:1 both directions — vivid enough that no separate dark accent-vivid is needed */ --accent-rgb: 255 111 179; --accent-secondary: #a98cf0; /* 6.69:1 */ --accent-tertiary: #f0b429; /* 9.79:1 — reads fine as text on dark */ --accent-tertiary-text: #f0b429; } } [data-theme="dark"] .skin-pup, .skin-pup[data-theme="dark"] { --surface: #1c1120; --surface-raised: #26182c; --ink: #fbf0f6; --ink-rgb: 251 240 246; --muted: #c9a9c0; --line: #3b2a3f; --accent: #ff6fb3; --accent-rgb: 255 111 179; --accent-secondary: #a98cf0; --accent-tertiary: #f0b429; --accent-tertiary-text: #f0b429; } [data-theme="light"] .skin-pup, .skin-pup[data-theme="light"] { --surface: #fdf6fa; --surface-raised: #fbeaf3; --ink: #241220; --ink-rgb: 36 18 32; --muted: #7a5d74; --line: #f1d9e7; --accent: #c81f73; --accent-rgb: 200 31 115; --accent-secondary: #7c4de0; --accent-vivid: #e8368f; --accent-tertiary: #e8a93a; --accent-tertiary-text: #8f5e10; }