@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --color-base: 239 237 242;
        --color-surface: 247 246 249;
        --color-overlay: 242 240 245;
        --color-muted: 146 142 175;
        --color-subtle: 139 136 160;
        --color-text: 14 13 17;
        --highlight-low: 11 18 22;
        --highlight-med: 32 37 38;
        --highlight-high: 49 55 58;
        --color-foam: 32 159 181;
        --color-love: 220 100 130;
        --color-pine: 40 105 131;
        --color-accent: 136 57 239;
        --color-accent-20: #dac9f1;
        
        --nav-height: 48px;
    }
}

.dark {
    --color-base: 14 13 17;
    --color-surface: 21 18 28;
    --color-overlay: 30 26 40;
    --color-muted: 99 92 117;
    --color-subtle: 152 146 171;
    --color-text: 247 246 249;
    --highlight-low: 244 237 232;
    --highlight-med: 223 218 217;
    --highlight-high: 206 202 205;
    --color-foam: 145 215 227;
    --color-love: 235 111 146;
    --color-pine: 49 116 143;
    --color-accent: 154 87 237;
    --color-accent-20: #2a1c3d;

    color-scheme: dark;
}

*, ::before, ::after {
    border-color: rgb(var(--color-muted) / 0.2);
    @apply ease-[cubic-bezier(0.25,_1,_0.5,_1)];
}

html, body {
    min-height: 100vh;
    overflow-x: hidden !important;
    background-color: rgb(var(--color-base));
    overflow-wrap: break-word;
    color: rgb(var(--color-text));
}

::selection {
	background: rgb(var(--color-muted) / 0.2);
}

*:focus-visible {
    outline: none;
}