@import "fonts.css";
@import "global.css";

:root {
    --vats-text: rgb(23, 23, 23);
    --vats-text2: rgb(82, 82, 82);
    --vats-text3: rgb(173, 173, 173);
    --vats-text4: #ccc;
    --vats-coloredtext: #ec2526;
    --vats-text-inverse: white;

    --vats-background: white;
    --vats-background-alternative: 0deg 0% 99.2%;
    --vats-bookicon-background: white;

    --vats-sidebar-background: rgb(247, 250, 253);
    --vats-topbar-background: white;
    --vats-topbar-bordercolor: rgb(199, 199, 199);
    --vats-bottombar-background: var(--vats-sidebar-background);
    --vats-menu-background: var(--vats-sidebar-background);

    --vats-thx-th: #181144;
    --vats-thx-x: #ec2526;
    --vats-thx-dot: #000;

    --vats-input-text: var(--vats-text);
    --vats-input-background: var(--vats-sidebar-background);
    --vats-input-bordercolor: var(--vats-topbar-bordercolor);
    --vats-input-placeholdertext: var(--vats-text3);

    --vats-blue: rgb(66, 180, 255);

    --vats-chart-text: var(--vats-text);
    --vats-chart-axis: var(--vats-text);
    --vats-chart-grid: var(--vats-text4);
    --vats-chart-markedarea: hsl(from var(--vats-chart-text) h s l / 10%);
    --vats-chart-markedline: hsl(from var(--vats-coloredtext) h s l / 40%);
    --vats-chart-series-primary: var(--vats-coloredtext);
    --vats-chart-series-secondary: var(--vats-text);
    --vats-chart-series1: #d90429;
    --vats-chart-series2: #0077b6;
    --vats-chart-series3: #2b9348;
    --vats-chart-series4: #ffb703;
    --vats-chart-series5: #8e24aa;
    --vats-chart-series6: #f57c00;

    --vats-tour-background: var(--vats-sidebar-background);
    --vats-tour-text: var(--vats-text);
    --vats-tour-text2: var(--vats-coloredtext);

    --vats-tour-background: #061626;
    --vats-tour-text: #d8dbdf;
    --vats-tour-text2: #fff;
    --vats-tour-border: var(--vats-coloredtext);
    --vats-tour-glow: var(--vats-blue);
}

[data-theme="dark"] {
    --vats-text: #d8dbdf;
    --vats-text2: #e6c594;
    /* #e6c594; */
    /* #8aa9f9 */
    /* #b8bbbf; */
    --vats-text3: #989b9f;
    --vats-text4: #677677;
    --vats-coloredtext: #db3737;
    --vats-text-inverse: var(--vats-background);

    --vats-background: #061626;
    --vats-background-alternative: 0deg 0% 5.9%;
    --vats-bookicon-background: var(--vats-text);

    --vats-sidebar-background: #05121f;
    --vats-topbar-background: var(--vats-background);
    --vats-topbar-bordercolor: #444;
    --vats-bottombar-background: var(--vats-sidebar-background);
    --vats-menu-background: var(--vats-sidebar-background);

    --vats-thx-th: var(--vats-text);
    --vats-thx-x: #db3737;
    --vats-thx-dot: var(--vats-thx-th);

    --vats-input-text: var(--vats-text);
    --vats-input-background: var(--vats-sidebar-background);
    --vats-input-bordercolor: var(--vats-topbar-bordercolor);
    --vats-input-placeholdertext: var(--vats-text4);

    --vats-chart-text: var(--vats-text);
    --vats-chart-axis: var(--vats-text);
    --vats-chart-grid: var(--vats-text4);
    --vats-chart-markedarea: hsl(from var(--vats-chart-text) h s l / 10%);
    --vats-chart-markedline: hsl(from var(--vats-coloredtext) h s l / 40%);
    --vats-chart-series-primary: var(--vats-coloredtext);
    --vats-chart-series-secondary: var(--vats-text);
    --vats-chart-series1: #e63946;
    --vats-chart-series2: #8be9fd;
    --vats-chart-series3: #50fa7b;
    --vats-chart-series4: #ffb86c;
    --vats-chart-series5: #bd93f9;
    --vats-chart-series6: #ff79c6;

    --vats-tour-background: #061626;
    --vats-tour-border: var(--vats-coloredtext);
    --vats-tour-text: #d8dbdf;
    --vats-tour-text2: #fff;
    --vats-tour-glow: var(--vats-blue);
}

:root {
    --vats-font-supabase: Circular;
    --vats-font-svelte: Overpass;
    --vats-font-blog: 'EB Garamond'; 
    --vats-font: "bould", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --vats-font-mono: "Fira Mono", monospace;

    --vats-text-xxl: 3.1rem;
    --vats-text-xl: 2.4rem;
    --vats-text-l: 2rem;
    --vats-text-m: 1.6rem;
    --vats-text-ms: 1.45rem;
    --vats-text-s: 1.3rem;
    --vats-text-xs: 1.1rem;

    --vats-header-height: 50px;
    --vats-buttonbar-height: 3.25rem;

    --vats-page-maxwidth: 84rem;
    --vats-page-padding-top: 3rem;
    --vats-page-padding-left: 3rem;
    --vats-page-padding-right: 3rem;

    --vats-dialogborder-size: 2px;

    --vats-input-height: 3.5rem;
    --vats-input-borderradius: 1rem;

    --vats-bookicon-size: 5rem;
    --vats-book-leftparaindent: 2rem;

    --vats-bubble-background: var(--vats-blue);
    --vats-bubble-text: rgb(23, 23, 23);
}