/* ========================================================================== IBU Ingenieurbüro Ulfig — Design Tokens -------------------------------------------------------------------------- Editorial / engineering-blueprint identity. Single source of truth for colors, type, spacing, motion. Components consume semantic tokens — never primitives directly. Light-only by design. Procurement audience expects predictable, printable surfaces; the brand purple is tuned for warm off-white. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw brand values + neutral ramp ---------------------------------------------------------------- */ /* IBU brand palette */ --ibu-purple: #544497; /* primary — accent, CTAs, headlines accent */ --ibu-purple-deep: #3d2f78; /* hover/active */ --ibu-purple-soft: #ece7f5; /* purple wash for callout backgrounds */ --ibu-blue-grey: #53617e; /* secondary accent, links */ --ibu-blue-grey-deep:#3a4358; --ibu-paper: #f6f6f4; /* page surface */ --ibu-ink: #14141a; /* near-black, big display headlines */ /* Stone neutral ramp — warm grey, paired with paper surface. Anchored at 100 (= paper), 600 (= client muted grey), 800 (= client body grey). */ --stone-50: #fafaf8; --stone-100: #f6f6f4; --stone-150: #ededea; --stone-200: #e2e2dc; --stone-300: #cfcfc7; --stone-400: #a8a8a0; --stone-500: #82827a; --stone-600: #6e707c; --stone-700: #525258; --stone-800: #464850; --stone-900: #2a2a2e; --stone-950: #14141a; --white: #ffffff; --black: #000000; /* ---------------------------------------------------------------- 2. SPACING — hybrid 4-then-doubling scale ---------------------------------------------------------------- */ --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 */ /* ---------------------------------------------------------------- 3. TYPOGRAPHY — Roboto Flex variable ---------------------------------------------------------------- */ --font-sans: "Roboto Flex Variable", "Roboto Flex", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: var(--font-sans); /* same family, condensed via wdth axis */ --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Fluid type scale — clamp(min, fluid, max). 360px → 1280px viewport. */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* 12 → 13px */ --text-sm: clamp(0.8125rem,0.78rem + 0.18vw, 0.875rem); /* 13 → 14px */ --text-base: clamp(1rem, 0.95rem + 0.21vw, 1.0625rem); /* 16 → 17px */ --text-lg: clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem); /* 18 → 20px */ --text-xl: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem); /* 20 → 24px */ --text-2xl: clamp(1.5rem, 1.32rem + 0.89vw, 2rem); /* 24 → 32px */ --text-3xl: clamp(2rem, 1.71rem + 1.43vw, 2.75rem); /* 32 → 44px */ --text-4xl: clamp(2.5rem, 1.96rem + 2.68vw, 4rem); /* 40 → 64px */ --text-5xl: clamp(3rem, 2.07rem + 4.64vw, 5.5rem); /* 48 → 88px — hero motto */ /* Line heights */ --leading-tightest: 0.95; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tightest: -0.045em; --tracking-tighter: -0.025em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-label: 0.14em; /* uppercase eyebrow labels */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-black: 900; /* Roboto Flex variation presets — set via font-variation-settings. wdth: 25–151 (default 100). opsz: 8–144. */ --variation-display: "wdth" 95, "opsz" 144; /* condensed display */ --variation-headline:"wdth" 100, "opsz" 96; --variation-body: "wdth" 100, "opsz" 14; --variation-label: "wdth" 90, "opsz" 14; /* slightly condensed labels */ /* ---------------------------------------------------------------- 4. RADII, SHADOWS, MOTION ---------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 9999px; /* Shadows — restrained. Engineering aesthetic; no soft glow. */ --shadow-sm: 0 1px 0 0 var(--stone-200); --shadow-md: 0 1px 2px 0 rgb(20 20 26 / 0.04), 0 1px 0 0 var(--stone-200); --shadow-lg: 0 4px 12px -2px rgb(20 20 26 / 0.08), 0 1px 0 0 var(--stone-200); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ---------------------------------------------------------------- 5. LAYOUT ---------------------------------------------------------------- */ --container-narrow: 38rem; /* 608px — prose */ --container-default: 72rem; /* 1152px — main content */ --container-wide: 84rem; /* 1344px — hero, full-bleed sections */ --gutter-page: clamp(1.25rem, 4vw, 2.5rem); /* ---------------------------------------------------------------- 6. SEMANTIC — light theme (only theme) ---------------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--ibu-paper); --color-bg-subtle: var(--stone-50); --color-bg-muted: var(--stone-150); --color-bg-inset: var(--white); --color-bg-inverse: var(--stone-950); --color-bg-accent-soft: var(--ibu-purple-soft); /* Text */ --color-text: var(--stone-800); /* body */ --color-text-strong: var(--ibu-ink); /* large display headlines */ --color-text-muted: var(--stone-600); --color-text-subtle: var(--stone-500); --color-text-on-accent: var(--white); --color-text-on-inverse:var(--stone-100); /* Borders / rules */ --color-border: var(--stone-200); --color-border-strong: var(--stone-300); --color-rule: var(--stone-300); --color-rule-strong: var(--stone-800); /* Accent (purple) */ --color-accent: var(--ibu-purple); --color-accent-hover: var(--ibu-purple-deep); --color-accent-fg: var(--white); /* Links — blue-grey by default, purple on hover (accent reveal) */ --color-link: var(--ibu-blue-grey); --color-link-hover: var(--ibu-purple); /* Feedback */ --color-focus-ring: var(--ibu-purple); --color-selection-bg: #d2c8e9; --color-selection-fg: var(--ibu-purple-deep); } /* ---------------------------------------------------------------- 7. WEB FONTS — self-hosted Roboto Flex variable (standard axes: wght 100–1000, wdth 25–151, opsz 8–144). ---------------------------------------------------------------- */ @font-face { font-family: "Roboto Flex Variable"; font-style: normal; font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap; src: url("/assets/fonts/RobotoFlex-Variable-latin.woff2") format("woff2-variations"); 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: "Roboto Flex Variable"; font-style: normal; font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap; src: url("/assets/fonts/RobotoFlex-Variable-latin-ext.woff2") format("woff2-variations"); 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; } }