:root {
        --color1: #3d2534;
        --color2: #864753;
        --color3: #433d70;
        --color4: #735c89;
        --color5: #9f7ea4;
      }

      .color1 {
        color: var(--color1);
      }
      .color2 {
        color: var(--color2);
      }
      .color3 {
        color: var(--color3);
      }
      .color4 {
        color: var(--color4);
      }
      .color5 {
        color: var(--color5);
      }

      .bg-color1 {
        background-color: var(--color1);
      }
      .bg-color2 {
        background-color: var(--color2);
      }
      .bg-color3 {
        background-color: var(--color3);
      }
      .bg-color4 {
        background-color: var(--color4);
      }
      .bg-color5 {
        background-color: var(--color5);
      }

      .border-color1 {
        border-color: var(--color1);
      }
      .border-color2 {
        border-color: var(--color2);
      }
      .border-color3 {
        border-color: var(--color3);
      }
      .border-color4 {
        border-color: var(--color4);
      }
      .border-color5 {
        border-color: var(--color5);
      }

      .floating-shape {
        position: absolute;
        pointer-events: none;
        opacity: 0.1;
      }

      .geometric-pattern::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-circle(
            circle at 25% 25%,
            var(--color5) 2px,
            transparent 2px
          ),
          radial-circle(circle at 75% 75%, var(--color4) 1px, transparent 1px);
        background-size: 60px 60px;
        opacity: 0.05;
      }

      .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background: var(--color1);
        color: white;
        padding: 1rem;
        border-radius: 8px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }

      .notification.show {
        transform: translateX(0);
      }

      .diagonal-section {
        clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
      }

      .zigzag-bottom::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 20px;
        background: linear-gradient(135deg, var(--color3) 25%, transparent 25%),
          linear-gradient(225deg, var(--color3) 25%, transparent 25%);
        background-size: 40px 20px;
        background-position: 0 0, 20px 0;
      }

      @media (prefers-reduced-motion: reduce) {
        .floating-shape {
          animation: none;
        }
      }