:root {
      --color-primary:       #8B1A4A;  
      --color-primary-light: #C2406E;
      --color-primary-dark:  #5C0F30;
      --color-accent:        #E8A0B4;  

      --color-bg:            #FAFAF8;
      --color-surface:       #FFFFFF;
      --color-surface-alt:   #F5F0F2;
      
      --color-text:          #1A1018;
      --color-text-muted:    #7A6872;
      --color-border:        #E5D9DE;

      --font-display: 'Playfair Display', Georgia, serif;
      --font-body:    'DM Sans', sans-serif;

      --text-xs:   0.75rem;
      --text-sm:   0.875rem;
      --text-base: 1rem;
      --text-lg:   1.125rem;
      --text-xl:   1.25rem;
      --text-2xl:  1.5rem;
      --text-3xl:  1.875rem;
      --text-4xl:  2.25rem;

      --space-1:  0.25rem;
      --space-2:  0.5rem;
      --space-3:  0.75rem;
      --space-4:  1rem;
      --space-6:  1.5rem;
      --space-8:  2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;

      --container-max:  1200px;
      
      --radius-sm:      6px;
      --radius-md:      12px;
      --radius-lg:      20px;
      --radius-xl:      32px;

      --shadow-sm:  0 2px 8px rgba(139, 26, 74, 0.05);
      --shadow-md:  0 8px 24px rgba(139, 26, 74, 0.08);
      --shadow-lg:  0 16px 40px rgba(139, 26, 74, 0.12);

      --transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: var(--font-body);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }