/* ========================================================================== IB Weingärtner — Design Tokens -------------------------------------------------------------------------- Identity: editorial-technical. Bauhaus-grid pacing, hairline structure, anthracite ink on warm paper, accent reserved as signal — not as field. Two-tier system: 1. Primitives — raw values (color ramps, scales). 2. Semantic — meaningful aliases consumed by base + components. Phase 0: light-only on the public site. The dual accent (teal vs. sky) is exposed as a [data-accent] override so we can A/B in the sandbox. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw values ---------------------------------------------------------------- */ /* INK — anthracite ramp anchored on the brand primary #212C36. Used for text, ink-strong sections, hairlines (via opacity). */ --ink-50: #f7f8f9; --ink-100: #eceef0; --ink-200: #d6dadf; --ink-300: #a8b0b8; --ink-400: #6b7681; --ink-500: #485560; --ink-600: #2f3a44; --ink-700: #212c36; /* PRIMARY — Kunde */ --ink-800: #161e26; --ink-900: #0c1218; /* PAPER — warm off-white background. Lifts the editorial feel above generic zinc-50; reads as paper rather than as screen. */ --paper-50: #fafaf6; --paper-100: #f5f4ee; /* default body bg */ --paper-200: #ebe9df; /* subtle bg / muted card */ --paper-300: #d6d3c5; /* hairline strong */ /* ACCENT A — Türkis-Mint #01FCCB (vom Kunden). */ --teal-200: #b3fff0; --teal-300: #5dffd8; --teal-400: #20fece; --teal-500: #01fccb; /* PRIMARY ACCENT */ --teal-600: #00d4ab; --teal-700: #00ab89; /* ACCENT B — Hellblau-Industrie #4FB7E5 (Empfehlung Phase 0). */ --sky-200: #c4e5f6; --sky-300: #93d6f1; --sky-400: #6dc6ec; --sky-500: #4fb7e5; /* ALTERNATIVE ACCENT */ --sky-600: #2999cc; --sky-700: #1c79a6; --white: #ffffff; --black: #000000; /* SPACING — hybrid 4-then-doubling, generous editorial pacing. */ --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 */ /* TYPE SCALE — fluid clamp. Base + display tier. */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* 12 → 13 */ --text-sm: clamp(0.8125rem, 0.79rem + 0.21vw, 0.9375rem); /* 13 → 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 TIER — for hero claims and numerical statements. */ --text-display-sm: clamp(2.75rem, 1.6rem + 5.7vw, 4.5rem); /* 44 → 72 */ --text-display-md: clamp(3.5rem, 1.5rem + 9.9vw, 6.5rem); /* 56 → 104 */ --text-display-lg: clamp(4.5rem, 1.0rem + 17.4vw, 9.5rem); /* 72 → 152 */ /* LINE HEIGHTS */ --leading-display: 0.95; /* very tight on display sizes */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.75; /* LETTER SPACING */ --tracking-display: -0.025em; --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-eyebrow: 0.16em; /* small-caps eyebrows */ /* FONT WEIGHTS — restricted to 300–500 per brief. No bold. */ --font-light: 300; --font-normal: 400; --font-medium: 500; /* 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; /* STROKES — the line system is structural, not decorative. */ --stroke-hairline: 1px; --stroke-thin: 1px; --stroke-regular: 2px; --stroke-strong: 3px; /* RADII — Bauhaus angular by default. Rounding is the exception. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-full: 9999px; /* SHADOWS — barely visible, technical not friendly. */ --shadow-sm: 0 1px 0 0 rgb(33 44 54 / 0.04); --shadow-md: 0 1px 2px 0 rgb(33 44 54 / 0.06), 0 0 0 1px rgb(33 44 54 / 0.05); --shadow-lg: 0 8px 24px -8px rgb(33 44 54 / 0.14); /* MOTION */ --duration-fast: 140ms; --duration-normal: 240ms; --duration-slow: 480ms; --ease-standard: cubic-bezier(0.32, 0.04, 0.18, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* CONTAINERS — editorial layouts breathe wider. */ --container-narrow: 38rem; /* 608px — prose */ --container-default: 70rem; /* 1120px — main */ --container-wide: 84rem; /* 1344px — hero / grid */ /* ---------------------------------------------------------------- 2. SEMANTIC — light-only on the public site ---------------------------------------------------------------- */ /* SURFACES */ --color-bg: var(--paper-100); --color-bg-subtle: var(--paper-50); --color-bg-muted: var(--paper-200); --color-bg-inset: var(--white); --color-bg-strong: var(--ink-700); /* inverted (ink) sections */ /* TEXT */ --color-text: var(--ink-700); --color-text-strong: var(--ink-800); --color-text-muted: var(--ink-500); --color-text-subtle: var(--ink-400); --color-text-on-strong: var(--paper-100); --color-text-on-accent: var(--ink-700); /* dark text on bright accent */ /* BORDERS — true hairlines via alpha on ink. */ --color-border: rgb(33 44 54 / 0.12); --color-border-strong: rgb(33 44 54 / 0.24); --color-border-subtle: rgb(33 44 54 / 0.06); /* ACCENT — DEFAULT IS SKY (Hellblau-Industrie #4FB7E5). Teal stays reachable via the [data-accent="teal"] override below until Klaus W. locks the choice (Phase 10). */ --color-accent: var(--sky-500); --color-accent-hover: var(--sky-600); --color-accent-fg: var(--ink-700); --color-accent-line: var(--sky-500); /* FOCUS & SELECTION */ --color-focus-ring: var(--ink-700); --color-selection-bg: var(--sky-300); --color-selection-fg: var(--ink-700); } /* ACCENT VARIANT — Türkis-Mint #01FCCB. Toggled in the Phase 0 sandbox via `?accent=teal` → . Once Klaus W. locks the accent (Phase 10), this block disappears (or swaps with :root above if teal wins). */ [data-accent="teal"] { --color-accent: var(--teal-500); --color-accent-hover: var(--teal-600); --color-accent-fg: var(--ink-700); --color-accent-line: var(--teal-500); --color-selection-bg: var(--teal-500); --color-selection-fg: var(--ink-700); } /* ---------------------------------------------------------------- 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; } }