/* ============================================================ Brand tokens. The BRAND FLOOR below is the exact set from CLAUDE.md and is the only place raw brand hex values appear. Everything under it is mixed from those values with color-mix, so the palette gains depth without inventing a brand colour. If you ever need a new shade, derive it here — never hardcode a hex in a component file. ============================================================ */ :root { /* ---------- BRAND FLOOR — exact, do not change ---------- */ --primary: #00744C; /* the one dominant hue of the whole site */ --primary-ink: #FFFFFF; --accent: #D1382A; /* the ONE action per screen */ --accent-ink: #FFFFFF; --accent-strong: #9A241A; /* real scarcity badges only, never a large field */ --ink: #17241D; --ink-muted: #4E5B54; --surface-100: #FFFFFF; --surface-200: #EFF6F1; --border: #D8E5DC; /* ---------- Green ramp ---------- Darker half mixes primary into ink; lighter half mixes primary into white. This is what gives the site depth while staying one hue. */ --g-950: color-mix(in srgb, var(--primary) 22%, var(--ink)); --g-900: color-mix(in srgb, var(--primary) 38%, var(--ink)); --g-800: color-mix(in srgb, var(--primary) 55%, var(--ink)); --g-700: color-mix(in srgb, var(--primary) 74%, var(--ink)); --g-600: color-mix(in srgb, var(--primary) 89%, var(--ink)); --g-500: var(--primary); --g-400: color-mix(in srgb, var(--primary) 78%, var(--surface-100)); --g-300: color-mix(in srgb, var(--primary) 56%, var(--surface-100)); --g-200: color-mix(in srgb, var(--primary) 34%, var(--surface-100)); --g-150: color-mix(in srgb, var(--primary) 18%, var(--surface-100)); --g-100: color-mix(in srgb, var(--primary) 10%, var(--surface-100)); --g-50: var(--surface-200); /* ---------- Red ramp — the action colour, kept scarce ---------- */ --r-700: var(--accent-strong); --r-600: color-mix(in srgb, var(--accent) 80%, var(--ink)); --r-500: var(--accent); --r-400: color-mix(in srgb, var(--accent) 80%, var(--surface-100)); --r-100: color-mix(in srgb, var(--accent) 12%, var(--surface-100)); /* ---------- Neutral ramp, tinted with the brand ink so greys never go cold ---------- */ --n-900: var(--ink); --n-700: var(--ink-muted); --n-500: color-mix(in srgb, var(--ink) 52%, var(--surface-100)); --n-300: color-mix(in srgb, var(--ink) 28%, var(--surface-100)); --n-200: var(--border); --n-100: color-mix(in srgb, var(--ink) 7%, var(--surface-100)); /* ---------- Interaction states, derived as alpha over the brand hue ---------- Borders stay on the brand --border token, which CLAUDE.md fixes. But hover and pressed states are not brand-specified, so they are the green itself at low alpha rather than a grey. They then harmonise by construction on any background, and the page reads as one material instead of green elements sitting on neutral chrome. */ --tint-08: color-mix(in srgb, var(--primary) 8%, transparent); --tint-12: color-mix(in srgb, var(--primary) 12%, transparent); --tint-18: color-mix(in srgb, var(--primary) 18%, transparent); /* ---------- Semantic surfaces ---------- */ --field-deep: var(--g-800); /* hero, testimonial, footer */ --field-deeper: var(--g-950); --field-mid: var(--g-700); --rule-on-deep: color-mix(in srgb, var(--primary-ink) 26%, transparent); --ink-on-deep: color-mix(in srgb, var(--primary-ink) 82%, transparent); --ink-on-deep-soft: color-mix(in srgb, var(--primary-ink) 60%, transparent); --primary-hover: var(--g-600); --accent-hover: var(--r-600); /* ---------- Depth ---------- Shadows are tinted with the brand green, never neutral grey, so elevation reads as part of the palette instead of a drop shadow sitting on top. */ --shadow-raised: 0 1px 2px rgb(23 36 29 / .05), 0 8px 20px -10px rgb(0 116 76 / .18); --shadow-float: 0 2px 4px rgb(23 36 29 / .05), 0 14px 30px -10px rgb(0 116 76 / .20), 0 36px 64px -28px rgb(0 116 76 / .16); --shadow-lift: 0 4px 8px rgb(23 36 29 / .06), 0 24px 48px -16px rgb(0 116 76 / .28), 0 60px 100px -40px rgb(0 116 76 / .22); /* Grain. One tiny inline SVG, no network request. Laid over the deep fields at low opacity so large areas of flat green get some tooth. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); /* ---------- Type ---------- Zodiak (serif) carries display headlines, Switzer carries body and every control. DM Mono is reserved for two small label roles. */ --font-head: 'Zodiak', Georgia, 'Times New Roman', serif; --font-body: 'Switzer', system-ui, sans-serif; --font-mono: 'DM Mono', ui-monospace, monospace; --track-display: -0.015em; --track-head: -0.01em; /* ---------- Motion ---------- One orchestrated moment on load, then motion only in response to the visitor. Every duration here is honoured by prefers-reduced-motion. */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.16, 1, .3, 1); --t-fast: .18s; --t-mid: .34s; --t-slow: .7s; /* spacing scale: 4, 8, 16, 24, 32, 48, 64 */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; /* radius: 8 small controls, 14 cards, 24 hero panels / big CTAs */ --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* layout (mobile first) */ --gutter: var(--s-4); --section-y: var(--s-7); --touch: 44px; --measure: 62ch; } @media (min-width: 768px) { :root { --gutter: var(--s-5); --section-y: var(--s-8); } } @media (min-width: 1024px) { :root { --gutter: var(--s-7); --section-y: 112px; } }