/* Design tokens: typefaces, colour roles and scales. Loaded before every other stylesheet.
   Everything else refers to these names, so the look of the app is decided here. */

@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
}
/* The pixel face is the one place the Navi's game heritage shows in type: its name and the sign-in wordmark. */
@font-face {
    font-family: "Geist Pixel";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/GeistPixel-Square.woff2") format("woff2");
}

:root {
    color-scheme: dark;

    /* Type */
    --font-sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-code: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --font-pixel: "Geist Pixel", var(--font-code);
    --fs-micro: 11px;
    --fs-small: 12px;
    --fs-dense: 13px;
    --fs-body: 14px;
    --fs-title: 16px;
    --fs-page: 20px;
    --w-regular: 450;
    --w-medium: 550;
    --w-strong: 620;

    /* Surfaces, darkest first. Neutral with a trace of blue (OKLCH hue 262, chroma about 0.01). */
    --bg-app: #0c0e12;          /* window and sidebar */
    --bg-surface: #131519;      /* the content panel */
    --bg-raised: #191c21;       /* cards, table heads */
    --bg-control: #1f2228;      /* fields and quiet buttons */
    --bg-overlay: #202328;      /* menus, dialogs, sheets */
    --hover: rgba(255, 255, 255, 0.045);
    --selected: rgba(255, 255, 255, 0.075);
    --scrim: rgba(4, 5, 8, 0.62);

    /* Lines */
    --border-subtle: rgba(255, 255, 255, 0.06);   /* rows */
    --border: rgba(255, 255, 255, 0.10);          /* cards, fields */
    --border-strong: rgba(255, 255, 255, 0.17);   /* field hover, emphasised edges */

    /* Text, strongest first */
    --text-1: #eff0f3;
    --text-2: #babec4;
    --text-3: #979ba3;
    --text-4: #6b6f76;          /* placeholders and disabled only */

    /* One accent: the Navi's blue. Solid for fills, the lighter tone for text on dark. */
    --accent-solid: #2370db;
    --accent-solid-hover: #1c63c6;
    --accent-text: #83b3fa;
    --accent-tint: rgba(90, 152, 243, 0.14);
    --focus: #5a98f3;
    --on-accent: #ffffff;

    /* Meaning */
    --success: #73ca99;
    --success-solid: #1f8553;
    --success-tint: rgba(115, 202, 153, 0.14);
    --warning: #eab358;
    --warning-solid: #9a6a12;
    --warning-tint: rgba(234, 179, 88, 0.14);
    --error: #f47b74;
    --danger-solid: #c2403a;
    --danger-tint: rgba(244, 123, 116, 0.14);
    --violet: #a985d1;
    --violet-solid: #6c4aa0;

    /* Shape and depth */
    --r-1: 4px;                 /* tags, small marks */
    --r-2: 6px;                 /* buttons, fields, rows */
    --r-3: 8px;                 /* cards, menus */
    --r-4: 12px;                /* panels, dialogs */
    --r-pill: 999px;
    --shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 32px rgba(0, 0, 0, 0.45);

    /* Sizes */
    --control-h: 30px;
    --control-h-sm: 26px;
    --row-h: 30px;
    --bar-h: 48px;
    --sidebar-w: 236px;

    /* Motion: quick, eased out, never on layout */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --t-fast: 120ms;
    --t-base: 180ms;

    /* The names the existing stylesheet and inline styles already use, pointed at the roles above. */
    --bg-primary: var(--bg-surface);
    --bg-secondary: #16181d;
    --bg-card: var(--bg-raised);
    --bg-input: var(--bg-control);
    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);
    --text-muted: var(--text-3);
    --accent: var(--accent-text);
    --accent-dim: var(--accent-solid);
    --accent-glow: var(--hover);
    --radius: var(--r-3);
    --font-mono: var(--font-sans);   /* was Courier New on every label; real code uses --font-code */
}