@import 'tailwindcss';

@keyframes spin-slower {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin-slower {
    animation: spin-slower 15s linear infinite;
}

@theme {
    --color-dark-pine-base: hsl(249deg, 22%, 12%);
    --color-dark-pine-surface: hsl(247deg, 23%, 15%);
    --color-dark-pine-overlay: hsl(248deg, 25%, 18%);
    --color-dark-pine-muted: hsl(249deg, 12%, 47%);
    --color-dark-pine-subtle: hsl(248deg, 15%, 61%);
    --color-dark-pine-text: hsl(245deg, 50%, 91%);
    --color-dark-pine-red: hsl(343deg, 76%, 68%);
    --color-dark-pine-yellow: hsl(35deg, 88%, 72%);
    --color-dark-pine-pink: hsl(2deg, 55%, 83%);
    --color-dark-pine-blue: hsl(197deg, 49%, 38%);
    --color-dark-pine-green: hsl(189deg, 43%, 73%);
    --color-dark-pine-purple: hsl(267deg, 57%, 78%);
    --color-dark-pine-highlight-low: hsl(244deg, 18%, 15%);
    --color-dark-pine-highlight-med: hsl(249deg, 15%, 28%);
    --color-dark-pine-highlight-high: hsl(248deg, 13%, 36%);
}

@theme {
    --color-light-pine-base: hsl(32deg, 57%, 95%);
    --color-light-pine-surface: hsl(35deg, 100%, 98%);
    --color-light-pine-overlay: hsl(33deg, 43%, 91%);
    --color-light-pine-muted: hsl(257deg, 9%, 61%);
    --color-light-pine-subtle: hsl(248deg, 12%, 52%);
    --color-light-pine-text: hsl(248deg, 19%, 40%);
    --color-light-pine-red: hsl(343deg, 35%, 55%);
    --color-light-pine-yellow: hsl(35deg, 81%, 56%);
    --color-light-pine-pink: hsl(3deg, 53%, 67%);
    --color-light-pine-blue: hsl(197deg, 53%, 34%);
    --color-light-pine-green: hsl(189deg, 30%, 48%);
    --color-light-pine-purple: hsl(268deg, 21%, 57%);
    --color-light-pine-highlight-low: hsl(25deg, 35%, 93%);
    --color-light-pine-highlight-med: hsl(10deg, 9%, 86%);
    --color-light-pine-highlight-high: hsl(315deg, 4%, 80%);
}