/* ========================================================================== Kaars | Schlichtmann — Design Tokens -------------------------------------------------------------------------- Single source of truth for the visual identity, ported from the live WordPress/Bricks site (design direction "Bestand", see project brief). Components consume the semantic tokens (section 2), never primitives. Light only — the live site has no dark variant (brief → Design direction). ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw values ---------------------------------------------------------------- */ /* Brand indigo (live: --primary + dark/light ramp) */ --indigo-100: #ebebf4; /* = indigo at 10 % on white (live section bg) */ --indigo-200: #d7d4e8; --indigo-300: #afa9d1; --indigo-400: #8982ba; --indigo-500: #625ca3; --indigo-600: #393a8d; /* brand */ --indigo-700: #302f6f; --indigo-800: #272654; --indigo-900: #1c1b37; /* Cool grey (live: --secondary ramp) */ --grey-100: #e6e7ea; --grey-200: #cbcdd2; --grey-300: #b2b5bd; --grey-400: #999da8; --grey-500: #828794; /* live footer grey */ --grey-600: #676b74; --grey-700: #4d4f56; --grey-800: #35373b; /* Neutral (live: text/surface tokens) */ --neutral-50: #f3f7ff; /* live --clr-bg */ --neutral-100: #e6e6e6; /* live --bg-body, hsl(0 0% 90%) */ --neutral-300: #eeeeee; /* hairlines in the mobile menu */ --neutral-600: #525051; /* live --accent — also the logo grey */ --neutral-700: #404040; /* live --text-body, hsl(0 0% 25%) */ --neutral-800: #333333; /* header text on light */ --red-600: #b42318; /* form errors (6.5:1 on white) */ --white: #ffffff; --black: #000000; /* 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 */ /* Fluid section rhythm (live: .brxe-section padding 30 → 60px / gutter 10 → 30px) */ --section-space: clamp(1.875rem, 1.2rem + 2.87vw, 3.75rem); --page-gutter: clamp(0.625rem, 0.2rem + 1.91vw, 1.875rem); /* Type scale — from the live site (DM Sans body 16px, Alumni Sans display). Fluid where the live one was; min ≈ 360px, max ≈ 1600px viewport. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: clamp(1.5rem, 1.43rem + 0.32vw, 1.75rem); /* 24 → 28px — card titles */ --text-3xl: clamp(1.5625rem, 1.45rem + 0.5vw, 1.875rem); /* 25 → 30px — tab titles */ --text-4xl: clamp(2.5rem, 2.31rem + 0.81vw, 3.125rem); /* 40 → 50px — section titles */ --text-5xl: clamp(2.5rem, 1.99rem + 2.26vw, 4.0625rem); /* 40 → 65px — hero title */ /* Line heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Font families — all self-hosted (DSGVO), see section 4 */ --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-display: "Alumni Sans", "Arial Narrow", var(--font-sans); --font-wordmark: "ChicagoFLF", var(--font-sans); /* hero "KAARS | SCHLICHTMANN" */ /* Radii */ --radius-none: 0; --radius-sm: 0.3125rem; /* 5px */ --radius-md: 0.625rem; /* 10px — images, cards */ --radius-lg: 1.25rem; /* 20px — feature cards */ --radius-xl: 1.875rem; --radius-full: 9999px; /* pill buttons — part of the identity */ /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08); --shadow-md: 0 2px 6px rgb(0 0 0 / 0.15); --shadow-lg: 0 3px 12px rgb(0 0 0 / 0.15); /* Motion */ --duration-fast: 100ms; --duration-normal: 300ms; --duration-slow: 500ms; --ease-standard: ease; --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* Layout containers */ --container-narrow: 38rem; /* 608px — prose */ --container-default: 85.375rem; /* 1366px — live page width */ --container-wide: 85.375rem; --container-gutter: var(--page-gutter); /* hook read by .container */ --header-height: 5rem; /* 80px desktop, 70px phone (see site-header.css) */ --logo-width: 17.5rem; /* 280px */ /* Breakpoints (reference only — @media uses literal values). phone ≤ 47.99rem (767px) · nav collapses below 68rem (1088px) */ /* ---------------------------------------------------------------- 2. SEMANTIC ---------------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--white); --color-bg-subtle: var(--indigo-100); /* tinted sections (Referenzen) */ --color-bg-muted: rgb(0 0 0 / 0.05); /* tab chips, feature cards */ --color-bg-inset: var(--white); --color-bg-footer: var(--grey-600); /* live #828794 lifted to 4.5:1 for white text */ /* Text */ --color-text: var(--neutral-700); --color-heading: var(--black); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--grey-600); --color-text-on-accent: var(--white); --color-text-on-dark: var(--white); /* Borders */ --color-border: rgb(0 0 0 / 0.3); --color-border-strong: var(--grey-400); /* Brand / accent */ --color-brand: var(--indigo-600); --color-accent: var(--indigo-600); --color-accent-hover: var(--indigo-700); --color-accent-fg: var(--white); /* Media overlay (hero: black 50 %) */ --color-overlay: rgb(0 0 0 / 0.5); /* Feedback */ --color-error: var(--red-600); --color-focus-ring: var(--indigo-600); --color-focus-ring-on-dark: var(--white); --color-selection-bg: var(--indigo-200); --color-selection-fg: var(--black); } /* ---------------------------------------------------------------- 4. WEB FONTS — self-hosted (woff2 from the live site, OFL; ChicagoFLF public domain). Licences in /assets/fonts/. ---------------------------------------------------------------- */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/dm-sans-300.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-sans-400.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/dm-sans-500.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/dm-sans-600.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/dm-sans-700.woff2") format("woff2"); } @font-face { font-family: "Alumni Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/alumni-sans-400.woff2") format("woff2"); } @font-face { font-family: "Alumni Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/alumni-sans-500.woff2") format("woff2"); } @font-face { font-family: "Alumni Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/alumni-sans-600.woff2") format("woff2"); } @font-face { font-family: "Alumni Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/alumni-sans-700.woff2") format("woff2"); } @font-face { font-family: "ChicagoFLF"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/chicagoflf.woff2") format("woff2"); } }