/* ============================================================================= tokens.css v2 — miraBOOK Design-System nach Linear/Vercel/Stripe 2026 ----------------------------------------------------------------------------- Architektur: 1. PRIMITIVE — Brand-Farben, Spacing, Radii (theme-unabhängig) 2. SEMANTIC LIGHT — Cream Paper, off-black ink, soft shadows 3. SEMANTIC DARK — Warm Charcoal (NICHT #000), off-white ink, inset borders 4. SYSTEM-Theme — folgt prefers-color-scheme 5. TYPOGRAPHY — Inter Display + Inter + Geist Mono 6. MOTION — Spring-Easings, Linear-Standard 350ms cubic Verwendung: - Components nutzen NUR semantische Tokens (--surface-*, --ink-*, --accent-*) - Nie Primitive direkt referenzieren ============================================================================= */ /* ── 1. PRIMITIVE — Brand-Tokens (theme-unabhängig) ─────────────────────── */ :root { /* ──── Akzent-Farbe (1 pro Instanz, per config.php überschreibbar) ──── */ --brand-default: oklch(60% 0.18 250); /* Linear-Indigo */ /* ──── Charcoal-Layering Dark — warmes anthrazit, NICHT pure black ──── */ --charcoal-50: #f6f7f9; --charcoal-100: #eceef2; --charcoal-200: #d5d8de; --charcoal-300: #9ba0a8; --charcoal-400: #5f6470; --charcoal-500: #3d424c; --charcoal-600: #2b2f37; --charcoal-700: #1e242e; --charcoal-800: #151a21; --charcoal-900: #0b0d10; /* canvas dark — Linear-Standard */ --charcoal-950: #08090a; /* deepest */ /* ──── Cream Light — warm, niemals pure white ──── */ --cream-50: #fafaf7; /* paper */ --cream-100: #f0eee8; /* surface elevated */ --cream-200: #e6e3dc; /* divider */ /* ──── Status (perceptual, OKLCH) ──── */ --success: oklch(72% 0.17 155); --warning: oklch(80% 0.15 75); --danger: oklch(65% 0.21 25); /* ──── Spacing-Scale (4px base, Linear-Standard) ──── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ──── Border-Radius — Linear-Standard (6/12/16, NICHT 8/24) ──── */ --radius-sm: 4px; /* tags, badges */ --radius-md: 6px; /* buttons, inputs — der 2026er Premium-Wert */ --radius-lg: 12px; /* cards medium */ --radius-xl: 16px; /* cards large (rounded.xl) */ --radius-2xl: 24px; /* modals */ --radius-full: 9999px; /* ──── Motion — Linear-Easing-Standard ──── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* Linear-Magic */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: linear( 0, 0.0021, 0.0156, 0.0481, 0.105, 0.1864, 0.291, 0.4178, 0.7029 0.4844 0.5223, 0.9078 0.6478 0.6792, 1.0421 0.7757 0.8095, 1.0905 0.8632 0.9043, 1.0942 0.9134 0.9656, 1.0717 0.9396 0.9908, 1.0488 0.952, 1.0265 0.9598, 1.0061 0.9676, 0.9889 0.9744, 0.9747 0.9803, 0.9636 0.985, 0.9554 0.9889, 0.9499 0.9921, 0.9469 0.9947, 0.9461 0.9968, 0.9472 0.9984, 0.9499 0.9994, 0.9538 1, 0.9587, 0.9642, 0.9701, 0.9762, 0.9824, 0.9886, 0.9944, 1 ); --duration-instant: 100ms; --duration-quick: 200ms; --duration-standard: 350ms; /* Linear-Standard für Page-Transitions */ --duration-slow: 600ms; --duration-glacial: 1000ms; /* ──── Container ──── */ --container-app: 1280px; --container-widget: 920px; --container-narrow: 640px; } /* ── 2. SEMANTIC LIGHT (Cream Paper, off-black ink) ─────────────────────── */ :root, :root[data-theme="light"] { color-scheme: light; /* Surfaces — 4 Z-Layer */ --surface-canvas: var(--cream-50); /* page background */ --surface-elevated: #ffffff; /* cards */ --surface-sunken: var(--cream-100); /* sub-areas */ --surface-overlay: oklch(11% 0.005 250 / 0.4); /* modal backdrop */ /* Ink (text) — off-black für mehr Premium */ --ink-strong: oklch(18% 0.01 250); /* headings */ --ink-default: oklch(28% 0.01 250); /* body */ --ink-muted: oklch(48% 0.008 250); /* labels, hints */ --ink-subtle: oklch(65% 0.005 250); /* placeholders */ --ink-on-brand: #ffffff; /* Borders — perceptual gray */ --border-subtle: oklch(92% 0.003 250); --border-default: oklch(86% 0.005 250); --border-strong: oklch(72% 0.008 250); /* Brand-border: für Cards/Pills, per booking.js aus config.borderColor gesetzt */ --border-brand: var(--border-default); /* Accent — wird per config.php überschrieben pro Instanz */ --accent: var(--brand-default); --accent-hover: oklch(from var(--accent) calc(l - 8%) c h); --accent-soft: oklch(from var(--accent) 96% calc(c * 0.4) h); --accent-glow: oklch(from var(--accent) l c h / 0.18); --accent-contrast: var(--ink-on-brand); /* CTA-Button: dunklerer Akzent für 4.5:1 Kontrast mit weißer Schrift (WCAG-AA). */ --accent-press: oklch(from var(--accent) 52% c h); --accent-press-hover: oklch(from var(--accent) 46% c h); /* Status */ --status-success-bg: oklch(96% 0.04 155); --status-success-text: oklch(35% 0.13 155); --status-error-bg: oklch(96% 0.04 25); --status-error-text: oklch(40% 0.18 25); /* Shadows — Premium-2026 = sehr soft, mehrlagig */ --shadow-sm: 0 1px 2px 0 oklch(15% 0.01 250 / 0.04), 0 1px 1px 0 oklch(15% 0.01 250 / 0.02); --shadow-md: 0 4px 8px -2px oklch(15% 0.01 250 / 0.06), 0 2px 4px -1px oklch(15% 0.01 250 / 0.04); --shadow-lg: 0 12px 24px -8px oklch(15% 0.01 250 / 0.12), 0 4px 8px -2px oklch(15% 0.01 250 / 0.06); --shadow-xl: 0 24px 48px -12px oklch(15% 0.01 250 / 0.18), 0 8px 16px -4px oklch(15% 0.01 250 / 0.08); /* Borders via Inset-Shadow (Linear-Trick — schärfer als border) */ --shadow-inset-border: inset 0 0 0 1px var(--border-subtle); /* Focus-Ring */ --shadow-focus: 0 0 0 3px var(--accent-glow); /* Grid-Background (Vercel-Style, dezent) */ --grid-color: oklch(15% 0.01 250 / 0.04); } /* ── 3. SEMANTIC DARK (Warm Charcoal) ──────────────────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; --surface-canvas: var(--charcoal-900); /* #0b0d10 NICHT #000 */ --surface-elevated: var(--charcoal-800); /* #151a21 */ --surface-sunken: var(--charcoal-950); /* deeper */ --surface-overlay: oklch(0% 0 0 / 0.6); --ink-strong: oklch(96% 0.005 250); /* off-white */ --ink-default: oklch(88% 0.008 250); --ink-muted: oklch(65% 0.012 250); --ink-subtle: oklch(62% 0.012 250); /* WCAG-AA: ≥4.5:1 auf surface-canvas */ --ink-on-brand: #ffffff; /* Borders — Inset-Shadow simuliert (Linear-Trick) */ --border-subtle: oklch(100% 0 0 / 0.06); --border-default: oklch(100% 0 0 / 0.10); --border-strong: oklch(100% 0 0 / 0.18); --border-brand: var(--border-default); --accent: var(--brand-default); --accent-hover: oklch(from var(--accent) calc(l + 8%) c h); --accent-soft: oklch(from var(--accent) l calc(c * 0.5) h / 0.18); --accent-glow: oklch(from var(--accent) l c h / 0.24); --accent-contrast: oklch(8% 0.01 250); /* CTA-Button: dunklerer Akzent fuer WCAG-AA Kontrast mit Weiss. */ --accent-press: oklch(from var(--accent) 56% c h); --accent-press-hover: oklch(from var(--accent) 50% c h); --status-success-bg: oklch(72% 0.17 155 / 0.16); --status-success-text: oklch(78% 0.16 155); --status-error-bg: oklch(65% 0.21 25 / 0.16); --status-error-text: oklch(75% 0.18 25); /* Shadows im Dark — viel dunkler, kein subtle */ --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.4), 0 1px 1px 0 oklch(0% 0 0 / 0.2); --shadow-md: 0 4px 8px -2px oklch(0% 0 0 / 0.5), 0 2px 4px -1px oklch(0% 0 0 / 0.3); --shadow-lg: 0 12px 24px -8px oklch(0% 0 0 / 0.6), 0 4px 8px -2px oklch(0% 0 0 / 0.4); --shadow-xl: 0 24px 48px -12px oklch(0% 0 0 / 0.7), 0 8px 16px -4px oklch(0% 0 0 / 0.5); --shadow-inset-border: inset 0 0 0 1px var(--border-subtle); --shadow-focus: 0 0 0 3px var(--accent-glow); --grid-color: oklch(100% 0 0 / 0.025); } /* ── 4. SYSTEM-Theme (folgt prefers-color-scheme) ───────────────────────── */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --surface-canvas: var(--charcoal-900); --surface-elevated: var(--charcoal-800); --surface-sunken: var(--charcoal-950); --surface-overlay: oklch(0% 0 0 / 0.6); --ink-strong: oklch(96% 0.005 250); --ink-default: oklch(88% 0.008 250); --ink-muted: oklch(65% 0.012 250); --ink-subtle: oklch(62% 0.012 250); --ink-on-brand: #ffffff; --border-subtle: oklch(100% 0 0 / 0.06); --border-default: oklch(100% 0 0 / 0.10); --border-strong: oklch(100% 0 0 / 0.18); --accent-hover: oklch(from var(--accent) calc(l + 8%) c h); --accent-soft: oklch(from var(--accent) l calc(c * 0.5) h / 0.18); --accent-glow: oklch(from var(--accent) l c h / 0.24); --accent-contrast: oklch(8% 0.01 250); --accent-press: oklch(from var(--accent) 56% c h); --accent-press-hover: oklch(from var(--accent) 50% c h); --status-success-bg: oklch(72% 0.17 155 / 0.16); --status-success-text: oklch(78% 0.16 155); --status-error-bg: oklch(65% 0.21 25 / 0.16); --status-error-text: oklch(75% 0.18 25); --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.4); --shadow-md: 0 4px 8px -2px oklch(0% 0 0 / 0.5), 0 2px 4px -1px oklch(0% 0 0 / 0.3); --shadow-lg: 0 12px 24px -8px oklch(0% 0 0 / 0.6), 0 4px 8px -2px oklch(0% 0 0 / 0.4); --shadow-xl: 0 24px 48px -12px oklch(0% 0 0 / 0.7); --shadow-inset-border: inset 0 0 0 1px var(--border-subtle); --grid-color: oklch(100% 0 0 / 0.025); } } /* ── 5. TYPOGRAPHY — Inter Display + Inter + Geist Mono ─────────────────── */ :root { --font-display: 'Inter Display', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-thai: 'Sarabun', system-ui, sans-serif; /* Weights — der 2026er Premium-Trick: 510 statt 500 */ --weight-regular: 400; --weight-medium: 510; --weight-semibold: 590; --weight-bold: 700; /* Type-Scale — Linear-Standard (display/heading/body/caption) */ --text-caption-size: 11px; --text-caption-line: 1.4; --text-caption-tracking: 0.04em; --text-body-sm-size: 13px; --text-body-sm-line: 1.5; --text-body-size: 15px; --text-body-line: 1.55; --text-body-lg-size: 17px; --text-body-lg-line: 1.55; --text-heading-sm-size: 18px; --text-heading-sm-line: 1.35; --text-heading-sm-tracking: -0.012em; --text-heading-size: 22px; --text-heading-line: 1.25; --text-heading-tracking: -0.018em; --text-heading-lg-size: 28px; --text-heading-lg-line: 1.2; --text-heading-lg-tracking: -0.022em; --text-display-size: clamp(2rem, 4vw, 3rem); --text-display-line: 1.08; --text-display-tracking: -0.032em; } /* Thai: andere Metriken nötig */ [lang="th"] { font-family: var(--font-thai); --text-display-tracking: 0; --text-heading-tracking: 0; --text-heading-lg-tracking: 0; --text-display-line: 1.4; } /* ── 6. Smooth Theme-Transition ──────────────────────────────────────────── */ :root.theme-transitioning, :root.theme-transitioning *, :root.theme-transitioning *::before, :root.theme-transitioning *::after { transition: background-color var(--duration-standard) var(--ease-out), color var(--duration-standard) var(--ease-out), border-color var(--duration-standard) var(--ease-out), box-shadow var(--duration-standard) var(--ease-out) !important; } /* ── 7. Reduced-Motion respektieren (Premium-Pflicht) ───────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }