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

@layer base {
    :root {
        --color-text:               26  26  26;
        --color-background:        245 245 245;

        --color-accent:            175  47  47;

        --color-neutral-50:        250 250 250;
        --color-neutral-100:       242 242 242;
        --color-neutral-200:       230 230 230;
        --color-neutral-300:       193 193 193;
        --color-neutral-400:       153 153 153;
        --color-neutral-500:       119 119 119;
        --color-neutral-600:        85  85  85;
        --color-neutral-700:        68  68  68;
        --color-neutral-800:        51  51  51;
        --color-neutral-900:        34  34  34;
    }

    .dark {
        --color-text:              255 255 255;
        --color-background:          0   0   0;

        --color-accent:            175  47  47;

        --color-neutral-50:         34  34  34;
        --color-neutral-100:        51  51  51;
        --color-neutral-200:        68  68  68;
        --color-neutral-300:        85  85  85;
        --color-neutral-400:       119 119 119;
        --color-neutral-500:       153 153 153;
        --color-neutral-600:       193 193 193;
        --color-neutral-700:       230 230 230;
        --color-neutral-800:       242 242 242;
        --color-neutral-900:       250 250 250;
    }
}

@font-face {
    font-family: Inter;
    src: url(/fonts/Inter/Inter-Medium.ttf) format("ttf");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(/fonts/Inter/Inter-SemiBold.ttf) format("ttf");
    font-style: "Semi Bold";
    font-weight: 400;
    font-display: swap;
}

