/* ========================================================================== Jaeger Template — Design Tokens -------------------------------------------------------------------------- Single source of truth for the visual identity. Re-theme a project by editing this file only — components and base styles consume semantic tokens, never primitives directly. Two-tier system: 1. Primitives — raw values (color ramps, scales). Stable. 2. Semantic — meaningful aliases (--color-bg, --color-accent, etc). Single light theme (the brief rules out dark mode). ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw values ---------------------------------------------------------------- */ /* Werkliste greys — the old site's palette (brief → Design direction). Names follow the draft's --clr-* variables. */ --grey-og: #666666; /* text, headings */ --grey: #363636; /* links, nav */ --grey-dark: #1c1c1c; /* hover / current */ --grey-light: #969696; /* logo square — decorative only (2.9:1 on white) */ --grey-meta: #767676; /* the draft's light grey, darkened to 4.5:1 for text */ --grey-shadow: #ababab; /* header shadow */ --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 */ /* Draft spacing (10 px root there, 16 px here — values converted). */ --space-draft-xs: 0.625rem; /* 10px — header padding, meta column gap */ --space-draft-s: 1.25rem; /* 20px — gallery gap, paragraph gap */ --space-draft-m: 1.875rem; /* 30px — grid gap, nav gap */ --space-draft-l: 3.125rem; /* 50px — text / meta blocks after gallery */ /* Section rhythm — the draft's clamp: 50 → 70 px (vertical) and 20 → 30 px (sides) between 360 and ~1400 px viewport. */ --section-space: clamp(3.125rem, 2.7426rem + 1.912vw, 4.375rem); --container-gutter: clamp(1.25rem, 0.2435rem + 1.912vw, 1.875rem); /* Type scale — fixed sizes, as on the old site (no fluid scaling). */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px — nav, footer, meta, Ort */ --text-md: 0.9375rem; /* 15px — project title in the grid */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.25rem; /* 20px — mobile menu */ --text-xl: 1.5rem; /* 24px — prev/next arrows */ --text-2xl: 2rem; /* 32px — page title */ --text-3xl: 2.75rem; --text-4xl: 3.75rem; --text-5xl: 5.25rem; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-heading: 1.4; /* the old site's heading line-height */ /* Letter spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* Font weights — Century Gothic ships in 400 only. */ --font-light: 400; --font-normal: 400; --font-medium: 400; --font-semibold: 400; --font-bold: 700; /* Font families */ --font-sans: "Century Gothic", "URW Gothic", "Avant Garde", "Futura", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-display: var(--font-sans); /* Radii */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.625rem; /* 10px — mobile menu panel */ --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Shadows */ --shadow-header: 0 0 8px 0 var(--grey-shadow); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); /* Motion */ --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); --ease-in: ease-in; /* Layout containers */ --container-narrow: 38rem; /* 608px — prose */ --container-default: 68.75rem; /* 1100px — the draft's container */ --container-wide: 80rem; /* 1280px */ /* Header */ --logo-size: 3.75rem; /* 60px */ /* Breakpoints (reference only — @media uses literal values). The draft's Bricks breakpoints: 991px (tablet), 767px (phone landscape → mobile menu), 478px (phone portrait). */ /* ---------------------------------------------------------------- 2. SEMANTIC — single light theme (no dark variant, see brief) ---------------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--white); --color-bg-subtle: #f5f5f5; --color-bg-muted: #e8e8e8; --color-bg-inset: var(--white); /* Text */ --color-text: var(--grey-og); --color-text-muted: var(--grey); --color-text-subtle: var(--grey-meta); --color-text-on-accent: var(--white); /* Borders */ --color-border: #dddddd; --color-border-strong: var(--grey-og); /* Accent — links and interactive text */ --color-accent: var(--grey); --color-accent-hover: var(--grey-dark); --color-accent-fg: var(--white); /* Feedback */ --color-focus-ring: var(--grey-dark); --color-selection-bg: var(--grey-og); --color-selection-fg: var(--white); /* Lightbox */ --color-overlay: rgb(0 0 0 / 0.9); --color-overlay-control: rgb(0 0 0 / 0.5); --color-scrim-light: rgb(255 255 255 / 0.85); } /* ---------------------------------------------------------------- 3. WEB FONT — Century Gothic, client-licensed, self-hosted. Latin subset (Latin-1 + dashes/quotes/€), regular weight only. ---------------------------------------------------------------- */ @font-face { font-family: "Century Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/CenturyGothic-Regular.woff2") format("woff2"); } }