/* ===================================================================== Maggnett Design System - tokens.css (v2.8, 2026-10-28) v2.3: forest-first page rhythm, lime surface, brighter paper v2.1: type = Fraunces (display serif) + Inter (UI/body) + IBM Plex Mono (labels) Swiss editorial: structure drawn with 1px lines, one accent, small radius. The hero palette is the standard: forest + lime. Nothing else. Layers: 1. primitives 2. semantic 3. surfaces ([data-surface]) Previous version: versions/v1.0/ ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Inter:opsz,wght@14..32,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* ---------- 1. primitives ---------- */ /* brand: exactly two colours, both taken from the hero */ --forest: #01342b; /* brand dark: hero, CTA band, ink-on-lime, primary fill on paper */ --forest-2: #0b4236; /* forest +1 step: hover, raised panels on forest */ --lime: #9fe870; /* the one accent: signal, CTA on forest, marker on paper */ --lime-soft: #d6f6be; /* lime marker behind text on paper (lime at ~40%) */ /* v2.7 vector block illustrations: the side (thickness) tone of each face colour */ --lime-deep: #5f9a3c; /* side of a lime block */ --ivory-deep: #c9bfa9; /* side of an ivory / white block */ /* forest-tinted text + lines for the forest surface */ --on-forest: #ffffff; --on-forest-2: #a9c4b6; --on-forest-muted: #6f9584; --forest-line-faint: #0d4033; --forest-line: #1d5444; --forest-line-loud: #2f6b59; /* paper: warm neutral with a hint of green so it sits next to forest */ --paper: #f8faf5; /* v2.3: cleaner, faint green tint (v2.2 #f6f6f1 read dull) */ --paper-2: #ffffff; --ink: #10231d; /* near-forest ink instead of grey-black */ --ink-2: #3e4f48; --ink-muted: #74827b; --ink-faint: #a7b0aa; --line-faint: #e8ede5; --line: #d7dfd4; --line-loud: #b2c0b2; /* type */ /* all three verified to ship a Vietnamese subset (fonts.google.com metadata) */ --font-display: "Fraunces", "Times New Roman", serif; /* headlines, numbers, wordmark */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; /* UI + body */ --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* labels only */ /* Fraunces character: a little soft, no wonky shapes in roman; the italic (used only for .accent inside display type) keeps WONK for personality */ --display-axes: "SOFT" 30, "WONK" 0; --display-axes-italic: "SOFT" 60, "WONK" 1; --fs-mega: clamp(56px, 7.4vw, 132px); /* hero headline */ --fs-display: clamp(44px, 6vw, 88px); /* page heroes */ --fs-h2: clamp(34px, 4.4vw, 60px); --fs-h3: 22px; --fs-lead: 19px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; /* mono uppercase, 12px keeps Vietnamese diacritics readable */ --fw-regular: 400; --fw-medium: 500; --fw-display: 500; /* Fraunces reads heavy already; 500 keeps the contrast elegant */ --fw-ui: 600; /* Inter: buttons, brand */ --ls-display: -.025em; --ls-heading: -.015em; --ls-label: .08em; /* space (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* radius: small only, never 0, never large */ --r: 4px; --r-pill: 999px; /* only for .label */ /* layout: 12-column Swiss grid */ --page-max: 1600px; --gutter: 32px; --gutter-mobile: 18px; --cols: 12; /* motion */ --ease: cubic-bezier(.23, 1, .32, 1); --t-fast: 160ms; --t-med: 360ms; --t-slow: 700ms; } /* ---------- 2 + 3. semantic tokens per surface ---------- */ :root, [data-surface="paper"] { --surface: var(--paper); --surface-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ink-muted); --fg-faint: var(--ink-faint); --rule-faint: var(--line-faint); --rule: var(--line); --rule-loud: var(--line-loud); --accent-text: var(--forest); /* accent words: forest text ... */ --accent-mark: var(--lime-soft); /* ... on a lime marker */ --btn-bg: var(--forest); --btn-fg: var(--lime); --btn-bg-hover: var(--forest-2); --signal: var(--lime); --signal-ring: var(--forest); --diagram-bg: var(--forest); /* diagrams always sit on forest panels */ } [data-surface="forest"] { --surface: var(--forest); --surface-2: var(--forest-2); --fg: var(--on-forest); --fg-2: var(--on-forest-2); --fg-muted: var(--on-forest-muted); --fg-faint: #4e7a68; --rule-faint: var(--forest-line-faint); --rule: var(--forest-line); --rule-loud: var(--forest-line-loud); --accent-text: var(--lime); --accent-mark: transparent; --btn-bg: var(--lime); --btn-fg: var(--forest); --btn-bg-hover: #b6f08f; --signal: var(--lime); --signal-ring: transparent; --diagram-bg: var(--forest-2); } /* v2.3: lime surface - the loud accent. Use for at most 2 bands per page. */ [data-surface="lime"] { --surface: var(--lime); --surface-2: #b6f08f; --fg: var(--forest); --fg-2: #0b4236; --fg-muted: #2f6b59; --fg-faint: #4f8a52; --rule-faint: rgba(1, 52, 43, .10); --rule: rgba(1, 52, 43, .18); --rule-loud: rgba(1, 52, 43, .35); --accent-text: var(--forest); --accent-mark: transparent; --btn-bg: var(--forest); --btn-fg: var(--lime); --btn-bg-hover: var(--forest-2); --signal: var(--forest); --signal-ring: var(--forest); --diagram-bg: var(--forest); } /* v2.5: ivory surface - warm off-white for editorial statement bands. Replaces the lime band background (Nate: light green as a big background looks cheap). */ [data-surface="ivory"] { --surface: #f7f2e7; --surface-2: #fffdf8; --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: #7a7d6f; --fg-faint: #aaa995; --rule-faint: #ebe4d4; --rule: #ddd4c1; --rule-loud: #c2b79f; --accent-text: var(--forest); --accent-mark: var(--lime); --btn-bg: var(--forest); --btn-fg: var(--lime); --btn-bg-hover: var(--forest-2); --signal: var(--lime); --signal-ring: var(--forest); --diagram-bg: var(--forest); }