
    
    
    
    
    
    
    
    
    
      
        html { color-scheme: dark; background-color: #060304; }
      
      html[data-scheme="light"] { color-scheme: light; background-color: #F7EDED; }
      html[data-scheme="dark"] { color-scheme: dark; background-color: #060304; }
    
      :root {
        --cl-accent: 179, 0, 15;
        --grad-accent-from: #c4101e;
        --grad-accent-to: #6b0008;
        --cl-on-accent: 255, 255, 255;
        --cl-star: 212, 16, 30;
        --cl-success: 22, 163, 74;
        --cl-warning: 217, 119, 6;
        --cl-error: 220, 38, 38;
        --cl-overlay: rgba(18, 0, 3, 0.72);

        
        
        --ff-heading: 'Cinzel', ui-sans-serif, system-ui, sans-serif;
        --ff-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
        --fw-heading: 700;
        --fw-body: 400;
        
        --heading-scale: 1.125;

        --radius-card: 16px;
        --radius-input: 12px;
        --radius-badge: 8px;
        
        --radius-button: var(--radius-input);

        --border-w: 1px;
        --shadow-card: var(--shadow-preset-none);
        --shadow-button: var(--shadow-preset-none);
        --shadow-nav: var(--shadow-preset-none);
        --shadow-modal: var(--shadow-preset-lg);

        --section-py: 72px;
        --section-gap: 0px;
        
        --container-max: 1200px;
        
        --density: 1;
        --card-pad: calc(1.25rem * var(--density));
        --grid-gap: calc(1.25rem * var(--density));

        
        --dur: 200ms;
        --rv-dur: 600ms;
        --rv-dist: 16px;
        --rv-step: 110ms;
        --ease: cubic-bezier(0.4, 0, 0.2, 1);
        --announcement-duration: 25s;

        --product-card-image-aspect-ratio: 16/9;
        --product-page-image-aspect-ratio: 16/9;
        --group-card-image-aspect-ratio: 16/9;
        --blog-card-image-aspect-ratio: 16/9;
        --product-image-fit: cover;
        --group-image-fit: cover;
      }

      [data-scheme="light"] {
        color-scheme: light;
        --cl-accent: 163, 0, 13;
        --cl-on-accent: 255, 255, 255;
        --cl-background: 247, 237, 237;
        --cl-surface: 255, 255, 255;
        --cl-surface-raised: 255, 255, 255;
        --cl-t-primary: 32, 32, 32;
        --cl-t-muted: 101, 101, 101;
        --cl-border: rgba(122, 0, 8, 0.08);
      }

      [data-scheme="dark"] {
        color-scheme: dark;
        --cl-accent: 212, 16, 30;
        --cl-background: 6, 3, 4;
        --cl-surface: 14, 5, 6;
        --cl-surface-raised: 26, 10, 12;
        --cl-t-primary: 246, 238, 238;
        --cl-t-muted: 176, 154, 156;
        --cl-border: rgba(255, 77, 90, 0.10);
      }

      html {
        font-size: 16px;
      }

      body {
        font-family: var(--ff-body);
        font-weight: var(--fw-body);
      }

      h1, h2, h3, h4, h5, h6 {
        font-family: var(--ff-heading);
        font-weight: var(--fw-heading);
        letter-spacing: -0.02em;
      }
    .xn-announcement { color: rgb(var(--cl-on-accent)) !important; background: linear-gradient(90deg, var(--grad-accent-to), var(--grad-accent-from) 50%, var(--grad-accent-to)) !important; border-bottom: 1px solid rgba(255,255,255,.2); }
