/* ========================================================================== DINKOMART — 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) 40%, transparent); /* glass: translucent card surface, so the gradient field reads through the component layer instead of being covered by it */ /* 74% BROKE AGAINST A LOUD FIELD; 92% THEN TRADED THE GLASS AWAY TO SURVIVE IT. THE FIELD IS QUIET NOW, SO NEITHER NUMBER IS THE RIGHT ONE. The history, because it explains the shape of the fix. At 74% against the old field — a mint bloom running #FEFEFE down to #E8F3EB across a viewport — a card composited to #FFFFFF over the bright part and #F9FCFA over the bloom: a six-point green swing INSIDE one card, with `--glass-line` painting a visible seam across the middle of it. 92% killed the swing, but 92% white over anything is white. The cards stopped blotching and stopped being glass at the same time, which is half the look. The bloom is now 26% rather than 78% (atmosphere.css), so the field moves about eight points across a whole viewport and roughly three across the height of one card. At 80% that is a sub-point swing inside a card — below the threshold where it can blotch — while still letting a fifth of the ground through, which is what makes the surface read as glass rather than as a white rectangle. The blur does the rest. Fix the field first. A card cannot be tuned out of a ground that is too loud; the previous pass proved that by having to go nearly opaque to do it. The highlight stays faded to 72% in atmosphere.css — a sheen down the card rather than a band with an edge. */ --glass: color-mix(in srgb, var(--white) 80%, transparent); --glass-2: color-mix(in srgb, var(--white) 92%, 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); /* .5 WAS THE MAIN REASON THE LIGHT PAGE READ AS FADED. The grain blends `multiply` in light (craft.css:29). Multiplying a mid-grey noise plate over a near-white ground at half opacity took the hero and every other .grain-layer section down roughly a tenth of its luminance — an even grey veil over the brightest part of the site. The texture is there to stop large flat fields reading as dead digital colour, and it still does that at .18; it was never supposed to be a tint. Dark blends `screen`, so it lightens rather than darkens and can afford more, but it came down too. */ --grain-opacity: .18; --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: .22; --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-3xs IS AN ALIAS FOR THE FLOOR, AND IT IS NOT SMALLER THAN --t-2xs. It was referenced twelve times across guide.css, docs.css, atlas.css and login.css as `var(--t-3xs, .625rem)` and DEFINED NOWHERE, so every one of those twelve fell through to the fallback — 10px, under the floor this scale sets. That is where the sub-11px text on the guides and on Atlas was coming from: not an authored value anybody chose, but a token that was never created. Defining it here corrects all twelve at once without editing any of them. It resolves to the same 11px as --t-2xs on purpose — the scale bottoms out at 11px, and a step below the floor is not a step, it is a bug with a name. Kept as its own token rather than rewritten at the call sites so the intent ("the smallest thing on the page") still reads there. */ --t-3xs: 0.6875rem; /* 11 — the floor */ --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; } }