/* ========================================================================== Harrer & Harrer ZT — Design Tokens -------------------------------------------------------------------------- Single source of truth for the visual identity. The brand reads as a technical-editorial document: ink-blue dominant, accent yellow-green used as a redline mark, monospace numerals on stats and metadata, hairline rules with dimension-tick endcaps, generous whitespace. Two tiers: 1. Brand palette — named hexes from the visual identity. 2. Semantic tokens — meaningful aliases templates consume. Light-only project. Dark-mode rules removed; reintroduce later via a [data-theme="dark"] block if needed. WCAG NOTE — accent (#CACA10) on white fails AA at every size. Use accent only as: bg behind ink/coal text, decorative mark, focus ring, or hover tint. NEVER as text color on white. The system enforces this through `--color-text-on-accent: var(--color-coal)`. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. BRAND PALETTE ---------------------------------------------------------------- */ --color-ink: #26576A; /* primary brand — buttons, footer, scrolled header */ --color-coal: #1A2932; /* deepest — body text, hero overlay base */ --color-slate: #5B6B75; /* muted text, dimension-ticks, captions */ --color-stone: #E3E8EC; /* hairline borders */ --color-fog: #F4F6F8; /* alternate section bg */ --color-paper: #FFFFFF; /* canvas */ --color-accent: #CACA10; /* redline mark — see WCAG note above */ --color-danger: #B43534; --color-ok: #2E7D5C; /* Generated variants — keep templates from inventing colors. */ --color-ink-hover: color-mix(in oklab, var(--color-ink) 88%, black); --color-ink-tint: color-mix(in oklab, var(--color-ink) 8%, var(--color-paper)); --color-accent-hover: color-mix(in oklab, var(--color-accent) 90%, black); /* ---------------------------------------------------------------- 2. SEMANTIC TOKENS — what templates consume ---------------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--color-paper); --color-bg-subtle: var(--color-fog); --color-bg-muted: var(--color-stone); --color-bg-inset: var(--color-paper); --color-bg-invert: var(--color-ink); --color-bg-deep: var(--color-coal); /* Text */ --color-text: var(--color-coal); --color-text-muted: var(--color-slate); --color-text-subtle: color-mix(in oklab, var(--color-slate) 70%, var(--color-paper)); --color-text-on-ink: var(--color-paper); --color-text-on-accent: var(--color-coal); /* WCAG enforcement */ /* Borders / hairlines */ --color-border: var(--color-stone); --color-border-strong: color-mix(in oklab, var(--color-slate) 50%, var(--color-paper)); --color-line-tick: var(--color-slate); /* Brand actions */ --color-accent-fg: var(--color-coal); --color-focus-ring: var(--color-accent); --color-selection-bg: color-mix(in oklab, var(--color-accent) 60%, var(--color-paper)); --color-selection-fg: var(--color-coal); /* ---------------------------------------------------------------- 3. 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 */ /* ---------------------------------------------------------------- 4. TYPE — fluid scale ---------------------------------------------------------------- Editorial-leaning bumps: --text-4xl is hero-display, --text-5xl is landmark-display. Generated for ~360px → ~1280px viewport. */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* 12 → 13px */ --text-sm: clamp(0.875rem, 0.83rem + 0.21vw, 0.9375rem); /* 14 → 15px */ --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(1.875rem, 1.55rem + 1.61vw, 2.75rem); /* 30 → 44px */ --text-4xl: clamp(2.5rem, 1.82rem + 3.39vw, 4.375rem); /* 40 → 70px */ --text-5xl: clamp(3rem, 1.93rem + 5.36vw, 6rem); /* 48 → 96px */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* eyebrows, kategorie tags */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-black: 900; --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---------------------------------------------------------------- 5. RADII — minimal, architectural ---------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; /* ---------------------------------------------------------------- 6. SHADOWS — restrained, coal-tinted ---------------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgb(26 41 50 / 0.06); --shadow-md: 0 2px 8px 0 rgb(26 41 50 / 0.08), 0 1px 2px -1px rgb(26 41 50 / 0.06); --shadow-lg: 0 12px 32px -6px rgb(26 41 50 / 0.18), 0 4px 8px -4px rgb(26 41 50 / 0.08); --shadow-edge: inset 0 -1px 0 0 var(--color-stone); /* ---------------------------------------------------------------- 7. MOTION — fades + lifts only, no springs ---------------------------------------------------------------- */ --duration-fast: 140ms; --duration-normal: 240ms; --duration-slow: 400ms; --duration-slower: 640ms; --duration-slide: 1100ms; /* hero cross-fade */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ---------------------------------------------------------------- 8. LAYOUT — containers, gutters ---------------------------------------------------------------- */ --container-narrow: 38rem; /* 608 */ --container-default: 64rem; /* 1024 */ --container-wide: 80rem; /* 1280 */ --container-edge: 90rem; /* 1440 — chrome edge */ --gutter: clamp(1rem, 4vw, 2.5rem); --header-h: 4.5rem; /* fixed header height — hero offsets by this */ } /* ---------------------------------------------------------------- WEB FONTS — self-hosted Figtree Variable ---------------------------------------------------------------- */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/Figtree-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: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/Figtree-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; } }