@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-wght-fTIDfFc.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

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

:root {
    color-scheme: light dark;

    --color-page: light-dark(#e6dfd2, #0a0a0a);
    --color-bg: light-dark(#f2ede3, #121212);
    --color-surface: light-dark(#faf7f1, #1a1a1a);
    --color-surface-raised: light-dark(#eae3d6, #252525);
    --color-border: light-dark(#e0d8ca, #2c2c2c);
    --color-border-strong: light-dark(#cfc5b4, #404040);
    --color-text: light-dark(#3a342e, #ffffff);
    --color-text-muted: light-dark(#6e665b, #a3a3a3);
    --color-text-subtle: light-dark(#857c70, #8a8a8a);

    --color-accent: #e11d2e;
    --color-accent-hover: #c81827;
    --color-accent-text: light-dark(#c21a29, #ff4d5a);
    --color-accent-soft: light-dark(rgba(225, 29, 46, 0.1), rgba(225, 29, 46, 0.12));
    --color-on-accent: #ffffff;

    --color-inverse: light-dark(#4a433c, #ffffff);
    --color-on-inverse: light-dark(#faf7f1, #121212);

    --color-nav-bg: light-dark(rgba(242, 237, 227, 0.94), rgba(18, 18, 18, 0.94));
    --color-shadow: light-dark(rgba(60, 45, 30, 0.18), rgba(0, 0, 0, 0.5));

    --color-podium-1: var(--color-accent);
    --color-on-podium-1: var(--color-on-accent);
    --color-podium-2: var(--color-inverse);
    --color-on-podium-2: var(--color-on-inverse);
    --color-podium-3: var(--color-surface-raised);
    --color-on-podium-3: var(--color-text);

    --color-avatar-1: #e11d2e;
    --color-on-avatar-1: #ffffff;
    --color-avatar-2: light-dark(#4a433c, #ffffff);
    --color-on-avatar-2: light-dark(#faf7f1, #121212);
    --color-avatar-3: light-dark(#d8cfbf, #404040);
    --color-on-avatar-3: light-dark(#3a342e, #ffffff);
    --color-avatar-4: #7f1d1d;
    --color-on-avatar-4: #ffffff;

    --color-google-bg: light-dark(#ffffff, #131314);
    --color-google-border: light-dark(#747775, #8e918f);
    --color-google-text: light-dark(#1f1f1f, #e3e3e3);

    --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 999px;

    --shadow-accent: 0 8px 24px rgba(225, 29, 46, 0.3);
    --transition-fast: 150ms ease;

    --app-max-width: 480px;
    --app-max-width-tablet: 720px;
    --content-max-width: 1080px;
    --sidebar-width: 272px;
    --bottom-nav-height: 72px;
}

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

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