/* ========================================================================== Clements & Cox — Design Tokens -------------------------------------------------------------------------- Three tiers, modelled on Stripe's HDS: TIER 1 core ramps raw colour. Never referenced by a component. TIER 2 role tokens what a thing IS (heading, body, action, surface). TIER 3 colour modes .cc-mode--light / .cc-mode--dark REDEFINE tier 2, so identical markup renders on cream or on green. RULE: components reference tier 2 only. No component may contain a hex value or a --cc-color-core-* reference. This is what makes the colour system enforceable instead of remembered. ========================================================================== */ :root { /* ---------------------------------------------------------------- TIER 1 Core ramps. Derived from the brand palette: green #2C4A3A · gold #E8AD3D · rose #CE8FA0 · cream #FAF0E6 · off-white #FFFAF6 ---------------------------------------------------------------------- */ --cc-color-core-green-25: #f4f7f5; --cc-color-core-green-50: #e6ede9; --cc-color-core-green-100: #c9dad1; --cc-color-core-green-200: #a3bfb1; --cc-color-core-green-300: #7ba48f; --cc-color-core-green-400: #578a72; --cc-color-core-green-500: #3d6b56; --cc-color-core-green-600: #2c4a3a; /* brand green */ --cc-color-core-green-700: #243d30; --cc-color-core-green-800: #1e3628; --cc-color-core-green-900: #16281e; --cc-color-core-green-950: #0f1c15; --cc-color-core-gold-25: #fefaf2; --cc-color-core-gold-50: #fdf3e0; --cc-color-core-gold-100: #fae4bb; --cc-color-core-gold-200: #f6d28d; --cc-color-core-gold-300: #f0c063; --cc-color-core-gold-400: #ecb64d; --cc-color-core-gold-500: #e8ad3d; /* brand gold */ --cc-color-core-gold-600: #d2942a; --cc-color-core-gold-700: #ad7620; --cc-color-core-gold-800: #8a5c1c; --cc-color-core-gold-900: #6b4718; --cc-color-core-rose-25: #fdf8f9; --cc-color-core-rose-50: #faeef1; --cc-color-core-rose-100: #edd4dc; /* documented rose-light */ --cc-color-core-rose-200: #e8bfca; --cc-color-core-rose-300: #dda5b5; --cc-color-core-rose-400: #ce8fa0; /* brand rose */ --cc-color-core-rose-500: #bd7488; --cc-color-core-rose-600: #a55b70; --cc-color-core-rose-700: #86485a; /* body text — AA on off-white */ --cc-color-core-rose-800: #6b3a48; --cc-color-core-rose-900: #522c37; /* Warm neutrals, tuned to the cream so nothing reads cold or grey. */ --cc-color-core-neutral-0: #fffaf6; /* off-white */ --cc-color-core-neutral-25: #faf0e6; /* cream */ --cc-color-core-neutral-50: #f2e6da; --cc-color-core-neutral-100: #e6d7c8; --cc-color-core-neutral-200: #d2c1af; --cc-color-core-neutral-300: #b3a08c; --cc-color-core-neutral-400: #8d7c6a; --cc-color-core-neutral-500: #6b5d4f; --cc-color-core-neutral-600: #52463b; --cc-color-core-neutral-700: #3d342c; --cc-color-core-neutral-800: #2a241e; --cc-color-core-neutral-900: #1a1611; --cc-color-core-neutral-990: #0d0b08; --cc-color-core-global-transparent: rgba(255, 250, 246, 0); /* ---------------------------------------------------------------- SPACE One scale. The number is roughly px x 12.5, matching Stripe's approach: 100 = 8px, 200 = 16px, 300 = 24px ... 2000 = 160px. ---------------------------------------------------------------------- */ --cc-space-core-0: 0px; --cc-space-core-25: 2px; --cc-space-core-50: 4px; --cc-space-core-75: 6px; --cc-space-core-100: 8px; --cc-space-core-150: 12px; --cc-space-core-200: 16px; --cc-space-core-250: 20px; --cc-space-core-300: 24px; --cc-space-core-400: 32px; --cc-space-core-500: 40px; --cc-space-core-550: 44px; --cc-space-core-600: 48px; --cc-space-core-700: 56px; --cc-space-core-800: 64px; --cc-space-core-900: 72px; --cc-space-core-1000: 80px; --cc-space-core-1200: 96px; --cc-space-core-1400: 112px; --cc-space-core-1600: 128px; --cc-space-core-2000: 160px; --cc-space-core-2400: 192px; --cc-space-core-radius-none: 0px; --cc-space-core-radius-xs: 2px; --cc-space-core-radius-sm: 4px; --cc-space-core-radius-md: 6px; --cc-space-core-radius-lg: 16px; --cc-space-core-radius-xl: 32px; --cc-space-core-radius-round: 99999px; /* Layout — reassigned per breakpoint at the bottom of this file. */ --cc-space-layout-columns: 4; --cc-space-layout-gap: var(--cc-space-core-200); --cc-space-layout-content-margin: var(--cc-space-core-300); --cc-space-layout-content-maxWidth: 1264px; --cc-space-layout-section-block: var(--cc-space-core-1000); --cc-space-button-height: var(--cc-space-core-550); --cc-space-button-radius: var(--cc-space-core-radius-sm); /* ----------------------------------------------------------- TYPOGRAPHY Cormorant (display serif) + Outfit (body sans). NOTE: unlike Stripe we do NOT set headings at weight 300. Söhne is a grotesk engineered for it; Cormorant at 300 goes anaemic at large sizes. Headings sit at 500/600. Tracking still tightens as size grows. ---------------------------------------------------------------------- */ --cc-font-family-display: "Cormorant", "Times New Roman", serif; --cc-font-family-body: "Outfit", "Helvetica Neue", Arial, sans-serif; --cc-font-family-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace; --cc-font-heading-xxl-size: clamp(2.75rem, 6vw, 4.5rem); --cc-font-heading-xxl-weight: 500; --cc-font-heading-xxl-lineHeight: 1.03; --cc-font-heading-xxl-letterSpacing: -0.02em; --cc-font-heading-xl-size: clamp(2.25rem, 4.2vw, 3.25rem); --cc-font-heading-xl-weight: 500; --cc-font-heading-xl-lineHeight: 1.07; --cc-font-heading-xl-letterSpacing: -0.015em; --cc-font-heading-lg-size: clamp(1.75rem, 2.6vw, 2.25rem); --cc-font-heading-lg-weight: 500; --cc-font-heading-lg-lineHeight: 1.15; --cc-font-heading-lg-letterSpacing: -0.01em; --cc-font-heading-md-size: 1.5rem; --cc-font-heading-md-weight: 600; --cc-font-heading-md-lineHeight: 1.2; --cc-font-heading-md-letterSpacing: -0.01em; --cc-font-heading-sm-size: 1.125rem; --cc-font-heading-sm-weight: 600; --cc-font-heading-sm-lineHeight: 1.25; --cc-font-heading-sm-letterSpacing: 0em; --cc-font-text-lg-size: 1.125rem; --cc-font-text-lg-lineHeight: 1.6; --cc-font-text-md-size: 1rem; --cc-font-text-md-lineHeight: 1.65; --cc-font-text-sm-size: 0.875rem; --cc-font-text-sm-lineHeight: 1.5; --cc-font-text-xs-size: 0.75rem; --cc-font-text-xs-lineHeight: 1.4; --cc-font-label-size: 0.75rem; --cc-font-label-weight: 500; --cc-font-label-letterSpacing: 0.14em; /* ---------------------------------------------------------------- MOTION Long, decelerating, heavily eased. Stripe's card curve is the house default; the short curve is for nav and hover states only. ---------------------------------------------------------------------- */ --cc-motion-duration-fast: 180ms; --cc-motion-duration-nav: 240ms; --cc-motion-duration-md: 500ms; --cc-motion-duration-slow: 800ms; --cc-motion-duration-reveal: 1200ms; --cc-motion-ease-out: cubic-bezier(0.165, 0.84, 0.44, 1); --cc-motion-ease-soft: cubic-bezier(0.25, 1, 0.5, 1); --cc-motion-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* --------------------------------------------------------------- SHADOW Two layers, top + bottom, tinted green rather than neutral black. This is the whole reason Stripe's shadows read as expensive. ---------------------------------------------------------------------- */ --cc-shadow-xs: 0 1px 4px rgba(30, 54, 40, 0.04), 0 2px 10px rgba(22, 40, 30, 0.05); --cc-shadow-sm: 0 2px 8px rgba(30, 54, 40, 0.05), 0 5px 14px rgba(22, 40, 30, 0.06); --cc-shadow-md: 0 4px 8px rgba(30, 54, 40, 0.05), 0 6px 22px rgba(22, 40, 30, 0.08); --cc-shadow-lg: 0 8px 20px rgba(30, 54, 40, 0.06), 0 16px 40px rgba(22, 40, 30, 0.10); } /* ============================================================== TIER 2 + 3 Role tokens, defined inside colour modes. .cc-mode--light cream / off-white surfaces, green headings, rose body .cc-mode--dark green surfaces, cream headings, gold accents A component written against these renders correctly in either, untouched. ========================================================================== */ .cc-mode--light { color-scheme: light; --cc-color-surface-bg: var(--cc-color-core-neutral-0); --cc-color-surface-bg-subdued: var(--cc-color-core-neutral-25); --cc-color-surface-bg-raised: var(--cc-color-core-neutral-0); --cc-color-surface-border-quiet: var(--cc-color-core-neutral-100); --cc-color-surface-border-solid: var(--cc-color-core-neutral-200); --cc-color-heading-solid: var(--cc-color-core-green-600); --cc-color-heading-subdued: var(--cc-color-core-green-500); --cc-color-text-body: var(--cc-color-core-rose-700); --cc-color-text-subdued: var(--cc-color-core-neutral-500); --cc-color-text-label: var(--cc-color-core-rose-600); /* Navigation is structural, not body copy — it reads green, not rose. */ --cc-color-text-nav: var(--cc-color-core-green-600); --cc-color-text-navHover: var(--cc-color-core-green-800); --cc-color-accent-solid: var(--cc-color-core-gold-500); --cc-color-accent-quiet: var(--cc-color-core-gold-100); --cc-color-accent-text: var(--cc-color-core-gold-800); --cc-color-action-bg-solid: var(--cc-color-core-green-600); --cc-color-action-bg-solidHover: var(--cc-color-core-green-700); --cc-color-action-text-onSolid: var(--cc-color-core-neutral-0); --cc-color-action-bg-quiet: var(--cc-color-core-global-transparent); --cc-color-action-border-quiet: var(--cc-color-core-neutral-200); --cc-color-action-text-quiet: var(--cc-color-core-green-600); --cc-color-action-focus-outer: var(--cc-color-core-gold-500); --cc-color-graphic-stroke: var(--cc-color-core-neutral-200); --cc-color-graphic-stroke-quiet: var(--cc-color-core-neutral-100); --cc-color-graphic-fill: var(--cc-color-core-neutral-0); --cc-color-graphic-fill-subdued: var(--cc-color-core-neutral-25); --cc-color-graphic-ink: var(--cc-color-core-green-600); --cc-color-graphic-ink-quiet: var(--cc-color-core-neutral-300); --cc-color-graphic-accent: var(--cc-color-core-gold-500); --cc-color-graphic-shadow: var(--cc-shadow-md); --cc-blend-hairline: multiply; } .cc-mode--dark { color-scheme: dark; --cc-color-surface-bg: var(--cc-color-core-green-600); --cc-color-surface-bg-subdued: var(--cc-color-core-green-700); --cc-color-surface-bg-raised: var(--cc-color-core-green-500); --cc-color-surface-border-quiet: rgba(250, 240, 230, 0.14); --cc-color-surface-border-solid: rgba(250, 240, 230, 0.28); --cc-color-heading-solid: var(--cc-color-core-neutral-25); --cc-color-heading-subdued: var(--cc-color-core-green-100); --cc-color-text-body: var(--cc-color-core-green-100); --cc-color-text-subdued: var(--cc-color-core-green-200); --cc-color-text-label: var(--cc-color-core-rose-300); --cc-color-text-nav: var(--cc-color-core-neutral-25); --cc-color-text-navHover: var(--cc-color-core-neutral-0); --cc-color-accent-solid: var(--cc-color-core-gold-500); --cc-color-accent-quiet: rgba(232, 173, 61, 0.16); --cc-color-accent-text: var(--cc-color-core-gold-300); --cc-color-action-bg-solid: var(--cc-color-core-gold-500); --cc-color-action-bg-solidHover: var(--cc-color-core-gold-400); --cc-color-action-text-onSolid: var(--cc-color-core-green-800); --cc-color-action-bg-quiet: var(--cc-color-core-global-transparent); --cc-color-action-border-quiet: rgba(250, 240, 230, 0.3); --cc-color-action-text-quiet: var(--cc-color-core-neutral-25); --cc-color-action-focus-outer: var(--cc-color-core-gold-300); --cc-color-graphic-stroke: rgba(250, 240, 230, 0.28); --cc-color-graphic-stroke-quiet: rgba(250, 240, 230, 0.14); --cc-color-graphic-fill: var(--cc-color-core-green-700); --cc-color-graphic-fill-subdued: var(--cc-color-core-green-800); --cc-color-graphic-ink: var(--cc-color-core-neutral-25); --cc-color-graphic-ink-quiet: var(--cc-color-core-green-300); --cc-color-graphic-accent: var(--cc-color-core-gold-500); --cc-color-graphic-shadow: 0 8px 24px rgba(15, 28, 21, 0.4); --cc-blend-hairline: exclusion; } /* ----------------------------------------------------------- BREAKPOINTS Only layout tokens change. No component reads a media query for colour. -------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --cc-space-layout-columns: 8; --cc-space-layout-gap: var(--cc-space-core-300); --cc-space-layout-content-margin: var(--cc-space-core-500); --cc-space-layout-section-block: var(--cc-space-core-1400); } } @media (min-width: 1080px) { :root { --cc-space-layout-columns: 12; --cc-space-layout-content-margin: var(--cc-space-core-600); --cc-space-layout-section-block: var(--cc-space-core-2000); } }