@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* 60% — black / near-black */
    --background: oklch(0.08 0.005 310);

    /* 10% — bright purple CTA */
    --muted: oklch(0.34 0.10 303);

    /* 30% — mid-tone purple surfaces */
    --panel: oklch(0.17 0.03 310);
    --panel2: oklch(0.22 0.04 310);
    --panel3: oklch(0.12 0.02 310);

    /* text */
    --foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --muted-foreground: oklch(0.708 0 0);

    --destructive: oklch(0.704 0.191 22.216);
    --ring: oklch(0.556 0 0);

    /* aliases */
    --bg: var(--background);
    --text: var(--foreground);
    --muted-text: var(--muted-foreground);
    --accent: var(--muted);
    --accent-hover: oklch(0.42 0.10 303);
    --accent-text: var(--primary);
    --border: oklch(0.22 0.03 310 / 50%);
    --border-strong: oklch(0.30 0.05 310 / 55%);
    --shadow: 0 0 0 2px black, 0 0 44px oklch(0 0 0 / 58%);
}

[data-theme='dark'] {
    --background: oklch(0.08 0.005 310);
    --foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.34 0.10 303);
    --muted-foreground: oklch(0.708 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(0.22 0.03 310 / 50%);
    --ring: oklch(0.556 0 0);
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    color: var(--text);
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "IBM Plex Mono", "Courier New", monospace;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        oklch(1 0 0 / 3%) 0,
        oklch(1 0 0 / 3%) 1px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.14;
}

::selection {
    background: var(--muted);
    color: var(--foreground);
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}