/* ============================================================================ golfbooking — tokens.css Golf-Ökosystem-Variante des gnuso Design-Systems. Modell (aus gnuso übernommen): eine gemeinsame OKLCH-Lightness/Chroma-Kurve; eine "Welt" = ein Hue + ein Chroma-Maximum. Golf-Welt = Hue 148, C-max ~0.12 (natürliches Fairway-Grün, bewusst gedämpfter als das satte Success-Grün). Ebenen: Primitive → Semantic → Component. Komponenten in style.css zeigen NUR auf die semantischen Tokens hier — nie auf Hex. THEMING-VERTRAG: Genau ZWEI Dinge sind pro Club überschreibbar und werden serverseitig in den injiziert: --club-primary (+ ein Club-Logo-Bild und der Clubname als Inhalt, nicht als Token). ALLES ANDERE ist fix. Hover / Active / Tint / Fokus-Ring / On-Primary-Textfarbe werden aus --club-primary ABGELEITET (CSS relative color), damit ein Club Layout oder Kontrast nicht brechen kann. ============================================================================ */ :root { /* ---- CLUB-ÜBERSCHREIBBAR (nur diese Zeile pro Club injizieren) ------------ Default: Golf-Fairway-Grün ≈ #32753f. Empfehlung an Clubs: mittleres bis dunkles Marken-Grün/-Blau (Lightness < 0.6), dann bleibt weiße Schrift darauf automatisch AA. Bei helleren Farben kippt --on-primary automatisch auf dunklen Text (siehe Ableitung unten). */ --club-primary: oklch(0.505 0.108 148); /* ---- ABGELEITET aus --club-primary — NICHT pro Club überschreiben --------- */ --color-primary: var(--club-primary); --color-primary-hover: oklch(from var(--club-primary) calc(l - 0.06) c h); --color-primary-active: oklch(from var(--club-primary) calc(l - 0.11) c h); /* zarte Füllung für ausgewählte/aktive Flächen (welt-getönt, immer hell) */ --color-primary-tint: oklch(from var(--club-primary) 0.95 min(c, 0.05) h); --color-primary-tint-border: oklch(from var(--club-primary) 0.86 min(c, 0.07) h); /* Auto-Kontrast-Text auf Primary: L<0.62 -> nahezu weiß, sonst dunkel. clamp((0.62 - l) * 100) schaltet hart, bleibt aber gültiges CSS. */ --color-on-primary: oklch(from var(--club-primary) clamp(0.05, (0.62 - l) * 100, 0.98) 0 h); --color-ring: oklch(from var(--club-primary) 0.72 min(c, 0.12) h); --color-link: var(--color-primary-hover); --color-link-hover: var(--color-primary-active); /* ---- FIXE FARB-PRIMITIVE (Golf-Welt, welt-getönte Neutrals) --------------- Hex-Referenz in Klammern für Nicht-OKLCH-Tools. */ --color-ink: oklch(0.26 0.02 150); /* #1d271f Primärtext */ --color-text: var(--color-ink); --color-muted: oklch(0.52 0.014 150); /* #636b65 Sekundärtext */ --color-bg: oklch(0.975 0.006 140); /* #f5f8f4 Paper / Seite */ --color-surface: oklch(0.995 0.003 140); /* #fcfefc Cards, erhöhte Fläche*/ --color-surface-2: oklch(0.965 0.006 145); /* leicht abgesetzte Fläche */ --color-border: oklch(0.9 0.008 150); /* #dadfdb Trennlinien, Ränder */ --color-border-strong: oklch(0.82 0.01 150); /* Signal / Status — global, NIE Markenfarbe (aus gnuso-Status-Ramps) */ --color-warn: oklch(0.78 0.11 85); /* #d8b260 warmes Gold */ --color-warn-surface: oklch(0.945 0.06 85); /* #ffebc0 */ --color-warn-border: oklch(0.85 0.09 85); --color-warn-ink: oklch(0.42 0.09 70); --color-error: oklch(0.5 0.17 27); /* #b02b27 */ --color-error-surface: oklch(0.955 0.03 27); /* #ffe9e5 */ --color-error-border: oklch(0.86 0.08 27); --color-success: oklch(0.55 0.14 150); --color-success-surface: oklch(0.95 0.05 150); --color-success-border: oklch(0.84 0.08 150); /* ---- TYPOGRAFIE (gnuso Foundations) -------------------------------------- Selbst-Hosting-Hinweis: in Prod NICHT auf Google-Fonts-CDN verlassen. Bricolage Grotesque / Hanken Grotesk / JetBrains Mono als woff2 unter static/fonts/ ablegen und per @font-face einbinden (siehe style.css). */ --font-display: 'Bricolage Grotesque', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type-Scale · 1.25 Major Third, 16px Basis */ --text-display: 2.75rem; /* 44px — Hero, Clubname groß */ --text-h1: 2.25rem; /* 36px */ --text-h2: 1.75rem; /* 28px */ --text-h3: 1.375rem; /* 22px */ --text-title: 1.25rem; /* 20px */ --text-lg: 1.125rem; /* 18px */ --text-base: 1rem; /* 16px — Body, min. für Fließtext */ --text-sm: 0.875rem; /* 14px — Labels */ --text-xs: 0.75rem; /* 12px — Captions, min. erlaubt */ --leading-tight: 1.1; --leading-snug: 1.35; --leading-normal:1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ---- SPACING · 4px-Basis --------------------------------------------------*/ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10:2.5rem; /* 40 */ --space-12:3rem; /* 48 */ --space-16:4rem; /* 64 */ /* ---- LAYOUT ---------------------------------------------------------------*/ --container-max: 1160px; --container-narrow: 780px; /* Formulare, Fließtext */ --touch-min: 2.75rem; /* 44px Mindest-Touch-Target */ /* ---- RADII ----------------------------------------------------------------*/ --radius-sm: 6px; /* Badges, kleine Chips */ --radius-md: 10px; /* Inputs, Buttons */ --radius-lg: 16px; /* Cards */ --radius-xl: 22px; /* Sheets, große Panels */ --radius-full: 999px; /* Pills, Avatare */ /* ---- ELEVATION · weiche grün-getönte Schatten ----------------------------*/ --shadow-e1: 0 1px 2px oklch(0.3 0.03 150 / 0.06), 0 2px 6px -2px oklch(0.3 0.03 150 / 0.08); --shadow-e2: 0 2px 4px oklch(0.3 0.03 150 / 0.06), 0 8px 16px -6px oklch(0.3 0.03 150 / 0.14); --shadow-e3: 0 4px 8px oklch(0.3 0.03 150 / 0.08), 0 16px 28px -10px oklch(0.3 0.03 150 / 0.18); --shadow-e4: 0 8px 16px oklch(0.3 0.03 150 / 0.1), 0 28px 52px -18px oklch(0.3 0.03 150 / 0.26); /* ---- MOTION ---------------------------------------------------------------*/ --motion-instant: 120ms; --motion-standard:200ms; --motion-emphasis:280ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasis: cubic-bezier(0.3, 0, 0, 1); }