:root {
        --color1: #0e1418;
        --color2: #293e54;
        --color3: #1d2106;
        --color4: #736e53;
        --color5: #d7ceb1;
      }

      .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-color4 {
        border-color: var(--color4);
      }

      .zen-pattern {
        background-image: radial-circle(
            circle at 25% 25%,
            var(--color5) 1px,
            transparent 1px
          ),
          radial-circle(circle at 75% 75%, var(--color4) 1px, transparent 1px);
        background-size: 40px 40px;
      }

      .wave-decoration::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--color5),
          transparent
        );
        clip-path: polygon(
          0 50%,
          25% 0%,
          50% 50%,
          75% 0%,
          100% 50%,
          100% 100%,
          0% 100%
        );
      }

      .floating-shape {
        animation: float 6s ease-in-out infinite;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-20px);
        }
      }

      .meditation-circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          var(--color2),
          var(--color4),
          var(--color3),
          var(--color2)
        );
        animation: rotate 20s linear infinite;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .organic-shape {
        border-radius: 60% 40% 40% 20%;
        background: var(--color5);
        opacity: 0.1;
        position: absolute;
      }

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

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

      .texture-overlay {
        background-image: repeating-linear-gradient(
          45deg,
          transparent,
          transparent 2px,
          rgba(115, 110, 83, 0.1) 2px,
          rgba(115, 110, 83, 0.1) 4px
        );
      }