/* ========================================================================== AGRIYANA — Design tokens Art direction: TERRAIN. The business is a closed loop with a direction to it: produce travels up to homes, machinery and inputs travel back down to farms. So the site is built as ground — bone paper at the surface, loam in the middle, forest-black at depth. Sections read as strata. Numbers are the ornament, because agriculture is full of them: 6.5 H.P., 25 litre, 4 degrees, 1 to 15 cows. Three registers of type and nothing else: display Bricolage Grotesque headlines, prices body Manrope reading copy mono JetBrains Mono every number, label and specification ========================================================================== */ /* ------------------------------------------------------------------ fonts */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../font/bricolage-latin-ext-0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../font/bricolage-latin-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../font/manrope-latin-ext-0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../font/manrope-latin-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../font/jetbrainsmono-latin-ext-0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../font/jetbrainsmono-latin-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== 1. THE STRATA — raw palette, ordered surface to depth ========================================================================== */ :root { /* --- surface: bone paper, the layer you shop on -------------------- These were cream (#FCFAF4 → #EFE8D8), which put a yellow cast across every light page: the surface, the alternating section wash and the loam mid-tones were all pulling amber, so the one thing that is SUPPOSED to be the warm signal — harvest — had nothing to be warm against. Neutralised to a faintly green-grey paper. The strata idea is unchanged (surface → middle → depth); only the hue is. */ --bone: #FAFBFA; --bone-2: #F1F5F2; --bone-3: #E7EDE9; /* --- loam: the cool middle, used for lift and separation ----------- */ --loam: #DBE4DE; --loam-2: #C4D1C8; --loam-line: #E1E9E4; --loam-edge: #C1CFC6; /* --- forest: the living layer, primary action ---------------------- */ --forest-900: #06150D; --forest-800: #0A2114; --forest-700: #0E3320; --forest-600: #10502F; --forest-500: #166E42; --forest-400: #2E8E58; --forest-300: #4FB27B; --forest-100: #DDEEE3; /* --- harvest: amber. prices, seals, the one warm signal ------------ */ --harvest-700: #92460A; --harvest-600: #B85C10; --harvest-500: #DC7A16; --harvest-400: #EE9B3C; --harvest-100: #FBEBD6; /* --- iron: machinery. clay-red, used only on the farm side --------- */ --iron-600: #96351D; --iron-500: #B5462A; --iron-400: #CE6748; --iron-100: #F8E5DE; /* --- sprout: the logo leaf, accents on dark only ------------------- */ --sprout-500: #8CC63E; --sprout-400: #A8DC5E; /* --- chill: cold chain, and nothing else --------------------------- */ --chill-600: #14707E; --chill-400: #4FBECE; --white: #FFFFFF; } /* ------------------------------------------------------------------ aliases The component layer was written against an earlier `--raw-*` naming. These map it onto the strata scale above so nothing has to be renamed in five files. Two of these (--raw-husk, --raw-harvest-lo) were referenced by base.css but never defined, so `.btn-accent:hover` and `.badge-accent` were silently falling back to an inherited colour. Defining them here fixes both. Prefer the semantic tokens in new work; treat these as legacy. */ :root { --raw-ink: #101A12; --raw-ink-2: var(--forest-800); --raw-night: var(--forest-900); --raw-night-2: var(--forest-800); --raw-forest: var(--forest-500); --raw-forest-dk: var(--forest-600); --raw-forest-lt: var(--forest-100); --raw-sprout: var(--sprout-500); --raw-sprout-hi: var(--sprout-400); --raw-amber: var(--harvest-500); --raw-amber-dk: var(--harvest-700); --raw-amber-lt: var(--harvest-100); --raw-harvest-lo: var(--harvest-700); /* amber dark enough to sit on --accent-soft */ --raw-husk: #1B0E02; /* ink for text on a filled amber button */ --raw-chill: var(--chill-600); --raw-clay: var(--iron-500); --raw-cream: var(--bone); --raw-cream-2: var(--bone-2); --raw-cream-3: var(--bone-3); --raw-line: var(--loam-line); --raw-white: var(--white); } /* ========================================================================== 2. SEMANTIC — light (default). Bone at the surface. ========================================================================== */ :root, [data-theme='light'] { color-scheme: light; --bg: var(--bone); --bg-2: var(--bone-2); --bg-3: var(--bone-3); --surface: var(--white); --surface-2: var(--bone-2); --surface-sunk: var(--bone-3); --surface-loam: var(--loam); --fg: #101A12; --fg-muted: #46574A; --fg-subtle: #5F6E63; /* 5.2:1 on bone */ --fg-faint: #667569; /* 4.7:1 on bone — the floor, not decoration */ --fg-invert: var(--bone); --border: var(--loam-line); --border-strong: var(--loam-edge); --hairline: #DCE5DF; --border-focus: var(--forest-500); /* the alternating-section wash. MUST be a semantic token, never a raw one — see the note on `.section:nth-of-type(even)` in atmosphere.css. */ --rhythm: color-mix(in srgb, var(--bone-2) 62%, transparent); /* glass: translucent card surface, so the gradient field reads through the component layer instead of being covered by it */ --glass: color-mix(in srgb, var(--white) 74%, transparent); --glass-2: color-mix(in srgb, var(--white) 88%, transparent); --glass-line: rgba(255, 255, 255, .75); --glass-border: color-mix(in srgb, var(--loam-edge) 60%, transparent); --glass-blur: 12px; --brand: var(--forest-500); --brand-hover: var(--forest-600); --brand-deep: var(--forest-700); --brand-fg: var(--white); --brand-soft: var(--forest-100); --brand-ink: var(--forest-600); --accent: var(--harvest-500); --accent-hover: var(--harvest-600); --accent-fg: #1B0E02; --accent-ink: var(--harvest-700); --accent-soft: var(--harvest-100); --iron: var(--iron-500); --iron-ink: var(--iron-600); --iron-soft: var(--iron-100); --sprout: #5F9520; --chill: var(--chill-600); --chill-soft: #DFF1F4; --danger: #B23A20; --danger-soft: #FAE7E1; --success: #1B7340; --success-soft: #DEF0E5; /* the deep band: used sparingly so it lands as a moment */ --band-bg: var(--forest-900); --band-bg-2: var(--forest-800); --band-fg: #F2EFE4; --band-fg-muted: #9DB3A4; --band-fg-faint: #6E8377; --band-border: #1B3626; --band-hairline: #17301F; --band-accent: var(--harvest-400); --band-sprout: var(--sprout-500); --band-chill: var(--chill-400); --band-iron: var(--iron-400); /* shadows are warm, never neutral grey — they sit on paper */ --shadow-xs: 0 1px 2px rgba(28, 22, 8, .05); --shadow-sm: 0 2px 6px rgba(28, 22, 8, .06), 0 1px 2px rgba(28, 22, 8, .04); --shadow-md: 0 10px 26px rgba(28, 22, 8, .08), 0 2px 6px rgba(28, 22, 8, .05); --shadow-lg: 0 24px 56px rgba(28, 22, 8, .12), 0 6px 16px rgba(28, 22, 8, .06); --shadow-xl: 0 44px 96px rgba(28, 22, 8, .16), 0 12px 28px rgba(28, 22, 8, .08); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .7); --glow-brand: 0 0 0 1px rgba(22, 110, 66, .16), 0 12px 34px -10px rgba(22, 110, 66, .34); --glow-accent: 0 0 0 1px rgba(220, 122, 22, .18), 0 12px 34px -10px rgba(220, 122, 22, .38); --grain-opacity: .5; --contour-ink: rgba(20, 60, 38, .07); } /* ========================================================================== 3. SEMANTIC — dark. Everything sinks to depth. ========================================================================== */ [data-theme='dark'] { color-scheme: dark; --bg: #05120C; --bg-2: #081B11; --bg-3: #0B2416; --surface: #0C2417; --surface-2: #123020; --surface-sunk: #071A10; --surface-loam: #143423; --fg: #EFEDE1; --fg-muted: #A5BBAB; --fg-subtle: #8DA294; --fg-faint: #94A99B; /* 6.6:1 on --surface. #62756A read 3.3:1 and failed */ --fg-invert: #06150D; --border: #1D3A28; --border-strong: #2E4E39; --hairline: #183122; --border-focus: var(--sprout-500); /* A LIFT, not a wash. The light theme's value is cream; painting that over a dark page is what produced the grey smear down the middle of every dark page, because it was authored against the raw `--bone-2` and raw tokens do not flip. 3% white reads as the same rhythm without the smear. */ --rhythm: color-mix(in srgb, var(--white) 3%, transparent); --glass: color-mix(in srgb, #12301F 66%, transparent); --glass-2: color-mix(in srgb, #12301F 86%, transparent); --glass-line: rgba(255, 255, 255, .07); --glass-border: color-mix(in srgb, #3C5F4A 52%, transparent); --glass-blur: 12px; --brand: #33AC68; --brand-hover: #4AC57D; --brand-deep: #1E7C4A; --brand-fg: #04170D; --brand-soft: #103524; --brand-ink: #4AC57D; --accent: var(--harvest-400); --accent-hover: #F7B25F; --accent-fg: #1A0D02; --accent-ink: var(--harvest-400); --accent-soft: #2E1F0C; --iron: var(--iron-400); --iron-ink: var(--iron-400); --iron-soft: #2C160F; --sprout: var(--sprout-500); --chill: var(--chill-400); --chill-soft: #0D2A2F; --danger: #E0765C; --danger-soft: #2E1710; --success: #58BE7C; --success-soft: #0E2C1A; --band-bg: #030C07; --band-bg-2: #06150D; --band-fg: #F2EFE4; --band-fg-muted: #9DB3A4; --band-fg-faint: #6E8377; --band-border: #163024; --band-hairline: #12281C; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45); --shadow-sm: 0 2px 6px rgba(0, 0, 0, .5); --shadow-md: 0 10px 26px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 56px rgba(0, 0, 0, .6); --shadow-xl: 0 44px 96px rgba(0, 0, 0, .66); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .05); --glow-brand: 0 0 0 1px rgba(51, 172, 104, .22), 0 12px 34px -10px rgba(51, 172, 104, .4); --glow-accent: 0 0 0 1px rgba(238, 155, 60, .22), 0 12px 34px -10px rgba(238, 155, 60, .42); --grain-opacity: .28; --contour-ink: rgba(140, 198, 62, .07); /* On dark, amber used as text has to be the light step to clear its own soft background. --raw-ink deliberately does NOT flip: all three of its uses (.cat-card scrim, .badge-solid, .see-all hover) want a dark chip in both themes. */ --raw-harvest-lo: var(--harvest-400); } /* ========================================================================== 4. TYPE — a fluid scale with real ratios, not clamp() guesses ========================================================================== */ :root { --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --t-2xs: 0.6875rem; /* 11 */ --t-xs: 0.75rem; /* 12 */ --t-sm: 0.8125rem; /* 13 */ --t-base: 0.9375rem; /* 15 */ --t-md: clamp(1rem, 0.96rem + 0.19vw, 1.0625rem); /* 16 → 17 */ --t-lg: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem); /* 18 → 21 */ --t-xl: clamp(1.3125rem, 1.17rem + 0.63vw, 1.625rem); /* 21 → 26 */ --t-2xl: clamp(1.625rem, 1.36rem + 1.15vw, 2.25rem); /* 26 → 36 */ --t-3xl: clamp(2rem, 1.53rem + 2.03vw, 3.125rem); /* 32 → 50 */ --t-4xl: clamp(2.5rem, 1.66rem + 3.64vw, 4.5rem); /* 40 → 72 */ --t-5xl: clamp(3rem, 1.4rem + 6.9vw, 6.5rem); /* 48 → 104 */ --lh-flat: 0.92; --lh-tight: 1.02; --lh-snug: 1.14; --lh-copy: 1.5; --lh-body: 1.62; --tr-flat: -0.038em; --tr-tight: -0.026em; --tr-snug: -0.014em; --tr-mono: 0.085em; --tr-wide: 0.15em; } /* ========================================================================== 5. SPACE, RADIUS, MOTION, LAYERS ========================================================================== */ :root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px; --s-13: 168px; --sec-y: clamp(64px, 7vw, 128px); --sec-y-sm: clamp(44px, 4.6vw, 76px); --r-chip: 7px; --r-ctl: 12px; --r-card: 18px; --r-panel: 26px; --r-slab: 34px; --r-pill: 999px; /* motion. three durations, four curves, nothing else. */ --dur-1: 160ms; /* state flips: hover, press, toggle */ --dur-2: 300ms; /* movement: slide, expand, reorder */ --dur-3: 620ms; /* arrival: reveals, media */ --dur-4: 1100ms; /* atmosphere: draws, counters, parallax ease */ --ease-out: cubic-bezier(.22, .68, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.32, .5, 1); --ease-soil: cubic-bezier(.16, .84, .28, 1); /* the reveal curve */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-nav: 40; --z-mega: 45; --z-overlay: 100; --z-toast: 200; --container: 1320px; --container-wide: 1560px; --container-read: 720px; --gutter: clamp(18px, 4.2vw, 52px); --nav-h: 72px; } @media (max-width: 700px) { :root { --nav-h: 62px; } } /* One switch. Every animation in the codebase reads this, so reduced motion is a single source of truth rather than 40 scattered media queries. */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; } }