:root {

    /* =====================================================
       COLOR SYSTEM
       ===================================================== */

    --color-primary: #c8a45d;

    --color-primary-soft: color-mix(in srgb, var(--color-primary) 70%, white);

    --color-bg-main: #0b0d10;
    --color-bg-surface: #12151a;
    --color-bg-elevated: #161a20;

    --color-text-main: #e6e6e6;
    --color-text-muted: rgba(230,230,230,0.6);
    --color-text-invert: #0b0d10;
    --color-text-base: #ffffff;

    --color-border-subtle: rgba(255,255,255,0.08);

    /* Accent Variants (derived manually for now) */
    --color-accent-soft: rgba(200,164,93,0.65);
    --color-accent-muted: rgba(200,164,93,0.25);

    /* Status */
    --color-error: #c44949;
    --color-error-soft: rgba(196,73,73,0.15);

    /* Surfaces */
    --surface-dark: rgba(20,20,20,0.9);

    /* Accent */
    --border-accent: rgba(212,175,55,0.2);
    --shadow-accent: rgba(212,175,55,0.15);    



    /* =====================================================
       Naivgation
       ===================================================== */
    --nav-gap:2.8rem;
    --nav-font-size:13px;

    /* =====================================================
       Goldakzente
       ===================================================== */

    /* Brand Gold */
    --wcac-gold: #d4af37;
    --wcac-gold-light: #f5d77a;

    /* Gold Transparenzen */
    --wcac-gold-08: rgba(212,175,55,0.08);
    --wcac-gold-20: rgba(212,175,55,0.2);
    --wcac-gold-30: rgba(212,175,55,0.3);

    /* White Transparenzen */
    --wcac-white-08: rgba(255,255,255,0.08);

    /* Overlay */
    --wcac-overlay-dark: rgba(0,0,0,0.8);
    --wcac-overlay-soft: rgba(0,0,0,0.45);

    /* Shadows */
    --wcac-shadow-deep: rgba(0,0,0,0.6);    

    --wcac-overlay-blur: 4px;

    /* =====================================================
       Eingabefelder
       ===================================================== */

    /* Surfaces */
    --surface-input: rgba(255,255,255,0.92);
    --surface-input-focus: rgba(255,255,255,1);

    /* Borders */
    --border-default: rgba(0,0,0,0.12);
    --border-focus: var(--color-primary);
    --border-error: var(--color-error);

    /* Status */
    --color-error: #c44949;
    --color-error-soft: rgba(196,73,73,0.2);

    /* Shadows */
    --shadow-focus: 0 0 0 2px rgba(212,175,55,0.2);

    /* Radius */
    --radius-input: 6px;

    /* Spacing */
    --input-height: 46px;
    --input-padding-x: 14px;
    --input-padding-y: 10px;    


      --surface-card-soft: rgba(0,0,0,0.55);
      --border-card-accent: var(--border-accent);
      --blur-card: 14px;
      --radius-card: 12px;
      --spacing-card: 40px;    
      --blur-card-soft: 10px;

    /* =====================================================
       TYPOGRAPHY SYSTEM
       ===================================================== */

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    --font-size-base: 16px;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;

    --h1-size: 3rem;
    --h2-size: 2.2rem;
    --h3-size: 1.6rem;
    --h4-size: 1.3rem;
    --h5-size: 1.1rem;
    --h6-size: 1rem;

    --line-height-body: 1.6;
    --line-height-heading: 1.2;

    --letter-spacing-heading: 0.02em;


    /* =====================================================
       SPACING SYSTEM
       ===================================================== */

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 4rem;
    --space-xxxl: 5rem;


    /* =====================================================
       LAYOUT SYSTEM
       ===================================================== */

    --container-width: 1260px;
    --content-max-width: 1260px;
    --product-content-width: 1260px;

    --grid-columns: 3;
    --grid-gap: 2rem;

    --section-padding-y: 6rem;
    --section-padding-x: 2rem;

    /* =====================================================
       LAYOUT SYSTEM
       ===================================================== */

       
    --dropdown-background: rgba(10,10,10,1);
    --dropdown-hover-background: rgba(255,255,255,0.06);
    --dropdown-shadow: 0 25px 50px rgba(0,0,0,0.6);

    /* =====================================================
    PRODUCT GRID SYSTEM
    ===================================================== */

    --product-grid-gap: var(--space-xxl);    

    /* =====================================================
    PRODUCT BADGES GRID SYSTEM
    ===================================================== */

    --badge-gradient-angle: 135deg;
    --badge-bg-start: var(--color-primary);
    --badge-bg-end: var(--color-primary-soft);
    --badge-text-color: var(--color-surface-contrast);        

    /* =====================================================
       RADIUS SYSTEM
       ===================================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 24px;


    /* =====================================================
       SHADOW SYSTEM
       ===================================================== */

    --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);
    --shadow-elevated: 0 20px 60px rgba(0,0,0,0.35);
    --shadow-dramatic: 0 40px 120px rgba(0,0,0,0.5);


    /* =====================================================
       MOTION SYSTEM
       ===================================================== */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.4s ease;
    --transition-slow: 0.8s ease;


    /* =====================================================
       BACKGROUND SYSTEM
       ===================================================== */
    --background-overlay-color: rgba(180,140,80,0.12);
    --background-overlay-position: top;
    --background-overlay-size: 60%;
    --background-attachment: fixed;

    /* =====================================================
    PRODUCT CARD SYSTEM
    ===================================================== */

    --card-bg: rgba(0,0,0,0.45);
    --card-bg-hover: rgba(0,0,0,0.55);
    --card-border-accent: rgba(212, 175, 55, 0.35);
    --card-border-accent-soft: rgba(200,164,93,0.6);


    --product-grid-gap: var(--space-xxl);
    --product-card-padding-y: 3rem;
    --product-card-padding-x: 2rem;

    --product-title-size: 1.25rem;
    --product-price-size: 1.1rem;

    --transition-default: var(--transition-normal);    

      /* =====================================================
      Scarcity Box - Limitierung
      ===================================================== */
    --scarcity-border-accent: rgba(212,175,55,0.45);
    --scarcity-bg: rgba(255,255,255,0.04);
    --scarcity-text-muted: rgba(255,255,255,0.65);
}


/* =====================================================
   GLOBAL RESET
   ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus-visible{
   outline:none;
}

html {
    font-size: var(--font-size-base);
}

body {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;
    min-height: 100vh;

    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);

    background-color: var(--color-bg-main);

    background-image:
        radial-gradient(
            ellipse at var(--background-overlay-position),
            var(--background-overlay-color),
            transparent var(--background-overlay-size)
        ),
        var(--background-image);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: var(--background-attachment);

    color: var(--color-text-main);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =====================================================
   TYPOGRAPHY
   ===================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-heading);
    color: var(--color-text-main);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

p {
    margin: 0 0 var(--space-lg);
    color: var(--color-text-muted);
}


/* =====================================================
   LINKS
   ===================================================== */

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-soft);
}


/* =====================================================
   MEDIA
   ===================================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* =====================================================
   FORM ELEMENTS
   ===================================================== */

button {
    font-family: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border-radius: 0;
    outline: none;
}