/* ==========================================================================
Heis-Website — Design Tokens
Single source of truth for color, typography, spacing, and layout.
Read by Claude Design when generating mockups; consumed by base.css and
all component styles. Never hard-code values that exist as a token here.
========================================================================== */
:root {
/* ---------- Brand color palette (raw) ---------- */
--color-oxford: #030027; /* Oxford Blue — primary dark, logo */
--color-pear: #CDE746; /* Pear — accent surfaces, splash, energy */
--color-pear-dark: #A6B74E; /* Pear Dark — deeper pear-tint for primary buttons on dark surfaces (Oxford, Marian) */
--color-marian: #3D3B8E; /* Marian Blue — secondary dark */
--color-marian-light: #9DB1D6; /* Marian Light — desaturated, slightly cooler tint of Marian for inline links and small accents on dark surfaces */
/* Marian-Blau-Duotone für In-Content-Fotos (About, Hörbeispiele, Kontakt),
direkt aufs ![]()
per filter — so klippt/skaliert der Tint mit dem Bild
(kein Overlay-Rahmen). Echter Duotone über den SVG-Filter #marian-duotone
(definiert in home_page.html): Schatten→Marian-Dunkel, Lichter→neutrales
Hell. Ton zentral dort über die feFunc-tableValues justierbar. */
--marian-duotone: url(#marian-duotone);
--color-cool-gray: #C9C8D6; /* Cool Gray — subtle backgrounds */
--color-cool-gray-dark: #B8B6C7; /* Cool Gray Dark — slightly muted variant, used as the lower stop of the nav-overlay gradient. */
--color-ivory: #FDFDED; /* Ivory — light surfaces, text on dark */
--color-page-bg: #1A1822; /* Page backdrop behind the slideshow — sits between Oxford and a dim slate so the fading slideshow has somewhere to fade *to* without showing pure Oxford. */
--color-spark: #F21B3F; /* Munsell Red — small accent only:
toplines, dots, rectangles, lines.
Never a button, never a flat surface. */
--color-spark-deep: #A9132C; /* Deeper Munsell tint — reserved for form-validation errors. Brand-adjacent, tuned for sufficient contrast on Ivory/Pear/Cool Gray. */
/* ---------- Semantic color aliases ---------- */
--color-bg: var(--color-ivory);
--color-fg: var(--color-oxford);
--color-bg-dark: var(--color-oxford);
--color-fg-on-dark: var(--color-ivory);
--color-bg-accent: var(--color-pear);
--color-bg-secondary: var(--color-marian);
--color-bg-subtle: var(--color-cool-gray);
/* ---------- Font families ---------- */
--font-display: "Unique", Georgia, serif; /* Headlines — Hero, H1 (and H2 if not using --font-ui) */
--font-body: "Dosis", system-ui, sans-serif; /* Body, H3, H4, longform — rounded, breathable */
--font-ui: "Asap Condensed", system-ui, sans-serif; /* Eyebrows, navigation, buttons, captions — real condensed family */
--font-accent: "Covered By Your Grace", cursive; /* Quotes, highlights, personal moments */
/* OpenType: Unique's ss01 swaps A E I M N U (+ accented forms) to the
low/wide alt1 glyph. Applied to all display copy by default; the
`unique_caps` template filter wraps word-initial caps in a span that
disables ss01, so they revert to Unique's tall, dramatic default glyph
at German-orthographic capitalization points. */
--feature-display: "ss01" 1;
/* ---------- Modular fluid scale ----------
One scale used for both font-size and spacing (Every Layout principle).
Range: viewport 320px → 1440px.
Approximates Major Third (~1.25), wider on top steps for cinematic
hero typography. Use --s* directly, or the semantic aliases below.
*/
--s-2: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem); /* 12 → 14 */
--s-1: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); /* 14 → 16 */
--s0: clamp(1.125rem, 1.054rem + 0.36vw, 1.25rem); /* 18 → 20 — body */
--s1: clamp(1.375rem, 1.286rem + 0.45vw, 1.5rem); /* 22 → 24 */
--s2: clamp(1.625rem, 1.464rem + 0.81vw, 1.875rem); /* 26 → 30 */
--s3: clamp(2rem, 1.714rem + 1.43vw, 2.5rem); /* 32 → 40 */
--s4: clamp(3rem, 2.286rem + 3.57vw, 4.25rem); /* 48 → 68 */
--s5: clamp(4rem, 2.286rem + 8.57vw, 7rem); /* 64 → 112 */
--s6: clamp(4rem, 2rem + 10vw, 11rem); /* 64 → 176 — hero */
/* ---------- Type scale ----------
Size-named (T-shirt) and decoupled from heading levels: any element can take
any visual size regardless of whether it is an //. Values carry
over 1:1 from the former semantic tokens (no visual change); --text-xl is the
one new step, filling the gap between 2xl and l (≈ ×1.5) for the subpage H2s.
Two role tokens (lead, button) sit off the ramp at their functional sizes. */
--text-3xl: clamp(6.5rem, 4.95rem + 6.88vw, 10rem); /* 104 → 160 — home hero H1. Mobile ~104 kept; steeper so tablet grows clearly (768→132, 1024→150) and desktop max 160. Lines are white-space:nowrap with room to spare, so no wrap. */
--text-2xl: clamp(4rem, 3.35rem + 3.2vw, 5.5rem); /* 64 → 88 — home section titles / subpage H1. Mobile ~66 at 390px (just under the measured 67px text-wrap:balance threshold) so the About heading "Modern interpretiert." renders as a clean two-liner on 390px+ phones; 360px stays 3 lines by choice. Tablet 768→78, desktop 88. */
--text-xl: clamp(3rem, 2.35rem + 3.1vw, 4.125rem); /* 48 → 66 — subpage H2 (Legal h2 "Haftungsausschluss"); steeper so the tablet mid-range (768→61) grows. Stays below 2xl. Size only — letter-spacing/stretch live at the usage site (.legal__prose h2). */
--text-l: clamp(1.5rem, 1.15rem + 1.1vw, 1.875rem); /* 24 → 30 — H3 scale (ALL h3): subpage H3, legal h3, .tile-subhead, .tile-h3, .partner__heading, .pull-quote. Mobile/tablet tuned for the H3s; desktop max capped at 30 (was running too large). Sits a clear step above --text-m, below --text-xl. */
--text-m: clamp(1.1875rem, 0.95rem + 1.05vw, 1.5625rem); /* 19 → 25 — H4 + real labels only (dt "Postanschrift", h4). One step below the H3 tier (--text-l). */
--text-lead: clamp(1.25rem, 1.16rem + 0.22vw, 1.375rem); /* 20 → 22 — intro lede (role, off the ramp). Mobile 20 kept; tablet/desktop flattened (768→20.3, 1440→~22) so the lede stays only a subtle step above the body there instead of running large. Decoupled from --s1 (which also drives spacing). */
--text-base: clamp(1.1875rem, 1rem + 0.55vw, 1.3125rem); /* 19 → 21 — body. Mobile floor lifted 18→19 (phones read a touch larger); tablet/desktop unchanged (preferred crosses the floor at ~545px, so 768→20.2, 1024→21 stay put). */
--text-button: clamp(0.99rem, 0.96rem + 0.16vw, 1.1rem); /* 15.84 → 17.6 — CTA label (role, locked to mock visual) */
--text-s: var(--s-1); /* 14 → 16 — small */
--text-xs: var(--s-2); /* 12 → 14 — caption */
/* ---------- Line heights ---------- */
--line-height-display: 0.8; /* hero — letters stack tight, like the reference */
--line-height-tight: 1.05; /* large headlines */
--line-height-snug: 1.2; /* sub-headlines */
--line-height-base: 1.6; /* body */
--line-height-loose: 1.8; /* long-form prose */
/* ---------- Letter spacing ---------- */
--tracking-tight: -0.02em;
--tracking-display: -0.01em; /* hero — Unique runs tight, lets the salt feature breathe */
--tracking-normal: 0;
--tracking-h3: 0.02em; /* H3 — a touch of openness on the condensed UI font (--font-ui) */
--tracking-wide: 0.05em; /* small caps labels, captions */
--tracking-spread: 0.10em; /* H2 — "gesperrt" but restrained */
--tracking-on-dark: 0.02em; /* Optical compensation: light text on dark surfaces appears tighter — small positive tracking restores the perceived spacing of the light counterpart. Apply to body/inline-links on dark sections. */
/* ---------- Word spacing ---------- */
--word-spacing-accent: -0.06em; /* handwriting accents only (--font-accent) — Covered By Your Grace spaces run a hair wide; pull them in slightly */
/* ---------- Font weights ----------
Keep UI weights on real installed cuts. Asap Condensed is self-hosted as
static 300/400/500/600/700 files, so tokens must resolve to discrete weights;
no variable-axis interpolation and no fractional compensation values. */
--weight-light-base: 300;
--weight-regular-base: 400;
--weight-medium-base: 500;
--weight-semibold-base: 600;
--weight-bold-base: 700;
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* ---------- Spacing aliases ---------- */
--space-3xs: clamp(0.5rem, 0.43rem + 0.3vw, 0.625rem); /* 8 → 10 — tightest, below the modular scale; for grouping related items */
--space-2xs: var(--s-2);
--space-xs: var(--s-1);
--space-sm: var(--s0);
--space-md: var(--s1);
--space-lg: var(--s2);
--space-xl: var(--s3);
--space-2xl: var(--s4);
--space-section: var(--s5);
/* ---------- Layout primitives ---------- */
--measure: 65ch; /* optimal line length for body text */
--container-max: 90rem; /* 1440px — viewport max */
--container-narrow: 45rem; /* 720px — text-heavy sections */
--gutter: var(--space-md);
/* ---------- Section / tile fluid layout ----------
Single fluid scale for section padding, tile inset, and inter-tile gaps —
driven by viewport width so the same values give a tight phone layout AND
a generous desktop frame. No media-query overrides needed; only layout
TOPOLOGY (grid spans) flips at the mobile bp.
Anchors:
320px viewport → ~1rem outer gutter, ~5svh vertical breathing
720px viewport → ~2rem outer gutter, ~10svh vertical breathing
1440px viewport → ~3rem outer gutter, ~14svh vertical breathing
*/
--section-pad-x: clamp(1rem, 0.55rem + 2.2vw, 3rem); /* 16 → 48 px */
/* Vertical padding for STANDALONE sections that use the base `.section` rule
(subpages). The home page's content sections don't use this — their inter-
section spacing is owned by the .section-stack gap (--section-gap) and their
own block padding is zeroed. Non-tile sections (partner) use --section-pad-x. */
--section-pad-block: calc(var(--section-pad-x) * 1.5); /* 1.5× sides */
/* Uniform spacing BETWEEN the home-page content sections, owned by the
.section-stack flex-gap (one value → every gap identical). Scales with
viewport HEIGHT — taller screens breathe more — with rem floor/ceiling so
it never collapses or runs away. */
--section-gap: clamp(4.5rem, 18svh, 15rem);
--header-height: clamp(3.6rem, 3.2rem + 2vw, 4.6rem); /* wordmark + tight padding */
--section-pad-y: clamp(3rem, 1rem + 10vw, 10rem); /* legacy: hero bottom + footer-banderole gap */
--tile-pad: clamp(1rem, 0.7rem + 1.5vw, 2rem); /* 16 → 32 px */
--tile-stack-gap: clamp(0.8rem, 0.5rem + 1.4vw, 1.6rem); /* 13 → 26 px */
/* About-Section: Foto-Breite der composite Intro-Tile. Load-bearing —
wird auch in .t-today als margin-inline-start referenziert, damit
Today's linke Kante exakt an der Foto-Endkante andockt. */
--about-photo-width: clamp(10rem, 6rem + 10vw, 17rem); /* 160 → 272 px */
/* Tile-Flyin: Initialversatz für das JS-getriggerte Reinfliegen.
Größerer Wert = mehr "Schwung" beim Einblenden. */
--tile-flyin-offset: 140px;
/* ---------- Sticky CTA rail ----------
The vertical "Say yes to Sax" booking button claims a fixed-width
strip on the right viewport edge. Content containers reserve this
space via padding-inline-end so the CTA never overlaps text.
Header/nav can opt out and run full viewport width — the button
sits visually below them. */
--cta-rail-width: clamp(2.5rem, 2.18rem + 1.43vw, 3.5rem); /* 40 → 56 px */
--cta-rail-gap: var(--space-xs); /* 14 → 16 px */
/* ---------- Radii ---------- */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-pill: 9999px;
/* ---------- Other primitives ---------- */
/* Radii and border primitives are intentionally static. Radii read at the
scale of their component (which itself is em-/clamp-sized); light outline
strokes use 1.5px where the optical weight needs to sit between 1 and 2px. */
--border-thin: 1px;
--border-button: 1.5px;
/* Outline buttons on LIGHT surfaces (dark line) need a hair more weight than
on dark (light line) — a dark stroke on light reads thinner than the
reverse. Used by the .btn--ghost-* variants whose stroke is the dark ink. */
--border-button-strong: 2px;
--focus-ring-color: var(--color-oxford);
/* Default for light surfaces. Dark surfaces re-point --focus-ring-color to
var(--color-marian-light) so the ring stays visible on Oxford/Marian — done
in the consolidated "Dark surfaces" rule in landing.css (light islands reset
it back to Oxford). Consumers read --focus-ring-color DIRECTLY (base.css
outline, site.css link rings) — there is intentionally no composite
--focus-ring token, which would freeze the colour at the root. */
/* ---------- Spark accent sizing ----------
Width of the thin Spark stripes used by .eyebrow--pin and topline
accents. The sticky-CTA edge is component-specific and uses its own
local --cta-edge-width. */
--spark-marker-width: 6px;
/* ---------- Transitions ---------- */
--transition-fast: 100ms ease;
--transition-base: 180ms ease;
/* ---------- Component shadows ---------- */
--shadow-pressed: 1px 1px 0 color-mix(in srgb, var(--color-oxford) 85%, transparent), 0 2px 6px color-mix(in srgb, var(--color-oxford) 12%, transparent);
/* Accent-text tilt angle — used by handwritten-accent elements
(.greeting-caveat, .ghost-quote, .closing-line). Lives as a token so
it can be tuned per breakpoint (smaller on mobile, see landing.css). */
--tilt-accent: -6deg;
}