/* * MWFewoManager * * @author Küstenweb GmbH * @copyright mwfewomanager.de */ :root { --font-family-sans-serif: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; --font-size-base: 16px; --line-height: 1.5; /* Core */ /* DIE HAUSFARBE. Ein Wert, eine Stelle. * * Jeder Ersatzwert im Frontend (`var(--color-primary, …)`) trägt * genau diesen Ton. Das klingt nach Kosmetik und ist es nicht: * Der Ersatzwert greift immer dann, wenn diese Datei NICHT geladen * ist — auf der öffentlichen Webseite einer Instanz ohne Skeleton * zum Beispiel. Vorher standen dort SECHS verschiedene Werte: * #0071c2 (13×), #2f6fe4 (9×), #7dbb5b (2×, grün), #0b6ab0, #0072ce. * Zwei davon unterschieden sich um eine Ziffer, einer war eine * völlig andere Farbe. * * Wer den Ton ändert, ändert ihn hier — und lässt * `python3 tools/css-token-lint.py` laufen. */ --color-primary: #0072ce; --color-primary-hover: #005fa3; --color-secondary: #6b7280; --color-secondary-hover: #4b5563; --color-bg: #ffffff; --color-surface: #ffffff; --white: #ffffff; --border-color: #e3e8ee; --color-border: var(--border-color); --color-text: #1f2937; --color-muted: #6b7280; /* Forms */ --form-label-color: var(--color-text); --color-success: #10b981; --color-danger: #ef4444; --color-warning: #f59e0b; --color-info: #3b82f6; /* Akzentfarbe (z.B. Sterne/Bewertungen, Highlights) */ --color-accent: #f59e0b; --color-accent-hover: #d97706; /* Flächen / Text-Aliase */ --color-surface-alt: #f8fafc; --color-text-muted: var(--color-muted); /* -------------------------------------------------- Skalen (Radius / Schatten / Abstände / Schriftgrößen) Diese Tokens werden von den Bundle-Komponenten genutzt und können im Theme (theme.css) per Token-Brücke auf die eigene Palette gemappt werden — siehe theme.css. -------------------------------------------------- */ /* Radius-Skala */ --radius-sm: 6px; --radius-md: 12px; --radius-card: 16px; --border-radius: 8px; --radius-button: var(--border-radius); --radius-lg: 16px; --radius-pill: 999px; /* Schatten-Skala * * `--shadow-color` ist der TON, nicht der Schatten: die Farbe, aus der * eine Komponente ihren eigenen Schatten mischt, wenn sie eine andere * Geometrie braucht als die vier Stufen darunter (die Buchungsstrecke * tut das für ihre Karte und für die Leiste am unteren Rand, die nach * oben wirft). Ohne diesen Namen stünde dort ein festes `rgba(…)`, und * auf einer warm getönten Seite läge unter jeder Karte ein kalter * grauer Rand. Ein Theme, das seine Schatten einfärbt, hängt hier um. */ --shadow-color: #0f172a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05); --shadow-md: 0 6px 14px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .05); --shadow-lg: 0 18px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06); --shadow-card: 0 4px 12px rgba(0, 0, 0, .08); /* Abstands-Skala (4px-Raster) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Schriftgrößen-Skala (T-Shirt-Sizes, ergänzend zu --font-size-h1..h6) */ --font-size-xs: 0.8125rem; --font-size-sm: 0.9375rem; --font-size-md: 1.0625rem; --font-size-lg: 1.25rem; --font-size-xl: 1.625rem; --font-size-2xl: 2.125rem; --font-size-3xl: 2.75rem; /* Layout / Motion */ --container: 1200px; --transition: 200ms cubic-bezier(.2, .7, .3, 1); /* -------------------------------------------------- Picker Tokens (shared) -------------------------------------------------- */ /* Tooltip (Datepicker) */ --tooltip-bg: var(--color-text); --tooltip-fg: var(--white); /* -------------------------------------------------- Calendar Theme Tokens (project overrides) -------------------------------------------------- */ --calendar-cell-width: 46px; --calendar-cell-height: 46px; --calendar-check-label-fg: var(--white); --calendar-price-on-check-fg: var(--white); --calendar-day-hover-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); /* === Kalenderfarben: Hintergründe === * * EIN SATZ WERTE FÜR ALLE KALENDER. Diese Tokens tragen den * Gast-Datepicker der Buchungsstrecke UND die beiden Kalender im * Eigentümer-Login (Übersichtsraster und Monatskalender je Objekt). * Vorher hatte jede Fläche ihre eigene Palette: Ein freier Tag war * beim Gast zartgrün und beim Eigentümer weiss, eine Eigenbelegung * dort zartorange und hier lila. Wer beides an einem Tag ansieht, * hält das für zwei verschiedene Auskünfte. * * `reserved` ist der Zustand, den nur der Eigentümer sieht: Für den * Gast ist eine Reservierung so gut wie gebucht, für den Eigentümer * ist sie der Unterschied zwischen „sicher" und „noch nicht". */ --calendar-bg-free: #eaf7ef; --calendar-bg-booked: #f6d2d2; --calendar-bg-reserved: #ffe0cc; --calendar-bg-blocked: #e0e0e0; --calendar-bg-owner: #ffe5b4; --calendar-bg-edit: #fff7d1; --calendar-bg-selected: #eaf3ff; --calendar-bg-check: #0072ce; /* === Kalenderfarben: Schrift/Iconfarben === */ --calendar-fg-free: #46594d; --calendar-fg-booked: #e2a1a1; --calendar-fg-reserved: #e8a97a; --calendar-fg-blocked: #bcbcbc; --calendar-fg-owner: #f3b97e; --calendar-fg-edit: #f0c36d; --calendar-fg-selected: #82b5f7; --calendar-fg-check: #fff; /* === Kalenderfarben: Rahmen (Borders) === */ --calendar-border-free: #b3dfc1; --calendar-border-booked: #e2a1a1; --calendar-border-reserved: #e8a97a; --calendar-border-blocked: #bcbcbc; --calendar-border-owner: #f3b97e; --calendar-border-edit: #f0c36d; --calendar-border-selected: #82b5f7; --calendar-border-check: #0059a8; /* -------------------------------------------------- Headings (Typography Tokens) -------------------------------------------------- */ --font-family-heading: var(--font-family-sans-serif); --heading-color: var(--color-text); --font-size-h1: 2rem; --font-size-h2: 1.75rem; --font-size-h3: 1.5rem; --font-size-h4: 1.25rem; --font-size-h5: 1.125rem; --font-size-h6: 1rem; /* -------------------------------------------------- Links (Color Tokens) -------------------------------------------------- */ --link-color: var(--color-primary); --link-hover-color: var(--color-primary-hover); --link-visited-color: color-mix(in srgb, var(--color-primary) 70%, #6b7280); --link-active-color: var(--color-primary-hover); --link-decoration: underline; --link-hover-decoration: underline; --link-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); /* -------------------------------------------------- Buttons (Color Tokens) -------------------------------------------------- */ /* Primary */ --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-hover); --btn-primary-text: var(--white); --btn-primary-text-hover: var(--white); --btn-primary-border: var(--color-primary); /* Secondary */ --btn-secondary-bg: var(--color-secondary); --btn-secondary-bg-hover: var(--color-secondary-hover); --btn-secondary-text: var(--white); --btn-secondary-text-hover: var(--white); --btn-secondary-border: var(--color-secondary); /* Clear */ --btn-clear-bg: transparent; --btn-clear-text: var(--color-muted); --btn-clear-border: var(--border-color); /* Cancel */ --btn-cancel-bg: transparent; --btn-cancel-text: var(--color-text); --btn-cancel-border: var(--border-color); /* Apply (Success) */ --btn-apply-bg: var(--color-success); --btn-apply-bg-hover: color-mix(in srgb, var(--color-success) 85%, #000 10%); --btn-apply-text: var(--white); --btn-apply-text-hover: var(--white); --btn-apply-border: var(--color-success); /* Book */ --btn-book-bg: var(--color-primary); --btn-book-bg-hover: var(--color-primary-hover); --btn-book-text: var(--white); --btn-book-text-hover: var(--white); --btn-book-border: var(--color-primary); /* Request */ --btn-request-bg: var(--color-warning); --btn-request-bg-hover: color-mix(in srgb, var(--color-warning) 85%, #000 10%); --btn-request-text: var(--white); --btn-request-text-hover: var(--white); --btn-request-border: var(--color-warning); /* Danger */ --btn-danger-bg: var(--color-danger); --btn-danger-bg-hover: color-mix(in srgb, var(--color-danger) 85%, #000 10%); --btn-danger-text: var(--white); --btn-danger-text-hover: var(--white); --btn-danger-border: var(--color-danger); /* Increment / Decrement (Stepper) */ --btn-stepper-bg: var(--color-surface); --btn-stepper-bg-hover: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); --btn-stepper-text: var(--color-text); --btn-stepper-border: var(--border-color); --btn-stepper-size: calc(1.5em + 1.5rem); }