/* ========================================================================== Gehlen Karriere — Design Tokens -------------------------------------------------------------------------- Single source of truth for the visual identity. Values are translated from the live site (karriere.gehlen-ing.de, Bricks global variables — frozen copy in .intake/live-site/). The live site runs on a 10px root (`6rem` = 60px); here the root stays 16px, so every size below is the px-equivalent, not the same rem number. Two-tier system: 1. Primitives — raw values (greys, scale steps). Stable. 2. Semantic — meaningful aliases (--color-bg, --color-ink, …) that components consume. Light-only: the live site has no dark mode and the design is monochrome on purpose. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES ---------------------------------------------------------------- */ /* Greys — the whole palette. No accent colour by design. */ --white: #ffffff; --black: #000000; --grey-94: #f0f0f0; /* page + chrome background */ --grey-90: #e6e6e6; --ink-25: hsl(0 0% 25%); /* body copy on the live site */ --ink-70: rgb(0 0 0 / 0.7); /* form borders / placeholders */ --ink-60: rgb(0 0 0 / 0.6); /* social icons resting */ --ink-50: rgb(0 0 0 / 0.5); /* contact box border */ --ink-10: rgb(0 0 0 / 0.1); /* hairline dividers */ --ink-05: rgb(0 0 0 / 0.05); /* Spacing — 5px-based, mirrors the Bricks rem steps at a 10px root */ --space-0: 0; --space-1: 0.3125rem; /* 5px */ --space-2: 0.625rem; /* 10px */ --space-3: 0.9375rem; /* 15px */ --space-4: 1.25rem; /* 20px */ --space-5: 1.875rem; /* 30px */ --space-6: 2.5rem; /* 40px */ --space-7: 3.125rem; /* 50px */ --space-8: 4.375rem; /* 70px */ --space-9: 6.25rem; /* 100px */ --space-10: 8.75rem; /* 140px */ /* Fluid section rhythm (live: 5rem@10px = 50px block, 10→50px inline) */ --section-space: var(--space-7); --container-gutter: clamp(1rem, 0.35rem + 3.3vw, 3.125rem); /* Type scale — px-equivalents of the live site */ --text-xs: 0.875rem; /* 14px — credit line */ --text-sm: 1rem; /* 16px — nav, meta tags, buttons */ --text-base: 1.125rem; /* 18px — body copy */ --text-lg: 1.25rem; /* 20px — hero lead */ --text-xl: 1.4375rem; /* 23px — contact name */ --text-2xl: 1.5625rem; /* 25px — card titles */ --text-3xl: clamp(2.25rem, 1.5rem + 2.5vw, 3.125rem); /* 36 → 50px — h2 */ --text-4xl: clamp(2.75rem, 1.75rem + 3.4vw, 3.75rem); /* 44 → 60px — h1 */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* Font weights — NeueDIN Cond ships 100–700 as static cuts */ --font-thin: 100; --font-xlight: 200; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Font families. Display = headings + the big statements; sans = everything else (body, buttons, card titles, nav). */ --font-display: "Neue DIN Cond", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; --font-sans: "Helvetica", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Radii */ --radius-none: 0; --radius-sm: 0.3125rem; /* 5px — highlight + job cards */ --radius-md: 0.625rem; /* 10px — job-page highlight items, inputs, "Mehr erfahren" */ --radius-lg: 0.9375rem; /* 15px — bubble buttons, contact box */ --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08); --shadow-md: 0 3px 8px rgb(0 0 0 / 0.10); /* button hover lift */ --shadow-lg: 0 6px 24px rgb(0 0 0 / 0.12); /* Motion — the live site uses one timing everywhere */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 450ms; --ease-standard: ease; --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* Layout containers */ --container-narrow: 45rem; /* 720px — prose / forms */ --container-default: 85.375rem; /* 1366px — the live container */ --container-wide: 85.375rem; /* same: the site has one width */ /* ---------------------------------------------------------------- 2. SEMANTIC ---------------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--grey-94); /* page */ --color-bg-chrome: var(--grey-94); /* header + footer */ --color-surface: var(--white); /* hero block, cards, boxes */ --color-bg-subtle: var(--grey-94); --color-bg-muted: var(--grey-90); --color-bg-inset: var(--white); --color-drawer: var(--grey-94); /* mobile nav drawer — light, same as the chrome */ /* Text */ --color-text: var(--ink-25); --color-ink: var(--black); /* headings, titles, nav, tags */ --color-text-muted: var(--ink-60); --color-text-subtle: var(--ink-50); --color-text-on-dark: var(--white); /* Borders */ --color-border: var(--black); /* cards are hairline-black on purpose */ --color-border-soft: var(--ink-50); --color-border-hairline: var(--ink-10); --color-border-input: var(--ink-70); /* "Accent" = ink. Links and buttons are black. */ --color-accent: var(--black); --color-accent-hover: var(--black); --color-accent-fg: var(--white); /* Feedback */ --color-focus-ring: var(--black); --color-selection-bg: var(--black); --color-selection-fg: var(--white); --color-error: hsl(351 80% 45%); --color-success: hsl(140 60% 32%); } /* ---------------------------------------------------------------- 3. WEB FONTS — self-hosted, client-licensed ---------------------------------------------------------------- */ @font-face { font-family: "Neue DIN Cond"; font-weight: 100; font-style: normal; font-display: swap; src: url("/assets/fonts/NeueDINCond-Thin.woff2") format("woff2"); } @font-face { font-family: "Neue DIN Cond"; font-weight: 200; font-style: normal; font-display: swap; src: url("/assets/fonts/NeueDINCond-XLight.woff2") format("woff2"); } @font-face { font-family: "Neue DIN Cond"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/NeueDINCond-Light.woff2") format("woff2"); } @font-face { font-family: "Neue DIN Cond"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/NeueDINCond-Regular.woff2") format("woff2"); } @font-face { font-family: "Neue DIN Cond"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/NeueDINCond-Medium.woff2") format("woff2"); } @font-face { font-family: "Neue DIN Cond"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/NeueDINCond-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Neue DIN Cond"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/NeueDINCond-Bold.woff2") format("woff2"); } @font-face { font-family: "Helvetica"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Helvetica-Regular.woff2") format("woff2"); } }