@import url("https://use.typekit.net/sgz5dmx.css");

:root {
    --perazzi-red: #db1022;
    --perazzi-black: #1f1f1f;
    --perazzi-white: #ffffff;

    --surface-canvas: #0f0f10;
    --surface-card: #141415;
    --surface-elevated: #1a1a1b;

    --ink-primary: #f5f5f5;
    --ink-muted: #b9b9b9;

    --border-color: #2a2a2b;
    --glass-border: rgba(255, 255, 255, 0.12);

    --radius-sm: 2px;

    --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.35);
    --shadow-strong: 0 18px 48px rgba(0, 0, 0, 0.45);

    --font-sans: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: "mrs-eaves", "Times New Roman", Times, serif;
    --font-serif-small-caps: "mrs-eaves-roman-small-caps", var(--font-serif);
}

html {
    height: 100%;
    width: 100%;
    background-color: var(--surface-canvas);
    color-scheme: dark;
}

body {
    margin: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    font-family: var(--font-sans);
    color: var(--ink-primary);
    background:
        radial-gradient(900px circle at 18% 12%, rgba(219, 16, 34, 0.18), transparent 55%),
        radial-gradient(780px circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 60%),
        linear-gradient(180deg, #151517 0%, #0b0b0c 100%);
    -webkit-tap-highlight-color: transparent;
}

* {
    box-sizing: border-box;
}

button,
input,
select {
    font: inherit;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.04) 1px,
            transparent 1px,
            transparent 4px
        );
    z-index: 0;
}

#application-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

#application-canvas.fill-mode-NONE {
    margin: auto;
}

#application-canvas.fill-mode-KEEP_ASPECT {
    width: 100%;
    height: auto;
    margin: 0;
}

#application-canvas.fill-mode-FILL_WINDOW {
    width: 100%;
    height: 100%;
    margin: 0;
}

canvas:focus {
    outline: 2px solid rgba(255, 255, 255, 0.86);
    outline-offset: -4px;
}

:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

::selection {
    background: rgba(219, 16, 34, 0.42);
    color: #ffffff;
}