@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* https://rosepinetheme.com/zh-cn/palette/ingredients/ */
@theme {
  --color-base: light-dark(hsl(32deg 57% 95%), hsl(246deg, 24%, 17%));
  --color-surface: light-dark(hsl(35deg 100% 98%), hsl(248deg, 24%, 20%));
  --color-overlay: light-dark(hsl(33deg 43% 91%), hsl(248deg, 21%, 26%));
  --color-muted: light-dark(hsl(257deg 9% 61%), hsl(249deg, 12%, 47%));
  --color-subtle: light-dark(hsl(248deg 12% 52%), hsl(248deg, 15%, 61%));
  --color-text: light-dark(hsl(248deg 19% 40%), hsl(245deg, 50%, 91%));
  --color-love: light-dark(hsl(343deg 35% 55%), hsl(343deg, 76%, 68%));
  --color-gold: light-dark(hsl(35deg 81% 56%), hsl(35deg, 88%, 72%));
  --color-rose: light-dark(hsl(3deg 53% 67%), hsl(2deg, 66%, 75%));
  --color-pine: light-dark(hsl(197deg 53% 34%), hsl(197deg, 48%, 47%));
  --color-foam: light-dark(hsl(189deg 30% 48%), hsl(189deg, 43%, 73%));
  --color-iris: light-dark(hsl(268deg 21% 57%), hsl(267deg, 57%, 78%));
}

@theme inline {
  --font-sans: var(--font-merriweather), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
}

@theme inline {
  --animate-turn-on: turnOn 600ms ease-in-out;
  --animate-turn-off: turnOff 600ms ease-in-out;
  --animate-spinner-scale: spinner-scale var(--duration, 30s) var(--delay, 30s)
    cubic-bezier(0.2, 0.68, 0.18, 1.08) infinite;
  --animate-svg-text: svg-text 10s var(--delay, 0s) infinite ease-in-out;

  @keyframes turnOn {
    0% {
      clip-path: polygon(0% 0%, 100% 0, 100% 0, 0 0);
    }
    100% {
      clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);
    }
  }

  @keyframes turnOff {
    0% {
      clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    }
    100% {
      clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
  }

  @keyframes spinner-scale {
    0% {
      transform: scaley(1);
    }
    50% {
      transform: scaley(0.4);
    }
    100% {
      transform: scaley(1);
    }
  }

  @keyframes svg-text {
    0% {
      stroke-dashoffset: var(--path-length);
      fill: var(--color-muted);
    }
    30% {
      fill: var(--color-text);
    }
    40% {
      stroke-dashoffset: 0;
      fill: var(--color-text);
    }
    50% {
      fill: var(--color-text);
    }
    80% {
      stroke-dashoffset: var(--path-length);
      fill: var(--color-muted);
    }
    100% {
      stroke-dashoffset: var(--path-length);
      fill: var(--color-muted);
    }
  }

  @keyframes slide-enter {
    0% {
      transform: translateY(10px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
