/* ========================================================================== Beiskammer — Design Tokens -------------------------------------------------------------------------- Trade-confident, regional. Brand green is a *fill* (CTAs, accents, section signatures), not a link color. Body text on light, "ink" sections punctuate with green-on-near-black — that's the signature. Two-tier: 1. Primitives — raw values (ramps, scales). Stable. 2. Semantic — meaningful aliases the rest of the CSS consumes. No prefers-color-scheme dark variant on the public site — "dark" here is a *design choice per section* (.section--ink), not a user pref. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw values ---------------------------------------------------------------- */ /* Neutral ramp — slightly warm grey, anchored on #222 ink. */ --neutral-0: #ffffff; --neutral-50: #f7f7f6; --neutral-100: #efeeec; --neutral-200: #e3e2df; --neutral-300: #cfcdc8; --neutral-400: #a3a09a; --neutral-500: #75726c; --neutral-600: #555350; --neutral-700: #3a3937; --neutral-800: #2a2928; --neutral-900: #222222; /* signature "ink" — brief calls this out */ --neutral-950: #141413; /* Brand green ramp — anchored on hsl(87, 46%, 55%) ≈ #9BC25E */ --green-50: hsl(87, 60%, 95%); --green-100: hsl(87, 55%, 88%); --green-200: hsl(87, 50%, 78%); --green-300: hsl(87, 48%, 67%); --green-400: hsl(87, 46%, 61%); --green-500: hsl(87, 46%, 55%); /* brand */ --green-600: hsl(87, 48%, 47%); --green-700: hsl(87, 52%, 37%); --green-800: hsl(87, 54%, 28%); --green-900: hsl(87, 56%, 20%); --green-950: hsl(87, 60%, 12%); --white: #ffffff; --black: #000000; /* Spacing — 4px → doubling. */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ --space-12: 16rem; /* 256px */ /* Fluid type scale — clamp(min, fluid, max). 360 → 1280 viewport. */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* 12 → 13 */ --text-sm: clamp(0.875rem, 0.83rem + 0.21vw, 0.9375rem); /* 14 → 15 */ --text-base: clamp(1rem, 0.95rem + 0.21vw, 1.0625rem); /* 16 → 17 */ --text-lg: clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem); /* 18 → 20 */ --text-xl: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem); /* 20 → 24 */ --text-2xl: clamp(1.5rem, 1.32rem + 0.89vw, 2rem); /* 24 → 32 */ --text-3xl: clamp(1.875rem, 1.55rem + 1.61vw, 2.75rem); /* 30 → 44 */ --text-4xl: clamp(2.25rem, 1.71rem + 2.68vw, 3.75rem); /* 36 → 60 */ /* Display sizes — for hero H1 and big section openers. */ --text-display-sm: clamp(2.75rem, 2.0rem + 3.6vw, 4.5rem); /* 44 → 72 */ --text-display-md: clamp(3.25rem, 2.2rem + 5.0vw, 6rem); /* 52 → 96 */ --text-display-lg: clamp(3.75rem, 2.3rem + 7.0vw, 7.5rem); /* 60 → 120 */ /* Line heights */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tightest: -0.035em; --tracking-tighter: -0.025em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* Font weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-black: 800; /* Font families */ --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Radii — small + restrained. Trade brand, not gadget brand. */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* Shadows — used sparingly. */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.06); --shadow-lg: 0 18px 40px -10px rgb(0 0 0 / 0.18), 0 6px 12px -4px rgb(0 0 0 / 0.10); --shadow-ink: 0 24px 56px -12px rgb(0 0 0 / 0.45); /* Motion */ --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 360ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Layout containers — max-widths */ --container-narrow: 38rem; /* 608px — prose */ --container-default: 72rem; /* 1152px — main */ --container-wide: 84rem; /* 1344px — hero */ /* Inline container recipe — page gutter + centered width capped at one of the max-widths above. Single source of truth: change the gutter or the formula here and every `.container` / `var(--container-w*)` updates. Use via the `.container` utility class, or reference the var directly on a component (e.g. `width: var(--container-w-wide)`). */ --gutter: var(--space-5); --container-w-narrow: min(100% - 2 * var(--gutter), var(--container-narrow)); --container-w: min(100% - 2 * var(--gutter), var(--container-default)); --container-w-wide: min(100% - 2 * var(--gutter), var(--container-wide)); /* ---------------------------------------------------------------- 2. SEMANTIC — single light scheme (no OS auto-toggle). "Ink" tokens are for .section--ink (dark blocks inside the otherwise-light page). ---------------------------------------------------------------- */ /* Surfaces (light page default) */ --color-bg: var(--neutral-0); --color-bg-subtle: var(--neutral-50); --color-bg-muted: var(--neutral-100); --color-bg-inset: var(--neutral-0); /* Text */ --color-text: var(--neutral-900); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-500); /* Borders */ --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); /* Brand — the signature green. Fill / decoration / CTA. */ --color-brand: var(--green-500); --color-brand-hover: var(--green-600); --color-brand-strong: var(--green-700); /* AA-safe text on white */ --color-brand-fg: var(--neutral-900); /* text on brand fill */ /* Accent — semantic alias for text-side use of the brand (e.g. body links). Stronger ramp step for legibility on white. */ --color-accent: var(--green-700); --color-accent-hover: var(--green-800); --color-accent-fg: var(--white); /* Focus */ --color-focus-ring: var(--green-600); /* Selection */ --color-selection-bg: var(--green-200); --color-selection-fg: var(--neutral-900); /* Ink surface tokens — used inside .section--ink */ --color-ink: var(--neutral-900); --color-ink-2: var(--neutral-800); /* slightly lighter inner */ --color-on-ink: var(--neutral-0); --color-on-ink-muted: var(--neutral-300); --color-on-ink-subtle: var(--neutral-400); --color-border-on-ink: rgb(255 255 255 / 0.12); } /* ---------------------------------------------------------------- 3. WEB FONTS — self-hosted Inter Variable (DSGVO: no CDN). ---------------------------------------------------------------- */ @font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Inter-Variable-latin.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: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Inter-Variable-latin-ext.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; } }