@font-face {
    font-family: "VOID Matter";
    src: url("/assets/fonts/VOIDMatter-ExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "VOID Matter";
    src: url("/assets/fonts/VOIDMatter.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "VOID Matter";
    src: url("/assets/fonts/VOIDMatter-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

:root {
    --color-bg: #090909;
    --color-bg-secondary: #111111;
    --color-bg-soft: rgba(17, 17, 17, .62);
    --color-text: #ffffff;
    --color-text-muted: rgba(255, 255, 255, .62);
    --color-text-faint: rgba(255, 255, 255, .36);
    --color-line: rgba(255, 255, 255, .18);
    --color-accent: #db1f26;
    --color-accent-soft: rgba(219, 31, 38, .18);
    --radius-card: 12px;
    --radius-button: 999px;
    --control-circle-size: 34px;
    --shell-pad-x: clamp(18px, 3vw, 40px);
    --shell-pad-y: clamp(16px, 3vw, 32px);
    --font-main: "VOID Matter", Arial, Helvetica, sans-serif;
    --font-accent: "Playfair Display", Georgia, serif;
    --font-weight-text: 200;
    --font-weight-regular: 400;
    --font-weight-heading: 800;
}