/* ========================================================================== PLANTEAM b&k — Design Tokens -------------------------------------------------------------------------- Two-tier system: 1. Primitives — raw values (color ramps, scales). 2. Semantic — meaningful aliases (--color-bg, --color-accent, etc). Project palette: warm cream surfaces, deep ink text, single-accent #bd0000. Document-quality, editorial-engineering. Light theme only — Phase 8 decides whether to ship a dark theme. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw values ---------------------------------------------------------------- */ /* Ink ramp — warm-neutral charcoals (slight yellow undertone keeps text feeling printed-on-paper, not LCD-cold). */ --ink-50: #f7f4ed; --ink-100: #ece6d7; --ink-200: #d6cdb8; --ink-300: #a89e8b; --ink-400: #7d7361; --ink-500: #5a5240; --ink-600: #3f3a2d; --ink-700: #2a2620; --ink-800: #1c1915; --ink-900: #14110d; --ink-950: #0a0907; /* Cream ramp — page surface family. Warmer than ink-50 ramp so hero cream contrasts subtly with section bands. */ --cream-50: #fbf8f1; /* page bg */ --cream-100: #f5f0e3; /* subtle band */ --cream-200: #ece5d2; /* muted divider band */ /* Accent — single-hue, used sparingly. */ --accent-100: #f4dada; --accent-500: #d52020; --accent-600: #bd0000; /* the brand red */ --accent-700: #8e0000; --white: #ffffff; --black: #000000; /* Spacing — hybrid 4-then-doubling scale. */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; --space-12: 16rem; /* Fluid type scale — serif headlines run a touch tighter at the max than the Inter-only default since serifs feel larger at parity. */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* 12 → 13 */ --text-sm: clamp(0.8125rem,0.78rem + 0.18vw, 0.875rem); /* 13 → 14 */ --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.375rem, 1.24rem + 0.65vw, 1.625rem); /* 22 → 26 */ --text-2xl: clamp(1.75rem, 1.50rem + 1.25vw, 2.25rem); /* 28 → 36 */ --text-3xl: clamp(2.25rem, 1.78rem + 2.34vw, 3.25rem); /* 36 → 52 */ --text-4xl: clamp(2.75rem, 2.10rem + 3.21vw, 4.25rem); /* 44 → 68 */ --text-display: clamp(3.25rem, 2.30rem + 4.75vw, 5.5rem); /* 52 → 88 */ /* Line heights — serifs need a hair more air than sans. */ --leading-tight: 1.08; --leading-snug: 1.20; --leading-normal: 1.55; --leading-relaxed: 1.70; /* Letter spacing */ --tracking-tightest: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-widest: 0.22em; /* Font weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Font families. Source Serif 4 (variable, weights 400–600) for headlines; Inter Variable for body and UI; system mono. Design uses upright only — no italics anywhere. */ --font-serif: "Source Serif 4", Cambria, Georgia, "Times New Roman", serif; --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; /* Radii — engineering files don't have round corners. Keep mostly square. sm exists for input fields and pill tags only. */ --radius-none: 0; --radius-sm: 0.1875rem; --radius-md: 0.375rem; --radius-pill: 9999px; /* Hairlines — the structural device. Width tokens we reference all over. */ --rule-hair: 1px; --rule-thin: 1.5px; --rule-thick: 2px; /* Shadows — barely there. Document, not card. */ --shadow-sm: 0 1px 0 0 rgb(20 17 13 / 0.04); --shadow-md: 0 2px 8px -2px rgb(20 17 13 / 0.06); /* Motion */ --duration-fast: 140ms; --duration-normal: 220ms; --duration-slow: 420ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* Layout containers */ --container-narrow: 44rem; /* 704px — prose */ --container-default: 72rem; /* 1152px — main */ --container-wide: 90rem; /* 1440px — hero / filler-strip overlay */ /* ---------------------------------------------------------------- 2. SEMANTIC — light theme (only theme this project ships) ---------------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--cream-50); --color-bg-subtle: var(--cream-100); --color-bg-muted: var(--cream-200); --color-bg-inset: var(--white); --color-bg-deep: var(--ink-900); /* full-bleed dark band */ /* Text */ --color-text: var(--ink-900); --color-text-strong: var(--ink-950); --color-text-muted: var(--ink-500); --color-text-subtle: var(--ink-400); --color-text-on-accent: var(--cream-50); --color-text-on-dark: var(--cream-50); /* Borders */ --color-border: var(--ink-200); --color-border-strong: var(--ink-300); --color-border-ink: var(--ink-900); /* Accent */ --color-accent: var(--accent-600); --color-accent-hover: var(--accent-700); --color-accent-fg: var(--cream-50); --color-accent-wash: var(--accent-100); /* Feedback */ --color-focus-ring: var(--accent-600); --color-selection-bg: var(--accent-100); --color-selection-fg: var(--ink-900); } /* ---------------------------------------------------------------- 3. SELF-HOSTED FONTS Inter Variable (body, UI) + Source Serif 4 Variable (headlines). Both shipped from /assets/fonts/. DSGVO baseline: no Google Fonts CDN in production. Unicode ranges below mirror Google Fonts' latin and latin-ext subset boundaries. ---------------------------------------------------------------- */ @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; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/SourceSerif4-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: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/SourceSerif4-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; } }