/* ─── Global Reset & Core Design Tokens ───────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --font: "Roboto", sans-serif;
    --bg-overlay: rgba(var(--hero-scrim-rgb, 4, 38, 25), 0.56);
    --accent: var(--primary);
    --text-link: var(--primary);

    /* Semantic states */
    --state-warning: var(--warning, #9e5808);
    --state-info: #0070f3;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Radii */
    --radius-none: 0rem;
    --radius-xs: 0.5rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-full: 50%;
    --radius-pill: 99px;

    /* Typography */
    --font-size-1: 0.78rem;
    --font-size-2: 0.92rem;
    --font-size-3: 1rem;
    --font-size-4: 1.22rem;
    --font-size-5: 1.5rem;
    --font-size-6: clamp(1.65rem, 2.2vw, 2rem);
    --font-size-7: clamp(1.95rem, 3vw, 2.55rem);
    --font-size-8: clamp(2.4rem, 4.2vw, 3.4rem);
    --font-weight-1: 100;
    --font-weight-2: 300;
    --font-weight-3: 400;
    --font-weight-4: 500;
    --font-weight-5: 700;
    --font-weight-6: 700;

    /* Drawer shell tokens */
    --sidebar-shell-backdrop: rgba(var(--hero-scrim-rgb, 4, 38, 25), 0.56);
    --sidebar-shell-drawer-width: min(86vw, 320px);
    --sidebar-shell-drawer-width-mobile: min(92vw, 320px);

    /* Stacking layers */
    --z-base: 0;
    --z-sticky: 100;
    --z-navigation: 200;
    --z-floating: 300;
    --z-dropdown: 400;
    --z-drawer: 700;
    --z-modal: 800;
}

html.dark,
[data-theme="dark"] {
    --state-warning: var(--warning, #fbbf24);
    --state-info: #60a5fa;
}

html,
body {
    min-height: 100dvh;
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
}

body.public-scroll-locked {
    overflow: hidden;
}

::selection {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--text-primary);
}

input,
textarea,
select,
button {
    font-family: var(--font);
    font-size: inherit;
    caret-color: var(--primary);
}

a,
button {
    touch-action: manipulation;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}