/* =========================
   Variables (Design Tokens)
========================= */

:root {
    /* System preferences */
    color-scheme: light dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;

    --3xs: 0.25rem;
    --2xs: 0.5rem;
    --1xs: 0.75rem;
    --xs: 1rem;
    --sm: 1.25rem;
    --md: 1.5rem;
    --lg: 2rem;
    --xl: 3rem;
    --2xl: 4rem;
    --3xl: 5rem;

    /* Radius & Spacing */
    --radius-3xs: var(--3xs);
    --radius-2xs: var(--2xs);
    --radius-1xs: var(--xs);
    --radius-xs: var(--xs);
    --radius-sm: var(--sm);
    --radius-md: var(--md);
    --radius-lg: var(--lg);
    --radius-xl: var(--xl);
    --radius-2xl: var(--2xl);
    --radius-3xl: var(--3xl);
    --space-3xs: var(--3xs);
    --space-2xs: var(--2xs);
    --space-1xs: var(--xs);
    --space-xs: var(--xs);
    --space-sm: var(--sm);
    --space-md: var(--md);
    --space-lg: var(--lg);
    --space-xl: var(--xl);
    --space-2xl: var(--2xl);
    --space-3xl: var(--3xl);
    --size-3xs: var(--3xs);
    --size-2xs: var(--2xs);
    --size-1xs: var(--xs);
    --size-xs: var(--xs);
    --size-sm: var(--sm);
    --size-md: var(--md);
    --size-lg: var(--lg);
    --size-xl: var(--xl);
    --size-2xl: var(--2xl);
    --size-3xl: var(--3xl);
    --padding-3xs: var(--3xs);
    --padding-2xs: var(--2xs);
    --padding-1xs: var(--xs);
    --padding-xs: var(--xs);
    --padding-sm: var(--sm);
    --padding-md: var(--md);
    --padding-lg: var(--lg);
    --padding-xl: var(--xl);
    --padding-2xl: var(--2xl);
    --padding-3xl: var(--3xl);
    --gap-3xs: var(--3xs);
    --gap-2xs: var(--2xs);
    --gap-1xs: var(--xs);
    --gap-xs: var(--xs);
    --gap-sm: var(--sm);
    --gap-md: var(--md);
    --gap-lg: var(--lg);
    --gap-xl: var(--xl);
    --gap-2xl: var(--2xl);
    --gap-3xl: var(--3xl);

    /* Base Colors */
    /*--color-light-bg: #e1e1eb;
    --color-light-text: #494952;
    --color-light-accent: #2563eb;
    --color-dark-bg: #131316;
    --color-dark-text: #bdbdcc;
    --color-dark-accent: #83b2ff;*/

    /*--color-light-body: #f5f5f7;*/
    --color-light-bg: #e0e0e3;
    --color-light-text: #4a5565;
    --color-light-accent: #1553db;
    /*--color-dark-body: #151519;*/
    --color-dark-bg: #1b1c21;
    --color-dark-text: #d2d3d8;
    --color-dark-accent: #83b2ff;
    --color-light-surface: #d2d3d8;
    --color-dark-surface: #1f2024;
    --color-light-paper: #e0e0e3;
    --color-dark-paper: #1b1c21;
    --color-light-border: #bfbfc7;
    --color-dark-border: #101012;
    --color-light-body: #d8d9de;
    --color-dark-body: #17181e;

    /* Semantic Tokens */
    --color-body: light-dark(var(--color-light-body), var(--color-dark-body));
    --color-bg: light-dark(var(--color-light-bg), var(--color-dark-bg));
    --color-text: light-dark(var(--color-light-text), var(--color-dark-text));
    --color-border: light-dark(
        var(--color-light-border),
        var(--color-dark-border)
    );
    --color-surface: light-dark(
        var(--color-light-surface),
        var(--color-dark-surface)
    );
    --color-paper: light-dark(
        var(--color-light-paper),
        var(--color-dark-paper)
    );
    --color-accent: light-dark(
        var(--color-light-accent),
        var(--color-dark-accent)
    );
    --color-danger: #ef4444;
    --color-success: #22c55e;
    --color-warning: #f59e0b;

    /* Defaults */
    --default-radius: var(--radius-2xs);
    --default-padding: var(--space-xs);
    --default-gap: var(--space-2xs);

    @media (max-width: 768px) {
        --default-padding: var(--space-2xs);
        --default-gap: var(--space-2xs);
        --default-radius: var(--radius-2xs);
    }
}

/* Theme Overrides */
.light {
    color-scheme: light;
}
.dark {
    color-scheme: dark;
}

/* =========================
   Base Reset
========================= */

html,
body {
    font-family: system-ui, sans-serif;
    color: var(--color-text);
    background: var(--color-body);
    /*background-image: linear-gradient(
        to top,
        #0f172a22,
        #1e293b22 60%,
        #33415522
    );*/
}

/* =========================
   Scrollbar
========================= */

::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}
::-webkit-scrollbar-track {
    background: transparent !important;
}
::-webkit-scrollbar-thumb {
    background: #77777744 !important;
    border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #77777777 !important;
}