/* ========================================================================== CocoSeller — Design Tokens Single source of truth for colour, type, space, containers, radii, motion. Never hardcode a value in another stylesheet that a token here covers. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. COLOUR — raw palette Named scales. Do not use these directly in components; use the semantic tokens in section 2 so themes and dark sections stay portable. ---------------------------------------------------------------------- */ /* Deep agricultural green — the brand spine */ --coco-green-950: #081A10; --coco-green-900: #0E2818; --coco-green-800: #123723; --coco-green-700: #1A4A2E; /* primary brand green */ --coco-green-600: #22633D; --coco-green-500: #2F7F50; --coco-green-400: #55A175; --coco-green-300: #86BF9F; --coco-green-200: #B8D8C4; --coco-green-100: #DCEBE2; --coco-green-50: #F0F7F3; /* Coir / substrate — earthy secondary */ --coco-coir-900: #3F2A19; --coco-coir-800: #56391F; --coco-coir-700: #6E4A2C; --coco-coir-600: #8A6340; --coco-coir-500: #A87C55; --coco-coir-400: #C29B77; --coco-coir-300: #D9BC9E; --coco-coir-200: #E9D8C4; --coco-coir-100: #F4EADC; --coco-coir-50: #FAF4EC; /* Warm white / off-white grounds */ --coco-cream-50: #FCFBF7; /* default page ground */ --coco-cream-100: #F8F5EE; --coco-cream-200: #F1ECE1; --coco-cream-300: #E6DFD1; /* Neutral ink — warm-leaning greys for text and borders */ --coco-ink-900: #141613; --coco-ink-800: #24271F; --coco-ink-700: #33372F; --coco-ink-600: #474C42; --coco-ink-500: #5C6157; --coco-ink-400: #7C8177; --coco-ink-300: #A8ACA3; --coco-ink-200: #D2D5CE; --coco-ink-100: #E7E9E4; --coco-ink-50: #F3F4F1; --coco-white: #FFFFFF; --coco-black: #000000; /* Functional — used for form/system feedback only, never decoration */ --coco-success: #22633D; --coco-warning: #A66A12; --coco-danger: #9A2C21; /* ---------------------------------------------------------------------- 2. COLOUR — semantic tokens These are what components consume. Re-declare them on a dark section (see .u-theme-dark in utilities.css) to invert an entire block. ---------------------------------------------------------------------- */ --color-bg: var(--coco-cream-50); --color-bg-subtle: var(--coco-cream-100); --color-bg-muted: var(--coco-cream-200); --color-bg-inverse: var(--coco-green-900); --color-surface: var(--coco-white); --color-surface-raised: var(--coco-white); --color-text: var(--coco-ink-700); --color-text-strong: var(--coco-ink-900); --color-text-muted: var(--coco-ink-500); --color-text-subtle: var(--coco-ink-400); --color-text-inverse: var(--coco-cream-100); --color-text-inverse-muted: var(--coco-green-200); --color-heading: var(--coco-green-900); --color-brand: var(--coco-green-700); --color-brand-strong: var(--coco-green-900); --color-brand-soft: var(--coco-green-100); --color-brand-contrast: var(--coco-cream-50); /* text on brand fill */ --color-accent: var(--coco-coir-600); --color-accent-soft: var(--coco-coir-100); --color-accent-contrast: var(--coco-cream-50); --color-link: var(--coco-green-700); --color-link-hover: var(--coco-green-900); --color-border: var(--coco-ink-200); --color-border-subtle: var(--coco-ink-100); --color-border-strong: var(--coco-ink-300); --color-border-brand: var(--coco-green-200); --color-border-inverse: rgba(255, 255, 255, 0.18); --color-focus: var(--coco-green-500); --color-focus-inverse: var(--coco-green-200); --color-selection-bg: var(--coco-green-100); --color-selection-text: var(--coco-green-900); --color-overlay: rgba(8, 26, 16, 0.55); /* * Caption scrim. The mid stop was added in Phase 2E: with photography behind * the crop-card captions rather than a dark placeholder, a two-stop gradient * left white text over pale fruit close to the 4.5:1 floor. */ --color-scrim: linear-gradient(180deg, rgba(8, 26, 16, 0) 0%, rgba(8, 26, 16, 0.35) 55%, rgba(8, 26, 16, 0.82) 100%); /* ---------------------------------------------------------------------- 3. TYPOGRAPHY Font families are fallback-only until brand webfonts are approved and self-hosted in assets/fonts/. See docs/DESIGN-SYSTEM.md § Typography. ---------------------------------------------------------------------- */ /* * Brand typefaces: Fraunces (display) and Manrope (body). * Both are named first and are self-hosted from assets/fonts/ via * fonts.css. Until those files are supplied the fallback stacks below * carry the design — no third-party request is ever made. */ --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* * Editorial annotation face. System handwriting only — no webfont is * downloaded for it, and it falls back to the body face where none of these * exist, so an annotation is always legible even if it stops looking * handwritten. Used for marginal notes, never for running text. */ --font-hand: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive, var(--font-sans); --font-display: var(--font-serif); /* editorial headings — Fraunces */ --font-body: var(--font-sans); /* running text, UI — Manrope */ --font-eyebrow: var(--font-sans); /* small caps labels */ /* Fluid type scale — min at 360px viewport, max at 1440px */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem); --text-xl: clamp(1.3125rem, 1.19rem + 0.55vw, 1.625rem); --text-2xl: clamp(1.5rem, 1.30rem + 0.89vw, 2rem); --text-3xl: clamp(1.875rem, 1.55rem + 1.42vw, 2.6875rem); --text-4xl: clamp(2.25rem, 1.77rem + 2.13vw, 3.5rem); --text-5xl: clamp(2.75rem, 2.04rem + 3.16vw, 4.5rem); --text-6xl: clamp(3.25rem, 2.20rem + 4.65vw, 5.9375rem); --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.22; --leading-heading: 1.14; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; --tracking-tighter: -0.03em; --tracking-tight: -0.018em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.06em; --tracking-widest: 0.14em; /* eyebrows / small caps */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Comfortable editorial measure */ --measure-narrow: 46ch; --measure: 68ch; --measure-wide: 82ch; /* ---------------------------------------------------------------------- 4. SPACING — 4px base scale + fluid section rhythm ---------------------------------------------------------------------- */ --space-0: 0; --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ --space-5xl: 12rem; /* 192px */ /* Vertical rhythm between full-width sections */ --space-section-sm: clamp(2.5rem, 1.80rem + 3.1vw, 4.5rem); --space-section: clamp(4rem, 2.55rem + 6.4vw, 8.5rem); --space-section-lg: clamp(5.5rem, 3.55rem + 8.7vw, 11rem); /* Gap between grid/flow items */ --gap-xs: var(--space-2xs); --gap-sm: var(--space-sm); --gap-md: var(--space-md); --gap-lg: var(--space-lg); --gap-xl: var(--space-xl); --gap-grid: clamp(1.25rem, 0.85rem + 1.8vw, 2.5rem); /* ---------------------------------------------------------------------- 5. CONTAINERS & GRID ---------------------------------------------------------------------- */ --container-xs: 40rem; /* 640px — prose */ --container-sm: 52rem; /* 832px */ --container-md: 64rem; /* 1024px */ --container-lg: 75rem; /* 1200px */ --container-xl: 82.5rem; /* 1320px — default */ --container-2xl: 95rem; /* 1520px — wide editorial / media */ --container-full: 120rem; /* 1920px */ --container: var(--container-xl); --container-gutter: clamp(1.25rem, 0.85rem + 1.9vw, 3rem); --grid-columns: 12; --grid-gap: var(--gap-grid); /* * Layout chrome. The header is sized around the supplied brand lockup, * which is a stacked one — mark over wordmark over strapline, roughly * square. A wide lockup would sit inside a 72px bar; this one has to stand * in it, so the bar is taller than a wordmark-only header would need and * the logo gets real clear space on both sides. See the media query at the * end of this file and .c-brand__logo in components.css. */ --header-height: 4.75rem; --header-height-scroll: 4.25rem; /* ---------------------------------------------------------------------- 6. RADII ---------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 0.125rem; /* 2px */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.875rem; /* 14px */ --radius-xl: 1.375rem; /* 22px */ --radius-2xl: 2rem; /* 32px */ --radius-pill: 62.5rem; --radius-circle: 50%; /* ---------------------------------------------------------------------- 7. BORDERS & SHADOWS — thin borders, restrained shadows ---------------------------------------------------------------------- */ --border-width: 1px; --border-width-strong: 2px; --border-hairline: var(--border-width) solid var(--color-border); --border-subtle: var(--border-width) solid var(--color-border-subtle); --border-brand: var(--border-width) solid var(--color-border-brand); --shadow-none: none; --shadow-xs: 0 1px 2px rgba(20, 22, 19, 0.04); --shadow-sm: 0 1px 2px rgba(20, 22, 19, 0.04), 0 2px 8px rgba(20, 22, 19, 0.04); --shadow-md: 0 2px 4px rgba(20, 22, 19, 0.03), 0 8px 24px rgba(20, 22, 19, 0.06); --shadow-lg: 0 4px 8px rgba(20, 22, 19, 0.03), 0 18px 48px rgba(20, 22, 19, 0.08); --shadow-focus: 0 0 0 3px var(--color-brand-soft); /* ---------------------------------------------------------------------- 8. MOTION Durations and easings. Every transition/animation must degrade under prefers-reduced-motion (handled globally in base.css). ---------------------------------------------------------------------- */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 260ms; --duration-slow: 420ms; --duration-slower: 680ms; --duration-reveal: 900ms; --ease-linear: linear; --ease-standard: cubic-bezier(0.32, 0.72, 0.24, 1); --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* expo-out */ --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1); --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); --transition-transform: transform var(--duration-base) var(--ease-out); --transition-opacity: opacity var(--duration-base) var(--ease-standard); --transition-base: all var(--duration-base) var(--ease-standard); /* Reveal animation defaults — consumed by assets/js/reveal.js */ --reveal-distance: 1.5rem; --reveal-duration: var(--duration-reveal); --reveal-easing: var(--ease-out); --reveal-stagger: 90ms; /* ---------------------------------------------------------------------- 9. Z-INDEX SCALE ---------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-skiplink: 999; /* -------------------------------------------------------------------- 10. ASPECT RATIOS — keeps media boxes CLS-free -------------------------------------------------------------------- */ --ratio-square: 1 / 1; --ratio-portrait: 3 / 4; --ratio-tall: 4 / 5; --ratio-landscape: 4 / 3; --ratio-wide: 16 / 9; --ratio-ultrawide: 21 / 9; --ratio-editorial: 3 / 2; } /* ========================================================================== Desktop chrome The header gains presence from 62em, where the navigation moves out of the drawer and onto the bar: 96px, which is what a 64px stacked lockup needs to sit in with clear space rather than wedged against the rules above and below it, and 104px on wide desktop where the lockup goes to 72px. Everything that measures itself against the header — the mobile drawer, the crop story's sticky offset, scroll-margin on anchors — reads the token, so this is the only place the numbers are set. ========================================================================== */ @media (min-width: 62em) { :root { --header-height: 6rem; --header-height-scroll: 5rem; } } @media (min-width: 90em) { :root { --header-height: 6.5rem; --header-height-scroll: 5.5rem; } }