/** * Belle Maison - Global CSS Variables * * Zentrale Design-System-Quelle für alle Theme-Komponenten und Custom Elements * WICHTIG: Alle Custom Elements und Plugins MÜSSEN diese Variablen verwenden! * * Version: 1.0.0 * Last Updated: 2026-01-23 */ :root { /* ============================================ COLORS - Brand Identity ============================================ */ /* Primary Colors */ --mm-color-primary: 242, 211, 212; /* #f2d3d4 */ /* Secondary Colors */ --mm-color-secondary: 233, 243, 250; /* #e9f3fa */ /* Neutral Colors */ --mm-color-white: 255, 255, 255; /* #ffffff */ --mm-color-gray: 159, 159, 159; /* #9f9f9f */ --mm-color-gray-light: 207, 205, 205; /* #cfcdcd */ --mm-color-gray-lighter: 228, 227, 227; /* #e4e3e3 */ /* Background Colors */ --mm-bg-primary: 255, 255, 255; /* #ffffff */ --mm-bg-secondary: 250, 248, 246; /* #faf8f6 */ --mm-bg-mobile-header: 248, 210, 211; /* #f8d2d3 – mobile header bar */ /* Divider Color */ --mm-color-divider: 218, 216, 216; /* #dad8d8 */ /* ============================================ SPACING SYSTEM (Base: 16px) ============================================ */ --mm-spacing-base: 16px; /* Micro Spacing */ --mm-spacing-2xs: calc(var(--mm-spacing-base) * 0.25); /* 4px */ --mm-spacing-xs: calc(var(--mm-spacing-base) * 0.5); /* 8px */ --mm-spacing-sm: calc(var(--mm-spacing-base) * 0.75); /* 12px */ /* Standard Spacing */ --mm-spacing-md: calc(var(--mm-spacing-base) * 1); /* 16px */ --mm-spacing-lg: calc(var(--mm-spacing-base) * 1.5); /* 24px */ --mm-spacing-xl: calc(var(--mm-spacing-base) * 2); /* 32px */ /* Macro Spacing */ --mm-spacing-2xl: calc(var(--mm-spacing-base) * 3); /* 48px */ --mm-spacing-3xl: calc(var(--mm-spacing-base) * 4); /* 64px */ --mm-spacing-4xl: calc(var(--mm-spacing-base) * 5); /* 80px */ --mm-spacing-5xl: calc(var(--mm-spacing-base) * 6); /* 96px */ /* Section Spacing */ --mm-section-spacing-sm: calc(var(--mm-spacing-base) * 3); /* 48px */ --mm-section-spacing-md: calc(var(--mm-spacing-base) * 5); /* 80px */ --mm-section-spacing-lg: calc(var(--mm-spacing-base) * 7.5); /* 120px */ /* ============================================ TYPOGRAPHY SYSTEM ============================================ */ /* Font Families */ --mm-font-primary: 'NunitoSansRegular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mm-font-heading: 'CraftyGirlsRegular', cursive; --mm-font-script: 'Petit Formal Script', cursive; /* Font Sizes */ --mm-font-size-xs: calc(var(--mm-spacing-base) * 0.75); /* 12px */ --mm-font-size-sm: calc(var(--mm-spacing-base) * 0.875); /* 14px */ --mm-font-size-base: var(--mm-spacing-base); /* 16px */ --mm-font-size-md: calc(var(--mm-spacing-base) * 1.125); /* 18px */ --mm-font-size-lg: calc(var(--mm-spacing-base) * 1.25); /* 20px */ --mm-font-size-xl: calc(var(--mm-spacing-base) * 1.5); /* 24px */ --mm-font-size-2xl: calc(var(--mm-spacing-base) * 2); /* 32px */ --mm-font-size-3xl: calc(var(--mm-spacing-base) * 2.5); /* 40px */ --mm-font-size-4xl: calc(var(--mm-spacing-base) * 3); /* 48px */ --mm-font-size-5xl: calc(var(--mm-spacing-base) * 3.75); /* 60px */ /* Line Heights */ --mm-line-height-tight: 1.2; --mm-line-height-normal: 1.5; --mm-line-height-relaxed: 1.75; --mm-line-height-loose: 2; /* Font Weights */ --mm-font-weight-light: 300; --mm-font-weight-normal: 400; --mm-font-weight-medium: 500; --mm-font-weight-semibold: 600; --mm-font-weight-bold: 700; /* Letter Spacing */ --mm-letter-spacing-tight: -0.02em; --mm-letter-spacing-normal: 0; --mm-letter-spacing-wide: 0.025em; --mm-letter-spacing-wider: 0.05em; --mm-letter-spacing-widest: 0.1em; /* ============================================ TRANSITIONS & ANIMATIONS ============================================ */ --mm-transition-fast: 0.15s ease-in-out; --mm-transition-normal: 0.3s ease-in-out; --mm-transition-slow: 0.5s ease-in-out; --mm-transition-slower: 0.7s ease-in-out; /* Easing Functions */ --mm-ease-in: cubic-bezier(0.4, 0, 1, 1); --mm-ease-out: cubic-bezier(0, 0, 0.2, 1); --mm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ============================================ BORDERS ============================================ */ /* Border Widths */ --mm-border-width-thin: 1px; --mm-border-width-normal: 2px; --mm-border-width-thick: 4px; /* Border Styles */ --mm-border-standard: 1px solid rgba(var(--mm-color-gray-lighter), 1); /* Border Radius */ --mm-border-radius-none: 0; --mm-border-radius-sm: 4px; --mm-border-radius-md: 8px; --mm-border-radius-lg: 16px; --mm-border-radius-xl: 24px; --mm-border-radius-full: 9999px; --mm-border-radius-pill: calc(var(--mm-spacing-base) * 3.125); /* 50px - For buttons */ /* ============================================ SHADOWS & DEPTH ============================================ */ --mm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --mm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --mm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --mm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --mm-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --mm-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* ============================================ Z-INDEX SYSTEM ============================================ */ --mm-z-base: 0; --mm-z-dropdown: 1000; --mm-z-sticky: 1020; --mm-z-fixed: 1030; --mm-z-modal-backdrop: 1040; --mm-z-modal: 1050; --mm-z-popover: 1060; --mm-z-tooltip: 1070; /* ============================================ CONTAINER & GRID ============================================ */ --mm-container-max-width: 1000px; --mm-container-padding: var(--mm-spacing-md); --mm-grid-gap: var(--mm-spacing-lg); --mm-grid-gap-sm: var(--mm-spacing-md); /* ============================================ BREAKPOINTS (for JS usage) ============================================ */ --mm-breakpoint-xs: 569px; --mm-breakpoint-sm: 768px; --mm-breakpoint-md: 960px; --mm-breakpoint-lg: 1200px; --mm-breakpoint-xl: 1500px; /* ============================================ SPECIFIC COMPONENTS ============================================ */ /* Buttons */ --mm-button-padding-sm: calc(var(--mm-spacing-base) * 0.75) calc(var(--mm-spacing-base) * 1.5); --mm-button-padding-md: calc(var(--mm-spacing-base) * 1) calc(var(--mm-spacing-base) * 2); --mm-button-padding-lg: calc(var(--mm-spacing-base) * 1.25) calc(var(--mm-spacing-base) * 2.5); --mm-button-gap: var(--mm-spacing-xs); /* Input Fields */ --mm-input-padding: calc(var(--mm-spacing-base) * 0.75) var(--mm-spacing-md); --mm-input-border: var(--mm-border-standard); --mm-input-border-focus: 2px solid rgba(var(--mm-color-primary), 1); --mm-input-border-radius: var(--mm-border-radius-sm); /* Cards */ --mm-card-padding: var(--mm-spacing-xl); --mm-card-padding-sm: var(--mm-spacing-lg); --mm-card-border-radius: var(--mm-border-radius-md); --mm-card-shadow: var(--mm-shadow-md); } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ /* Tablet & Mobile (< 960px) */ @media (max-width: 959px) { :root { /* Reduce spacing on smaller screens */ --mm-section-spacing-sm: calc(var(--mm-spacing-base) * 2); /* 32px */ --mm-section-spacing-md: calc(var(--mm-spacing-base) * 3); /* 48px */ --mm-section-spacing-lg: calc(var(--mm-spacing-base) * 4); /* 64px */ /* Adjust font sizes */ --mm-font-size-3xl: calc(var(--mm-spacing-base) * 2); /* 32px */ --mm-font-size-4xl: calc(var(--mm-spacing-base) * 2.5); /* 40px */ --mm-font-size-5xl: calc(var(--mm-spacing-base) * 3); /* 48px */ } } /* Mobile (< 570px) */ @media (max-width: 569px) { :root { /* Further reduce spacing on mobile */ --mm-section-spacing-sm: calc(var(--mm-spacing-base) * 1.5); /* 24px */ --mm-section-spacing-md: calc(var(--mm-spacing-base) * 2); /* 32px */ --mm-section-spacing-lg: calc(var(--mm-spacing-base) * 3); /* 48px */ /* Smaller container padding */ --mm-container-padding: var(--mm-spacing-sm); /* Adjust card padding */ --mm-card-padding: var(--mm-spacing-lg); --mm-card-padding-sm: var(--mm-spacing-md); } } /* ============================================ PRINT STYLES ============================================ */ @media print { :root { /* Optimize for print */ --mm-shadow-sm: none; --mm-shadow-md: none; --mm-shadow-lg: none; --mm-shadow-xl: none; --mm-shadow-2xl: none; } }