@import '@fontsource-variable/inter';
@import '@fontsource-variable/newsreader';
@import '@fontsource-variable/newsreader/wght-italic.css';

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

@layer base {
    :root {
        --color-text-main: 23 23 23; /* #171717 */
        --color-bg-main: 242 241 236; /* #F2F1EC */
        --color-bg-muted: 234 233 225; /* #EAE9E1 */
        --color-border-main: 23 23 23; /* #171717 */
    }
    html.dark {
        --color-text-main: 242 241 236; /* #F2F1EC */
        --color-bg-main: 23 23 23; /* #171717 */
        --color-bg-muted: 36 36 36; /* #242424 */
        --color-border-main: 242 241 236; /* #F2F1EC */
    }

    /* Cyan */
    /*
    :root {
        --color-text-main: 22 42 43;
        --color-bg-main: 214 224 226;
        --color-bg-muted: 204 216 219;
        --color-border-main: 22 42 43;
    }
    html.dark {
        --color-text-main: 214 224 226;
        --color-bg-main: 22 42 43;
        --color-bg-muted: 28 53 55;
        --color-border-main: 214 224 226;
    }
    */

    /* Green */
    /*
    :root {
        --color-text-main: 58 66 56;
        --color-bg-main: 243 239 230;
        --color-bg-muted: 238 233 220;
        --color-border-main: 58 66 56;
    }
    html.dark {
        --color-text-main: 243 239 230;
        --color-bg-main: 94 108 91;
        --color-bg-muted: 89 103 86;
        --color-border-main: 243 239 230;
    }
    */
}
