/*
 * Wandergang base styles: tokens of docs/design/look.md, fonts, reset and base.
 * Order: fonts, tokens (light, dark by system, dark by cookie), reset, base.
 * Shared controls live in ui.css; everything else in the scoped .razor.css files.
 * Colour literals appear only in custom-property declarations.
 */

/* Fonts: self-hosted (SIL OFL), system fallbacks while they load */
@font-face {
    font-family: "Hanken Grotesk";
    src: url("fonts/hanken-grotesk.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

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

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

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

@font-face {
    font-family: "Big Shoulders Display";
    src: url("fonts/big-shoulders-display.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Tokens: light */
:root {
    --bg: #f6f7f5;
    --surface: #ffffff;
    --surface-2: #eceeea;
    --ink: #15191a;
    --ink-2: #566062;
    --line: #e1e4e0;
    --sea: #dfe8ec;
    --land: #f6f4ee;
    --land-edge: #c8ccc6;
    --been: #1d5fbf;
    --lived: #0d3470;
    --want: #c7861d;
    --want-fill: #f5e2bf;
    --route: #15191a;
    --accent: #15191a;
    --on-accent: #ffffff;
    --danger: #c0392b;

    --font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --font-passport: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;

    --radius-card: 12px;
    --radius-control: 10px;
    --radius-sheet: 22px;
    --tab-bar-height: 64px;
    --column-max: 480px;
    --gutter: 20px;
    --gutter-map: 12px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* Tokens: dark, following the system unless the cookie says light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f1112;
        --surface: #171a1b;
        --surface-2: #212526;
        --ink: #eef1f0;
        --ink-2: #9aa4a6;
        --line: #2b3031;
        --sea: #0b1316;
        --land: #252b2d;
        --land-edge: #3a4244;
        --been: #5191f0;
        --lived: #a9c6ff;
        --want: #e9b35a;
        --want-fill: #4a3816;
        --route: #eef1f0;
        --accent: #eef1f0;
        --on-accent: #0f1112;
        --danger: #e5675a;
    }
}

/* Tokens: dark, chosen by the cookie */
:root[data-theme="dark"] {
    --bg: #0f1112;
    --surface: #171a1b;
    --surface-2: #212526;
    --ink: #eef1f0;
    --ink-2: #9aa4a6;
    --line: #2b3031;
    --sea: #0b1316;
    --land: #252b2d;
    --land-edge: #3a4244;
    --been: #5191f0;
    --lived: #a9c6ff;
    --want: #e9b35a;
    --want-fill: #4a3816;
    --route: #eef1f0;
    --accent: #eef1f0;
    --on-accent: #0f1112;
    --danger: #e5675a;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

/* Base */
body {
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.4;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 2px solid var(--been);
    outline-offset: 2px;
}

.num {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}