@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: dark;

    --color-page: #000000;
    --color-bg: #0a0a0a;
    --color-surface: #141414;
    --color-surface-raised: #1f1f1f;
    --color-border: #262626;
    --color-border-strong: #3a3a3a;
    --color-text: #ffffff;
    --color-text-muted: #a3a3a3;
    --color-text-subtle: #8a8a8a;

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

    --color-inverse: #ffffff;
    --color-on-inverse: #0a0a0a;

    --color-nav-bg: rgba(10, 10, 10, 0.94);

    --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: #ffffff;
    --color-on-avatar-2: #0a0a0a;
    --color-avatar-3: #3a3a3a;
    --color-on-avatar-3: #ffffff;
    --color-avatar-4: #7f1d1d;
    --color-on-avatar-4: #ffffff;

    --color-google-bg: #131314;
    --color-google-border: #8e918f;
    --color-google-text: #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;
}