@plugin "@tailwindcss/typography";
@config "../tailwind.config.js";

@theme {
    --font-sans: "Geist", "sans-serif";
    --color-*: initial;

    --color-level-0: #fffffb;
    --color-level-1: #ffffff;
    --color-level-2: #ffffff;
    --color-level-3: #141e12;

    /* Text colors */
    --color-txt-primary: #141e12;
    --color-invert: #fcfdfc;
    --color-txt-invert: var(--color-invert);
    --color-txt-secondary: #6b716a;
    --color-txt-tertiary: #818780;
    --color-txt-quaternary: #c3c8c2;
    --color-txt-disabled: #000000;
    --color-txt-accent: #93c926;
    --color-txt-danger: #cd2b31;
    --color-txt-success: #5d770d;
    --color-txt-info: #006adc;
    --color-txt-warning: #ad5700;

    /* Backgrounds */
    --color-primary: #141e12;
    --color-invert: #ffffff;
    --color-secondary: #ffffff;
    --color-tertiary: #ffffff;
    --color-subtle: #054d0507;
    --color-highlight: #0027000d;
    --color-active: #e4f7c7;
    --color-accent: #141e12;
    --color-danger: #ffefef;
    --color-danger-plain: #dc3d43;
    --color-danger-dark: #dc3d43;
    --color-success: #eefadc;
    --color-info: #edf6ff;
    --color-warning: #fff4d5;
    --color-dialog: #141e12;

    /* Borders */
    --color-border-solid: #ecefec;
    --color-border-low: #022a0213;
    --color-border-mid: #001a0027;
    --color-border-strong: #051a013d;
    --color-border-active: #141e12;
    --color-border-accent: #93c926;
    --color-border-danger: #dc3d43;
    --color-border-success: #93c926;
    --color-border-warning: #ffa01c;
    --color-border-info: #0081f1;

    /* Hover */
    --color-primary-hover: #273025;
    --color-invert-hover: #f8faf8;
    --color-secondary-hover: #f8faf8;
    --color-tertiary-hover: #054d0507;
    --color-subtle-hover: #0027000d;
    --color-highlight-hover: #022a0213;
    --color-accent-hover: #1e2c1c;
    --color-active-hover: #d7f2b0;
    --color-danger-hover: #cf393f;

    /* Pressed */
    --color-primary-pressed: #30392e;
    --color-invert-pressed: #f2f4f2;
    --color-secondary-pressed: #f2f4f2;
    --color-tertiary-pressed: #0027000d;
    --color-subtle-pressed: #022a0213;
    --color-highlight-pressed: #02210219;
    --color-accent-pressed: #293a25;
    --color-active-pressed: #c9e894;
    --color-danger-pressed: #c6373c;

    /* text-5xl */
    --text-5xl: 3rem;
    --text-5xl--line-height: 3rem;
    --text-5xl--letter-spacing: -1.6px;
    --text-5xl--font-weight: 600;

    /* text-4xl */
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 2.5rem;
    --text-4xl--letter-spacing: -1.2px;
    --text-4xl--font-weight: 600;

    /* text-3xl */
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 2.25rem;
    --text-3xl--letter-spacing: -1px;
    --text-3xl--font-weight: 600;

    /* text-2xl */
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 2rem;
    --text-2xl--letter-spacing: -0.6px;
    --text-2xl--font-weight: 600;

    /* text-xl */
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.75rem;
    --text-xl--letter-spacing: -0.4px;
    --text-xl--font-weight: 600;

    /* text-xl-medium */
    --text-xl-medium: 1.25rem;
    --text-xl-medium--line-height: 1.75rem;
    --text-xl-medium--letter-spacing: -0.4px;
    --text-xl-medium--font-weight: 500;

    /* text-lg */
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.75rem;
    --text-lg--letter-spacing: 0px;
    --text-lg--font-weight: 400;

    /* text-base */
    --text-base: 1rem;
    --text-base--line-height: 1.5rem;
    --text-base--letter-spacing: 0px;
    --text-base--font-weight: 400;

    /* text-base-link */
    --text-base-link: 1rem;
    --text-base-link--line-height: 1.5rem;
    --text-base-link--letter-spacing: 0px;
    --text-base-link--font-weight: 400;

    /* text-sm */
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.25rem;
    --text-sm--letter-spacing: 0px;
    --text-sm--font-weight: 400;

    /* text-sm-link */
    --text-sm-link: 0.875rem;
    --text-sm-link--line-height: 1.25rem;
    --text-sm-link--letter-spacing: 0px;
    --text-sm-link--font-weight: 500;

    /* text-xs */
    --text-xs: 0.75rem;
    --text-xs--line-height: 1rem;
    --text-xs--letter-spacing: 0px;
    --text-xs--font-weight: 400;

    /* text-xxs */
    --text-xxs: 0.6875rem;
    --text-xxs--line-height: 0.875rem;
    --text-xxs--letter-spacing: 0px;
    --text-xxs--font-weight: 400;

    /* Shadows */
    --shadow-*: initial;
    --shadow-base:
        0px 1px 3px 0px rgba(11, 19, 36, 0.1),
        0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
    --shadow-hover:
        0px 2px 6px 0px rgba(11, 19, 36, 0.1),
        0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
    --shadow-focus: 0px 0px 0px 4px rgba(135, 190, 34, 0.5);
    --shadow-mid:
        0px 2px 4px 0px rgba(0, 0, 0, 0.08),
        0px 2px 12px 0px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-level-0: #151715;
        --color-level-1: #1a1d19;
        --color-level-2: #20241f;
        --color-level-3: #3b3f3a;

        /* Text colors */
        --color-txt-primary: #eceeec;
        --color-invert: #151715;
        --color-txt-invert: #fcfdfc;
        --color-txt-secondary: #9aa299;
        --color-txt-tertiary: #778175;
        --color-txt-quaternary: #4c514b;
        --color-txt-disabled: #3b3f3a;
        --color-txt-accent: #c4f042;
        --color-txt-danger: #ff6369;
        --color-txt-success: rgba(181, 255, 44, 0.72);
        --color-txt-info: #52a9ff;
        --color-txt-warning: #f1a10d;

        /* Backgrounds */
        --color-primary: #c4f042;
        --color-invert: #151715;
        --color-secondary: rgba(214, 251, 196, 0.06);
        --color-tertiary: rgba(255, 255, 255, 0);
        --color-subtle: rgba(213, 254, 175, 0.03);
        --color-highlight: rgba(214, 251, 196, 0.06);
        --color-active: rgba(239, 254, 226, 0.08);
        --color-accent: #c4f042;
        --color-danger: rgba(254, 58, 61, 0.13);
        --color-danger-plain: rgba(254, 58, 61, 0.13);
        --color-danger-dark: rgba(255, 89, 95, 0.94);
        --color-success: rgba(184, 253, 106, 0.06);
        --color-info: rgba(22, 119, 254, 0.14);
        --color-warning: rgba(254, 115, 0, 0.09);
        --color-dialog: #151715;

        /* Borders */
        --color-border-solid: rgba(239, 254, 226, 0.08);
        --color-border-low: rgba(239, 254, 226, 0.08);
        --color-border-mid: rgba(233, 254, 223, 0.1);
        --color-border-strong: rgba(241, 255, 237, 0.25);
        --color-border-active: rgba(253, 255, 253, 0.93);
        --color-border-accent: #c4f042;
        --color-border-danger: #f2555a;
        --color-border-success: #c4f042;
        --color-border-warning: #ffcb47;
        --color-border-info: #369eff;

        /* Hover */
        --color-primary-hover: rgba(196, 240, 66, 0.88);
        --color-invert-hover: #1a1d19;
        --color-secondary-hover: rgba(214, 251, 196, 0.06);
        --color-tertiary-hover: rgba(213, 254, 175, 0.03);
        --color-subtle-hover: rgba(214, 251, 196, 0.06);
        --color-highlight-hover: rgba(233, 254, 223, 0.1);
        --color-accent-hover: rgba(183, 255, 50, 0.82);
        --color-active-hover: rgba(233, 254, 223, 0.1);
        --color-danger-hover: rgba(254, 58, 61, 0.7);

        /* Pressed */
        --color-primary-pressed: rgba(196, 240, 66, 0.84);
        --color-invert-pressed: #20241f;
        --color-secondary-pressed: rgba(239, 254, 226, 0.08);
        --color-tertiary-pressed: rgba(214, 251, 196, 0.06);
        --color-subtle-pressed: rgba(239, 254, 226, 0.08);
        --color-highlight-pressed: rgba(236, 254, 229, 0.13);
        --color-accent-pressed: rgba(209, 255, 70, 0.94);
        --color-active-pressed: rgba(236, 254, 229, 0.13);
        --color-danger-pressed: rgba(254, 58, 61, 0.5);
    }
}

a:focus-visible,
button:focus-visible {
    outline: none;
    &:not(:hover) {
        box-shadow: var(--shadow-focus);
    }
}

/* Allow interpolation : https://developer.chrome.com/docs/css-ui/animate-to-height-auto */
:root {
    interpolate-size: allow-keywords;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--color-level-1);
    padding: 1px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-txt-tertiary);
    border-radius: 4px;
}