/* ========================================================================== Villa Restaurant Soemmerda - Design Tokens ========================================================================== Single Source of Truth fuer alle Designwerte. Praefix: --vr-* (Villa Restaurant) Auf :root gesetzt, ueberall verwendbar. ========================================================================== */ :root { /* === FARBEN ============================================================ */ /* Primary Granatapfel Burgund */ --vr-burgund: #6E1A24; --vr-burgund-tief: #4A0E18; --vr-burgund-hell: #8E2A36; /* Antikgold */ --vr-gold: #B8924A; --vr-gold-tief: #8E6E2E; --vr-gold-hell: #D4B070; /* Cremige Hintergruende */ --vr-creme: #F8F2E4; --vr-creme-tief: #EFE6D2; --vr-papier: #FBF7EE; /* Anthrazit (Text dunkel) */ --vr-anthrazit: #1A1410; --vr-anthrazit-soft: #2C2520; /* Akzente */ --vr-glut: #D9531E; --vr-blattgruen: #4A5238; /* Text */ --vr-text-dunkel: #1A1410; --vr-text-hell: #F8F2E4; --vr-text-muted: #6B5E50; /* Linien und Trenner */ --vr-linie: #C9B998; --vr-linie-soft: #E8DDC4; /* Status */ --vr-success: #4A6B3A; --vr-error: #A02830; --vr-warning: #B8924A; /* === SEMANTISCHE FARBEN (was wofuer) === */ --vr-bg-page: var(--vr-creme); --vr-bg-section: var(--vr-creme-tief); --vr-bg-card: var(--vr-papier); --vr-bg-dark: var(--vr-anthrazit); --vr-text-primary: var(--vr-anthrazit); --vr-text-secondary: var(--vr-anthrazit-soft); --vr-text-on-dark: var(--vr-creme); --vr-text-on-burgund: var(--vr-creme); --vr-accent-primary: var(--vr-burgund); --vr-accent-hover: var(--vr-burgund-tief); --vr-accent-detail: var(--vr-gold); --vr-link: var(--vr-burgund); --vr-link-hover: var(--vr-burgund-tief); --vr-link-visited: var(--vr-burgund-tief); /* === SCHRIFTEN ========================================================= */ --vr-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --vr-font-body: 'Lora', Georgia, 'Times New Roman', serif; --vr-font-hand: 'Caveat', 'Brush Script MT', cursive; --vr-font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* === TYPESCALE (Modular Scale 1.25 Major Third) ======================== */ --vr-text-xs: 0.75rem; /* 12 px */ --vr-text-sm: 0.875rem; /* 14 px */ --vr-text-base: 1rem; /* 16 px */ --vr-text-md: 1.125rem; /* 18 px */ --vr-text-lg: 1.25rem; /* 20 px */ --vr-text-xl: 1.5rem; /* 24 px */ --vr-text-2xl: 1.875rem; /* 30 px */ --vr-text-3xl: 2.25rem; /* 36 px */ --vr-text-4xl: 3rem; /* 48 px */ --vr-text-5xl: 3.75rem; /* 60 px */ --vr-text-6xl: 4.5rem; /* 72 px */ --vr-text-hero: clamp(2.5rem, 7vw, 5.5rem); /* fluid Hero */ /* === LINE HEIGHTS ====================================================== */ --vr-leading-tight: 1.15; --vr-leading-snug: 1.3; --vr-leading-normal: 1.5; --vr-leading-relaxed: 1.65; --vr-leading-loose: 1.85; /* === LETTER SPACING ==================================================== */ --vr-tracking-tight: -0.02em; --vr-tracking-normal: 0; --vr-tracking-wide: 0.02em; --vr-tracking-wider: 0.04em; --vr-tracking-widest: 0.08em; /* === FONT WEIGHTS ====================================================== */ --vr-fw-regular: 400; --vr-fw-medium: 500; --vr-fw-semibold: 600; --vr-fw-bold: 700; /* === SPACING SYSTEM (4px Grid) ========================================= */ --vr-space-4xs: 2px; --vr-space-3xs: 4px; --vr-space-2xs: 8px; --vr-space-xs: 12px; --vr-space-sm: 16px; --vr-space-md: 24px; --vr-space-lg: 32px; --vr-space-xl: 48px; --vr-space-2xl: 64px; --vr-space-3xl: 96px; --vr-space-4xl: 128px; /* === SECTION RHYTHMUS ================================================== */ --vr-section-pad-y: clamp(3rem, 8vw, 8rem); --vr-section-pad-x: clamp(1rem, 4vw, 3rem); --vr-section-gap: clamp(2rem, 5vw, 4rem); /* === BORDER RADIUS ===================================================== */ --vr-radius-none: 0; --vr-radius-xs: 2px; --vr-radius-sm: 4px; --vr-radius-md: 8px; --vr-radius-lg: 16px; --vr-radius-xl: 24px; --vr-radius-full: 9999px; /* === SCHATTEN ========================================================== */ --vr-shadow-xs: 0 1px 2px rgba(26, 20, 16, 0.05); --vr-shadow-sm: 0 1px 2px rgba(26, 20, 16, 0.08); --vr-shadow-md: 0 4px 12px rgba(26, 20, 16, 0.10); --vr-shadow-lg: 0 12px 24px rgba(26, 20, 16, 0.12); --vr-shadow-xl: 0 24px 48px rgba(26, 20, 16, 0.16); --vr-shadow-glow: 0 0 24px rgba(217, 83, 30, 0.30); --vr-shadow-burgund: 0 12px 24px rgba(110, 26, 36, 0.20); /* === BORDERS =========================================================== */ --vr-border-thin: 1px solid var(--vr-linie); --vr-border-medium: 2px solid var(--vr-linie); --vr-border-gold: 2px solid var(--vr-gold); --vr-border-burgund: 2px solid var(--vr-burgund); /* === CONTAINER WIDTHS ================================================== */ --vr-container-sm: 640px; --vr-container-md: 768px; --vr-container-lg: 1024px; --vr-container-xl: 1280px; --vr-container-2xl: 1536px; --vr-container-prose: 65ch; /* === BREAKPOINTS (als Variable nur fuer Doku, in Media Queries direkt) === sm 640px md 768px lg 1024px xl 1280px 2xl 1536px */ /* === TRANSITIONS ======================================================= */ --vr-trans-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --vr-trans-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --vr-trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --vr-trans-slower: 600ms cubic-bezier(0.4, 0, 0.2, 1); --vr-ease-in: cubic-bezier(0.4, 0, 1, 1); --vr-ease-out: cubic-bezier(0, 0, 0.2, 1); --vr-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* === Z INDEX SCALE ===================================================== */ --vr-z-base: 0; --vr-z-dropdown: 10; --vr-z-sticky: 20; --vr-z-overlay: 30; --vr-z-modal: 40; --vr-z-toast: 50; --vr-z-tooltip: 60; /* === ASPECT RATIOS ===================================================== */ --vr-ratio-square: 1 / 1; --vr-ratio-portrait: 3 / 4; --vr-ratio-landscape: 4 / 3; --vr-ratio-wide: 16 / 9; --vr-ratio-cinema: 21 / 9; --vr-ratio-hero: 3 / 2; /* === FOCUS STATE (Accessibility) ======================================= */ --vr-focus-ring: 2px solid var(--vr-gold); --vr-focus-offset: 3px; /* === MOTION TOKENS ===================================================== */ --vr-motion-glut-pulse: 2.4s; --vr-motion-flame-flicker: 1.6s; } /* ========================================================================== Reduced Motion Support ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --vr-trans-fast: 0ms; --vr-trans-base: 0ms; --vr-trans-slow: 0ms; --vr-trans-slower: 0ms; --vr-motion-glut-pulse: 0ms; --vr-motion-flame-flicker: 0ms; } } /* ========================================================================== Dark Mode (Phase 1 Setzung: Hell Modus fest, Dark Mode AUS) Dark Mode Tokens vorbereitet fuer Phase 2, deaktiviert in Phase 1. ========================================================================== */ /* @media (prefers-color-scheme: dark) { :root { --vr-bg-page: var(--vr-anthrazit); --vr-text-primary: var(--vr-creme); ... } } */