/**
 * CSS Custom Properties - Konfigurator 3.0
 * Vision OS inspired Design System
 */

:root {
    /* === COLORS === */

    /* Base */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gold: #FFD700;
    --color-gold-yellow: #E7D06F;

    /* White Alpha */
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-25: rgba(255, 255, 255, 0.25);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-90: rgba(255, 255, 255, 0.9);
    --color-white-95: rgba(255, 255, 255, 0.95);

    /* Black Alpha */
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-15: rgba(0, 0, 0, 0.15);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-25: rgba(0, 0, 0, 0.25);
    --color-black-30: rgba(0, 0, 0, 0.3);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black-75: rgba(0, 0, 0, 0.75);
    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-85: rgba(0, 0, 0, 0.85);
    --color-black-90: rgba(0, 0, 0, 0.9);

    /* Gray Alpha (Vision OS Glass) */
    --color-gray-20: rgba(120, 120, 128, 0.2);
    --color-gray-30: rgba(120, 120, 128, 0.3);
    --color-gray-40: rgba(120, 120, 128, 0.36);
    --color-gray-50: rgba(120, 120, 128, 0.44);

    /* Accent - Gold */
    --color-gold-hover: rgba(255, 204, 0, 0.5);
    --color-gold-hover-strong: rgba(255, 204, 0, 0.7);
    --color-gold-border: rgba(255, 204, 0, 0.8);
    --color-gold-shadow: rgba(255, 204, 0, 0.35);
    --color-gold-bg: rgba(212, 175, 55, 0.2);
    --color-gold-bg-hover: rgba(212, 175, 55, 0.3);
    --color-gold-text: #996515;
    --color-gold-border-light: rgba(184, 134, 11, 0.25);

    /* Status */
    --color-red: rgba(255, 69, 58, 0.8);
    --color-red-light: rgba(255, 69, 58, 0.15);
    --color-red-medium: rgba(255, 69, 58, 0.25);
    --color-red-delete: rgba(255, 69, 58, 0.4);
    --color-red-delete-border: rgba(255, 69, 58, 0.7);
    --color-green: rgba(48, 209, 88, 0.4);
    --color-green-border: rgba(48, 209, 88, 0.7);
    --color-green-success: #30D158;

    /* Text */
    --color-text-primary: #000000;
    --color-text-secondary: #3A3A3C;
    --color-text-tertiary: #48484A;
    --color-text-quaternary: #636366;
    --color-text-quinary: #8E8E93;
    --color-text-white: #ffffff;
    --color-text-gold: #E7D06F;

    /* Backgrounds (Vision OS Glass) */
    --color-bg-overlay: rgba(255, 255, 255, 0.85);
    --color-bg-overlay-light: rgba(255, 255, 255, 0.78);
    --color-bg-glass: rgba(255, 255, 255, 0.6);
    --color-bg-glass-thick: rgba(255, 255, 255, 0.72);
    --color-bg-dark: rgba(28, 28, 30, 0.9);
    --color-bg-item: rgba(255, 255, 255, 0.65);
    --color-bg-item-hover: rgba(255, 255, 255, 0.78);
    --color-bg-design-item: rgba(255, 255, 255, 0.12);
    --color-bg-design-item-hover: rgba(255, 255, 255, 0.18);
    --color-bg-link-item: rgba(0, 0, 0, 0.25);

    /* === TYPOGRAPHY === */

    /* Scale */
    --font-size-xs: 0.53rem;
    --font-size-sm: 0.56rem;
    --font-size-base-sm: 0.6rem;
    --font-size-base: 0.64rem;
    --font-size-md: 0.7rem;
    --font-size-md-lg: 0.75rem;
    --font-size-lg: 0.82rem;
    --font-size-xl: 0.9rem;
    --font-size-2xl: 1rem;
    --font-size-3xl: 1.1rem;
    --font-size-4xl: 1.13rem;
    --font-size-5xl: 1.25rem;
    --font-size-6xl: 1.5rem;
    --font-size-7xl: 1.75rem;
    --font-size-8xl: 2rem;
    --font-size-9xl: 2.5rem;

    /* Semantic */
    --font-size-button: 0.64rem;
    --font-size-label: 0.56rem;
    --font-size-input: 0.64rem;
    --font-size-title: 1.5rem;
    --font-size-subtitle: 1.75rem;
    --font-size-nav-btn: 11px;
    --font-size-nav-btn-mobile: 10px;
    --font-size-item-title: 14px;
    --font-size-item-description: 13px;
    --font-size-item-price: 15px;
    --font-size-item-price-large: 18px;
    --font-size-legal-text: 12px;

    /* Families */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    --font-family-montserrat: 'Montserrat', -apple-system, sans-serif;
    --font-family-times: 'Times New Roman', serif;
    --font-family-cinzel: 'Cinzel', serif;
    --font-family-trajan: 'Trajan', serif;
    --font-family-monotype: 'Monotype', serif;
    --font-family-gabrielle: 'Gabrielle', serif;

    /* === SPACING === */

    /* Fixed (px) */
    --spacing-xs: 4px;
    --spacing-sm: 5px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;
    --spacing-2xl: 12px;
    --spacing-3xl: 14px;
    --spacing-4xl: 15px;
    --spacing-5xl: 16px;
    --spacing-6xl: 18px;
    --spacing-7xl: 20px;
    --spacing-8xl: 22px;
    --spacing-9xl: 24px;
    --spacing-10xl: 25px;
    --spacing-11xl: 28px;
    --spacing-12xl: 30px;
    --spacing-13xl: 32px;
    --spacing-14xl: 40px;
    --spacing-15xl: 44px;
    --spacing-16xl: 45px;
    --spacing-17xl: 50px;
    --spacing-18xl: 65px;
    --spacing-19xl: 70px;
    --spacing-20xl: 75px;
    --spacing-21xl: 80px;
    --spacing-22xl: 90px;
    --spacing-23xl: 100px;

    /* Relative (rem) */
    --spacing-rem-xs: 0.25rem;
    --spacing-rem-sm: 0.3rem;
    --spacing-rem-md: 0.375rem;
    --spacing-rem-lg: 0.38rem;
    --spacing-rem-xl: 0.41rem;
    --spacing-rem-2xl: 0.45rem;
    --spacing-rem-3xl: 0.49rem;
    --spacing-rem-4xl: 0.5rem;
    --spacing-rem-5xl: 0.55rem;
    --spacing-rem-6xl: 0.56rem;
    --spacing-rem-7xl: 0.64rem;
    --spacing-rem-8xl: 0.68rem;
    --spacing-rem-9xl: 0.75rem;
    --spacing-rem-10xl: 1rem;
    --spacing-rem-11xl: 1.5rem;
    --spacing-rem-12xl: 2.5rem;

    /* === BORDERS === */

    /* Radius (Vision OS - mehr gerundet) */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-3xl: 16px;
    --radius-4xl: 18px;
    --radius-5xl: 20px;
    --radius-6xl: 22px;
    --radius-7xl: 24px;
    --radius-8xl: 26px;
    --radius-9xl: 28px;
    --radius-10xl: 32px;
    --radius-11xl: 36px;
    --radius-full: 50%;
    --radius-pill: 9999px;

    /* Border Colors */
    --border-color-default: rgba(255, 255, 255, 0.5);
    --border-color-light: rgba(255, 255, 255, 0.2);
    --border-color-medium: rgba(255, 255, 255, 0.35);
    --border-color-strong: rgba(255, 255, 255, 0.7);
    --border-color-dark: rgba(0, 0, 0, 0.15);
    --border-color-dark-medium: rgba(0, 0, 0, 0.35);
    --border-color-selection: #FFD700;
    --border-color-gold: rgba(255, 204, 0, 0.5);
    --border-color-gold-strong: rgba(255, 204, 0, 0.75);

    /* Border Width */
    --border-width-thin: 0.5px;
    --border-width-medium: 1px;
    --border-width-thick: 1.5px;

    /* === EFFECTS === */

    /* Shadows (Vision OS - weicher, mehr Tiefe) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-3xl: 0 24px 64px rgba(0, 0, 0, 0.18);
    --shadow-inset-sm: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-inset-md: inset 0 2px 4px rgba(255, 255, 255, 0.08);
    --shadow-inset-lg: inset 0 0 80px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 4px rgba(255, 204, 0, 0.3);
    --shadow-focus-white: 0 0 0 4px rgba(255, 255, 255, 0.25);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-gold: 0 0 20px rgba(255, 204, 0, 0.35);
    --shadow-gold-strong: 0 0 28px rgba(255, 204, 0, 0.5);
    --shadow-dropdown: 0 4px 24px rgba(0, 0, 0, 0.2);
    --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-text-strong: 0 2px 4px rgba(0, 0, 0, 0.7);

    /* Backdrop Blur (reduziert für WebKit-Performance) */
    --backdrop-blur-xs: blur(8px);
    --backdrop-blur-sm: blur(10px);
    --backdrop-blur-md: blur(14px);
    --backdrop-blur-lg: blur(18px);
    --backdrop-blur-xl: blur(22px);
    --backdrop-blur-2xl: blur(28px);
    --backdrop-blur-3xl: blur(36px);
    --backdrop-saturate-default: saturate(120%);
    --backdrop-saturate-high: saturate(150%);
    --backdrop-saturate-very-high: saturate(180%);

    /* === MOTION === */

    /* Transitions (Vision OS - geschmeidiger) */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-zoom: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-drag: 0.08s ease-out;
    --transition-resize: 0.15s ease-out;
    --transition-width: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-opacity: 0.25s ease;
    --transition-transform: 0.25s ease;
    --transition-all: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-all-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Animation */
    --animation-duration-fast: 0.2s;
    --animation-duration-base: 0.35s;
    --animation-duration-slow: 0.5s;
    --animation-duration-slower: 1.5s;
    --animation-duration-pulse: 2s;
    --animation-timing-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-timing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --animation-timing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --animation-timing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* === LAYOUT === */

    /* Z-Index */
    --z-index-base: 1;
    --z-index-low: 2;
    --z-index-medium: 3;
    --z-index-content: 5;
    --z-index-overlay: 10;
    --z-index-content-high: 50;
    --z-index-preview: 100;
    --z-index-menu: 1000;
    --z-index-menu-high: 1001;
    --z-index-menu-higher: 1002;
    --z-index-menu-highest: 1003;
    --z-index-menu-overlay: 1100;
    --z-index-dragging: 9990;
    --z-index-toast: 2000;
    --z-index-debug: 999;

    /* Sizes */
    --size-btn-xs: 24px;
    --size-btn-sm: 32px;
    --size-btn-md: 36px;
    --size-btn-lg: 44px;
    --size-btn-xl: 48px;
    --size-icon-xs: 0.55rem;
    --size-icon-sm: 0.6rem;
    --size-icon-md: 12px;
    --size-icon-lg: 14px;
    --size-icon-xl: 16px;
    --size-icon-2xl: 18px;
    --size-icon-3xl: 24px;

    /* Container */
    --size-container-max-width: 850px;
    --size-container-min-height: 370px;
    --size-container-max-height: min(85vh, 600px);
    --size-container-aspect-ratio: 1.42 / 1;

    /* Images */
    --size-image-xs: 50px;
    --size-image-sm: 75px;
    --size-image-md: 150px;
    --size-image-lg: 200px;
    --size-image-xl: 250px;
    --size-image-2xl: 300px;
    --size-image-3xl: 350px;

    /* Stone */
    --stone-max-width-factor: 1.0;
    --stone-scale-factor: 1.0;
    --stone-type: 'portrait';
    --base-stone-max-width: 250px;
    --base-stone-min-width: 150px;
    --base-einfassung-max-width: 350px;
    --base-einfassung-min-width: 200px;

    /* Grid */
    --grid-cols-auto-fit: repeat(auto-fit, minmax(250px, 1fr));
    --grid-cols-auto-fill: repeat(auto-fill, minmax(140px, 1fr));
    --grid-cols-2: repeat(2, 1fr);
    --grid-cols-3: repeat(3, 1fr);

    /* Breakpoints */
    --breakpoint-xs: 379px;
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 830px;
    --breakpoint-xl: 1024px;

    /* === UTILITIES === */

    /* Opacity */
    --opacity-disabled: 0.6;
    --opacity-hover: 0.88;
    --opacity-active: 0.76;
    --opacity-selected: 0.94;
    --opacity-overlay: 0.2;
    --opacity-light: 0.5;
    --opacity-medium: 0.72;

    /* Transforms */
    --transform-scale-hover: scale(1.02);
    --transform-scale-active: scale(1.04);
    --transform-scale-strong: scale(1.08);
    --transform-scale-stronger: scale(1.12);
    --transform-scale-strongest: scale(1.16);
    --transform-translate-y-hover: translateY(-2px);
    --transform-translate-y-active: translateY(-3px);

    /* Filters */
    --filter-brightness-hover: brightness(1.1);
    --filter-brightness-active: brightness(1.2);
    --filter-brightness-low: brightness(0.5);
    --filter-contrast-low: contrast(0.5);
    --filter-invert: brightness(0) invert(1);
    --filter-opacity-90: opacity(0.9);
    --filter-opacity-50: opacity(0.5);

    /* Touch */
    --touch-action-none: none;
    --touch-action-manipulation: manipulation;
    --touch-action-pan-y: pan-y;
}