@font-face {
    font-family: "DM Sans";
    src: url("/assets/fonts/dm-sans.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Syne";
    src: url("/assets/fonts/syne.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --accent: #0a66d8;
    --on-accent: #ffffff;

    --font-heading: "Syne", -apple-system, "Segoe UI", sans-serif;
    --font-body: "DM Sans", -apple-system, "Segoe UI", sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-lg: 17px;
    --text-xl: 22px;
    --text-2xl: 30px;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;

    --control-height: 36px;
    --sidebar-width: 240px;
    --content-width: 1180px;

    --transition: 140ms ease;

    color-scheme: light;

    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-hover: #f2f2f4;
    --surface-active: #e9e9ec;
    --border: #e2e2e6;
    --border-strong: #c9c9ce;
    --text: #1d1d1f;
    --text-secondary: #5f5f65;
    --text-tertiary: #6e6e73;
    --overlay: rgba(0, 0, 0, 0.32);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);

    --accent-hover: color-mix(in srgb, var(--accent) 88%, #000000);
    --accent-text: var(--accent);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
    --focus-ring: color-mix(in srgb, var(--accent) 40%, transparent);

    --success: #1a7f37;
    --success-soft: rgba(26, 127, 55, 0.1);
    --warning: #9a6200;
    --warning-soft: rgba(154, 98, 0, 0.1);
    --danger: #c9281f;
    --danger-hover: #ad211a;
    --danger-soft: rgba(201, 40, 31, 0.09);
    --neutral-soft: rgba(29, 29, 31, 0.07);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0a0a0b;
    --surface: #141416;
    --surface-raised: #1c1c1f;
    --surface-hover: #1f1f22;
    --surface-active: #29292d;
    --border: #2a2a2d;
    --border-strong: #3d3d41;
    --text: #f5f5f7;
    --text-secondary: #ababb0;
    --text-tertiary: #929297;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-sm: none;
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);

    --accent-hover: color-mix(in srgb, var(--accent) 86%, #ffffff);
    --accent-text: color-mix(in srgb, var(--accent) 52%, #ffffff);
    --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
    --focus-ring: color-mix(in srgb, var(--accent) 60%, transparent);

    --success: #5ccb7a;
    --success-soft: rgba(92, 203, 122, 0.14);
    --warning: #e0a83e;
    --warning-soft: rgba(224, 168, 62, 0.14);
    --danger: #f2706a;
    --danger-hover: #f58a85;
    --danger-soft: rgba(242, 112, 106, 0.14);
    --neutral-soft: rgba(245, 245, 247, 0.09);
}