:root {
    color-scheme: light;
    --black: #000000;
    --orange: #ff7d26;
    --blue: #2d5aa3;
    --white: #ffffff;
    --canvas: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #eef2f7;
    --text: #101828;
    --muted: #667085;
    --border: #d9e0e8;
    --primary: #2d5aa3;
    --primary-hover: #244980;
    --accent: #ff7d26;
    --accent-hover: #e96610;
    --success: #16794b;
    --danger: #b42318;
    --warning: #9a4e0c;
    --focus: #ff7d26;
    --sidebar: #0b172a;
    --sidebar-text: #eaf0fa;
    --font-sans: Montserrat, "Segoe UI", Arial, sans-serif;
    --font-brand: "Vonique 43", Montserrat, "Segoe UI", sans-serif;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.4rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 10px 30px rgba(16, 24, 40, .1);
    --content: 1180px;
    --transition: 180ms ease
}

[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #0b1018;
    --surface: #121a26;
    --surface-2: #1a2534;
    --text: #f4f7fb;
    --muted: #aab6c6;
    --border: #2c394a;
    --primary: #7fa5df;
    --primary-hover: #9ab9e7;
    --accent: #ff8d42;
    --accent-hover: #ffa061;
    --sidebar: #070b11;
    --sidebar-text: #edf3fb;
    --success: #5cc893;
    --danger: #ff8b82;
    --warning: #ffc27c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, .3)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.55
}

button,
input,
select,
textarea {
    font: inherit
}

a {
    color: inherit
}

img,
svg {
    display: block;
    max-width: 100%
}

h1,
h2,
h3,
p {
    margin: 0
}

h1,
h2,
h3 {
    line-height: 1.18;
    letter-spacing: -.025em
}

h1 {
    font-size: clamp(2.2rem, 5vw, 4.5rem)
}

h2 {
    font-size: clamp(1.7rem, 3vw, 2.8rem)
}

h3 {
    font-size: var(--text-lg)
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent);
    outline-offset: 3px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }
}