/* ============================================================================ LohnPulse Design System — tokens.css · MATERIALIZATION DRAFT (v1.0) ---------------------------------------------------------------------------- SSoT: design/DESIGN-SYSTEM.md. This is the FIRST materialization draft (for review) of the canonical token values into CSS custom properties. Substrate: website = vanilla / Cloudflare Pages / light-only; app = Tailwind v4 :root + .dark. Same names + values will mirror into src/app/globals.css. HARD RULE: compose ONLY with color-mix(in oklab, …). oklch() is FORBIDDEN (project render bug — color-mix(oklch) renders green). Theme model: light defaults live on :root. App-dark (Deep Emerald Ink, ACTIVE) lives under :root.dark AND [data-theme="dark"]. The Target-Inky composition is a COMMENTED bg-only toggle (:root[data-dark-comp="inky"]) overriding ONLY canvas/shell/topbar/body/card — mint/accents/text unchanged. APCA readouts + roles are documented in DESIGN-SYSTEM.md §2. ============================================================================ */ :root { /* --- Brand green ramp — forest emerald (both surfaces) ------------------- */ --green-50: #EEF6F0; /* tint bg, table stripe, chip bg */ --green-100: #D7EBDD; /* soft fill / mint surface / success-bg alt */ --green-200: #B2D8BF; /* borders on green surfaces */ --green-300: #83C09B; /* decorative, on-dark accents; blog "soft mint" */ --green-400: #4EA475; /* soft mint accent role */ --green-500: #2C8A56; /* secondary/lighter fill */ --green-600: #1E7A4B; /* ramp step; fresher green (former website primary) */ --green-700: #17633D; /* PRIMARY-STRONG — links & green text on white */ --green-800: #124B2F; /* deep green text on light surfaces */ --green-900: #0E3623; /* hero / dark-section base (= --hero-g2) */ --green-950: #0A2719; /* darkest · hero gradient top (= --hero-g1) */ /* --- Mint — shared signature accent -------------------------------------- */ --mint: #B9ECC9; /* ★ hero pop · app-dark accent (rings/chips/active) */ --mint-calm: #97CEAC; /* calmer mint alternate; soft fills */ --ink-label: #082014; /* dark ink for text ON mint/amber fills */ /* --- Orange / amber — warm counterpoint (sparing) ----------------------- */ --orange-50: #FDF3E9; /* warning/attention surface */ --orange-100: #FBE3C9; /* soft orange fill */ --orange-400: #E88C3C; /* decorative accent on dark */ --orange-500: #E0761C; /* ACCENT fill (sparing) — large only for white lbl */ --orange-600: #C2611B; /* accent-strong */ --orange-700: #9A4E17; /* orange TEXT on white (Lc 79.7) */ --amber: #f0b840; /* Frist/urgency amber (state-rule) + Schaubild seal*/ /* --- Plum — restrained (§-accent / chip ONLY, never gradient, never cyan) */ --plum-50: #F1ECF8; /* plum tint surface (chip bg) */ --plum-100: #E1D6F0; /* soft plum fill */ --plum-500: #6A4C93; /* plum chip fill */ --plum-600: #574080; /* plum text/icon on white — the § mark (Lc 89.3) */ --plum-700: #453363; /* deep plum text */ /* --- Neutrals — bespoke green-cast "ink" -------------------------------- */ --ink-950: #0B1410; /* max ink, rare */ --ink-900: #14201B; /* headings (Lc 103.7) */ --ink-800: #24312B; /* body text (Lc 100.0) */ --ink-700: #33413A; /* body-alt / strong secondary */ --ink-600: #4B5A52; /* secondary text */ --ink-500: #6B7A72; /* muted / meta / captions (large/UI, not body) */ --ink-400: #94A29B; /* placeholder; FUNCTIONAL border (>=45) */ --ink-300: #C4CFC9; /* strong divider (decorative) */ --ink-200: #DEE6E1; /* hairline (decorative rule only) */ --ink-100: #EFF3F0; /* subtle surface */ --surface-alt: #F6FAF7; /* website sunken surface */ --white: #FFFFFF; /* website base surface */ /* --- Semantic role layer (what components consume; never raw hex) -------- */ /* text */ --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-secondary: var(--ink-600); --text-muted: var(--ink-500); --text-on-brand: var(--white); --text-link: var(--green-700); --text-link-hover: var(--green-800); /* surfaces */ --surface: var(--white); --surface-sunken: var(--surface-alt); --surface-brand: var(--green-900); /* borders */ --border-hairline: var(--ink-200); --border-default: var(--ink-300); --border-strong: var(--ink-400); --border-focus: var(--green-600); /* brand */ --brand-primary: #2F6740; /* ★ THE unified brand primary — website + app (R17) */ --brand-strong: var(--green-700); --brand-fill-soft: var(--green-100); --brand-accent: var(--green-400); --accent-warm: var(--orange-500); --accent-warm-text:var(--orange-700); --accent-plum: var(--plum-600); /* website primary BUTTON (R20-locked, distinct from the #2F6740 brand-mark): Deep-Forest-Ink on light grounds → mint on dark/forest grounds. Reduces green-tone proliferation; #2F6740 stays for small green marks only. The .sec--forest utility flips these to the mint pair automatically. */ --btn-primary-bg: var(--green-900); /* Deep-Forest-Ink #0E3623 on light */ --btn-primary-text: var(--white); /* cream-white ink on the deep fill */ --btn-primary-hover: var(--ink-950); /* #0B1410 — one step deeper on hover */ --btn-secondary-bg: transparent; --btn-secondary-text: var(--green-900); --btn-secondary-border: var(--green-900); /* status */ --success: var(--green-700); --success-bg: #DCFCE7; --warning: #B45309; --warning-bg: #FEF3C7; --error: #B42318; --error-bg: #FEE4E2; --info: var(--green-700); /* --- Emphasis / ledger role aliases (Pulsstrich grammar) ---------------- */ --fx-rule: var(--border-hairline); /* the standard hairline rule */ --fx-rule-strong: var(--ink-300); /* heavier single rule (Zwischen) */ --fx-rule-sum: var(--brand-primary); /* the double rule / Summenstrich */ --fx-beat: var(--brand-primary); /* Kurz gesagt / Rechenweg beat */ --fx-beat-note: var(--green-500); /* Hinweis beat (folds teal→green)*/ --fx-beat-warn: var(--amber); /* Wichtig beat */ --fx-fig: var(--ink-800); /* tabular figure ink */ --fx-src: var(--green-700); /* §-source / origin ink */ /* --- SECTION-GROUND RHYTHM — the anti-monotony backbone (DS §6a) --------- A section declares its ground; adjacent sections NEVER share one, and a DEEP ground punctuates every 3rd–4th section (light → lively → dark → light). Light grounds use --ink-* text; the forest ground remaps to --d-* (below). */ --sect-white: var(--white); /* crisp base, the "reset" ground */ --sect-cream: #F1F2EA; /* warm GREEN-CAST paper (ties to app cream); NOT the beige/tan AI-cream — this is green */ --sect-alt: var(--surface-alt); /* coolest green sunken (existing) */ --sect-mint: color-mix(in oklab, var(--mint) 15%, var(--white)); /* lively light ground */ --sect-mint-edge: color-mix(in oklab, var(--mint) 34%, var(--white)); /* mint-ground hairline */ --sect-forest: var(--hero-gradient); /* deep forest gradient — drama (on-dark) */ --sect-forest-flat: var(--green-900); /* flat forest alternative */ --sect-accent: color-mix(in oklab, var(--orange-500) 7%, #F1F2EA); /* ONE warm human moment/page */ /* ground-scoped helpers reused by cards/badges/steps */ --badge-ring: color-mix(in oklab, var(--brand-primary) 42%, transparent); /* number/icon inset ring */ --card-edge-mint: color-mix(in oklab, var(--mint) 40%, var(--border-hairline)); /* card edge on mint */ /* ======================================================================== TYPE ======================================================================== */ --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, "Segoe UI", Roboto, sans-serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* fluid type scale — min@375px → max@1240px */ --text-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* 11→12 legal, mono micro */ --text-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.8125rem); /* 12→13 meta, kicker, tags */ --text-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); /* 14→15 UI small, captions */ --text-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); /* 16→17 marketing/UI body */ --text-md: clamp(1.0625rem, 1.00rem + 0.30vw, 1.1875rem); /* 17→19 blog longform body */ --text-lg: clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem); /* 19→22 lead / subtitle */ --text-xl: clamp(1.375rem, 1.28rem + 0.50vw, 1.625rem); /* 22→26 h3 */ --text-2xl: clamp(1.625rem, 1.45rem + 0.90vw, 2.125rem); /* 26→34 h2 */ --text-3xl: clamp(2rem, 1.70rem + 1.50vw, 2.75rem); /* 32→44 h1 */ --text-4xl: clamp(2.5rem, 2.00rem + 2.60vw, 3.75rem); /* 40→60 hero display */ --text-5xl: clamp(3rem, 2.20rem + 4.00vw, 4.75rem); /* 48→76 mega display (rare) */ /* line-height */ --leading-flat: 1.4; /* UI, buttons, meta */ --leading-tight: 1.05; /* --text-4xl / 5xl display */ --leading-snug: 1.15; /* h1 / h2 */ --leading-heading: 1.28; /* h3 / h4 */ --leading-body: 1.65; /* marketing body */ --leading-prose: 1.75; /* blog longform */ /* tracking */ --tracking-display: -0.02em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.09em; /* measure (max-inline-size) */ --measure: 66ch; --measure-tight: 58ch; --measure-wide: 74ch; /* ======================================================================== SPACING (4px base + fluid rhythm) ======================================================================== */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --gutter: clamp(1.25rem, 4vw, 2rem); /* container side padding */ --space-section: clamp(3.5rem, 8vw, 7rem); /* vertical section rhythm */ --stack-flow: 1.1em; /* prose vertical rhythm */ /* layout containers */ --container: 1200px; --container-narrow: 760px; --container-prose: 66ch; /* ======================================================================== RADIUS (cards capped at --radius-lg:10px; >=14px = media/hero frames ONLY) ======================================================================== */ --radius-xs: 4px; /* chips, small controls */ --radius-sm: 6px; /* inputs, tags */ --radius-md: 8px; /* buttons, small cards */ --radius-lg: 10px; /* CARD MAX — article/feature/pricing cards */ --radius-xl: 14px; /* media frames, hero image, figures ONLY */ --radius-pill: 999px; /* pills, avatars */ /* ======================================================================== SHADOW (restrained, warm-ink, low-spread — no glow, no glass) ======================================================================== */ --shadow-xs: 0 1px 2px rgba(20,32,27,.06); --shadow-sm: 0 1px 3px rgba(20,32,27,.08), 0 1px 2px rgba(20,32,27,.04); --shadow-md: 0 4px 12px -2px rgba(20,32,27,.08), 0 2px 4px -2px rgba(20,32,27,.05); --shadow-lg: 0 10px 24px -6px rgba(20,32,27,.10), 0 4px 8px -4px rgba(20,32,27,.05); /* no --shadow-xl glow; no backdrop-filter glass */ /* ======================================================================== MOTION (one ease family; motion-as-signal; one beat then silence — §2d. Hero Schaubild A is the ONE documented continuous-ambient exception.) ======================================================================== */ --dur-fast: 120ms; /* hover, focus */ --dur-base: 200ms; /* most transitions */ --dur-slow: 320ms; /* reveals, accordions */ --dur-signal: 640ms; /* the one-time signature line-draw */ --ease: cubic-bezier(0, 0, 0.2, 1); /* the ONLY family (ease-out) */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* crisp in-out for UI */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Schaubild: record accel */ --ease-crest: cubic-bezier(0.2, 0.7, 0.3, 1); /* Schaubild: fast R-rise */ /* ======================================================================== WEBSITE HERO / DARK SECTIONS (Tief × Bright — locked, SINGLE tone) ARCHITECTURE: one shared palette (green ramp + mint + …) → three surface CONTEXTS: (1) website [light pages + this ONE deep-forest tone for hero/ dark sections + footer — NO toggle, one approved tone], (2) app-light cream, (3) app-dark Deep Emerald Ink (+ the Inky toggle). The dark-comp TOGGLE is APP-DARK ONLY; it never touches these --hero-* / website vars. ======================================================================== */ --hero-g1: #0A2719; /* gradient top (= --green-950) */ --hero-g2: #0E3623; /* gradient bottom (= --green-900) */ --hero-gradient: linear-gradient(var(--hero-g1), var(--hero-g2)); /* dark-surface roles for text/nodes ON the hero field */ --d-text: #E9F2EB; --d-sec: #B9C9BD; --d-muted: #8AA091; --d-fig: #DBEADF; --d-hairline: color-mix(in oklab, var(--mint) 16%, transparent); --d-hairline-strong: color-mix(in oklab, var(--mint) 30%, transparent); --d-inset: color-mix(in oklab, var(--white) 4%, var(--hero-g2)); --d-plum: color-mix(in oklab, var(--plum-500) 46%, var(--white)); /* ======================================================================== APP-LIGHT surface composition ("App-Hell" — creamy/greenish) ======================================================================== */ --app-canvas: #f3f3ec; /* canvas cream */ --app-chrome: #e5e3d7; /* chrome / sidebar (Unified Shell) */ --app-shell: var(--app-chrome); --app-topbar: var(--app-chrome); --app-body: var(--app-canvas); --app-card: var(--white); --app-card-raised: var(--white); --app-well: var(--surface-alt); --app-primary: var(--brand-primary); /* = unified brand primary #2F6740 */ --app-hair: var(--border-hairline); --app-elev: var(--shadow-sm); --app-t1: var(--ink-900); --app-t2: var(--ink-600); --app-t3: var(--ink-500); /* shell-scoped tokens — sidebar/topbar consume THESE (not --app-t*), so the shell can be themed independently of the body → enables the HYBRID mode */ --shell-text: var(--ink-900); --shell-muted: var(--ink-500); --shell-hair: var(--border-hairline); --shell-active-mark: var(--brand-primary); /* left-stroke on active nav */ --shell-active-bg: color-mix(in oklab, var(--brand-primary) 10%, var(--app-shell)); } /* ============================================================================ APP HYBRID — dark shell (L-frame) + LIGHT body ("Shell dunkel, Rest hell"). Opt-in on LIGHT mode via . Overrides ONLY the shell surface + shell text; canvas/body/cards stay LIGHT (inherited from :root). The third app chrome mode alongside full-light and full-dark. ============================================================================ */ :root[data-app-chrome="hybrid"] { --app-shell: #12201a; /* dark rail (= Deep-Emerald-Ink shell; #14261c alt) */ --app-topbar: #12201a; --shell-text: #e3eae4; --shell-muted: #b8c1ba; --shell-hair: color-mix(in oklab, var(--mint) 14%, transparent); --shell-active-mark: var(--mint); --shell-active-bg: color-mix(in oklab, var(--mint) 12%, var(--app-shell)); /* --app-canvas / --app-body / --app-card stay LIGHT (from :root) */ } /* ============================================================================ APP-DARK — Deep Emerald Ink (ACTIVE, R16) Deeper than the retired Emerald Night, still clearly GREEN (not neutral black); cards float in a two-step lift (base #1c2622 → raised #23302d). Mint / amber / ink-label are inherited from :root unchanged. ============================================================================ */ :root.dark, [data-theme="dark"] { /* surface-bg composition */ --app-canvas: #0f1a15; --app-shell: #12201a; --app-topbar: #12201a; --app-body: #0f1a15; --app-card: #1c2622; --app-card-raised: #23302d; --app-well: #0b140f; /* text tiers */ --app-t1: #e3eae4; /* primary */ --app-t2: #b8c1ba; /* secondary/meta (clears APCA >=60) */ --app-t3: #858f88; /* tertiary */ /* shell-scoped tokens (full-dark: dark shell + dark body) */ --shell-text: #e3eae4; --shell-muted: #b8c1ba; --shell-hair: color-mix(in oklab, var(--mint) 14%, transparent); --shell-active-mark: var(--mint); --shell-active-bg: color-mix(in oklab, var(--mint) 12%, var(--app-shell)); /* structure derived from the ground (oklab only) */ --app-hair: color-mix(in oklab, var(--mint) 14%, transparent); --app-elev: 0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25); --app-hover: color-mix(in oklab, var(--app-card) 78%, var(--mint)); --app-active:color-mix(in oklab, var(--app-shell) 80%, var(--mint)); /* app-dark primary + on-dark semantic remaps (mint-forward, not white) */ --app-primary: var(--mint); --text-on-brand: var(--ink-label); --border-focus: var(--mint); } /* ============================================================================ TARGET-INKY dark composition — COMMENTED bg-only toggle (OFF by default). Uncomment to switch: overrides ONLY canvas/shell/topbar/body/card bg vars. mint / amber / accents / text tiers stay IDENTICAL to Deep Emerald Ink. Later switch = uncomment this block + set . ---------------------------------------------------------------------------- :root.dark[data-dark-comp="inky"], [data-theme="dark"][data-dark-comp="inky"] { --app-canvas: #08120c; --app-shell: #070c09; --app-topbar: #070c09; --app-body: #08120c; --app-card: #17231c; --app-card-raised: #18241d; --app-well: #06090a; } ============================================================================ */ /* ============================================================================ SECTION-GROUND UTILITIES (DS §6a) — one class per section sets its ground. .sec--forest remaps the text/brand tokens to on-dark so EVERY child (cards, rules, badges) inverts automatically — colour rhythm as a single per-section token. RULE: adjacent sections never share a ground; a deep ground every 3rd–4th. ============================================================================ */ .sec--white { background: var(--sect-white); } .sec--cream { background: var(--sect-cream); } .sec--alt { background: var(--sect-alt); } .sec--mint { background: var(--sect-mint); } .sec--accent { background: var(--sect-accent); } .sec--forest, .sec--forest-flat { color: var(--d-text); --text-strong: var(--white); --text-body: var(--d-text); --text-secondary: var(--d-sec); --text-muted: var(--d-muted); --border-hairline: var(--d-hairline); --border-default: var(--d-hairline-strong); --text-link: var(--mint); --brand-primary: var(--mint); --fx-rule-sum: var(--mint); --fx-beat: var(--mint); /* buttons flip to the mint pair on the deep forest ground (R20) */ --btn-primary-bg: var(--mint); --btn-primary-text: var(--ink-label); --btn-primary-hover: var(--mint-calm); --btn-secondary-text: var(--mint); --btn-secondary-border: var(--d-hairline-strong); } .sec--forest { background: var(--sect-forest); } .sec--forest-flat { background: var(--sect-forest-flat); } /* ============================================================================ REDUCED MOTION — ship on every surface (final-visible without motion) ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================================ LEGACY --fx-* ALIAS SHIM (spine spec §6) Keeps existing website styles.css / blog.css markup rendering during the incremental migration. Re-points old --fx-* names at the new role tokens. DELETE once markup is migrated to role tokens. NOTE: --fx-teal (old standalone #3E7F72) intentionally folds into the green ramp — a lone teal is deny-list-adjacent (teal/cyan drift). ============================================================================ */ :root { --fx-primary: var(--green-700); --fx-primary-text: var(--green-700); --fx-forest-1: var(--green-950); --fx-forest-2: var(--green-900); --fx-forest-3: var(--green-800); --fx-forest-4: var(--green-600); --fx-mint: var(--green-300); --fx-mint-line: var(--green-200); --fx-amber: var(--orange-500); --fx-ink: var(--ink-900); --fx-muted: var(--ink-500); --fx-hairline: var(--border-hairline); --fx-teal: var(--green-500); /* retire standalone teal → green ramp */ /* --ease is now global (defined above) */ }