/* Finnische mobile design tokens — dark fintech.
 * Generated by hand; mirror lives in backend/static/design-tokens.json.
 * Fonts are self-hosted (backend/static/fonts/*.woff2); system fallbacks keep the
 * shell usable offline until the woff2 files are dropped in.
 */
:root {
    --bg: #0A0A0B;
    --surface: #121214;
    --surface-2: #17171A;
    --surface-3: #1E1E22;
    --border: #232327;
    --border-strong: #2E2E34;
    --text: #FFFFFF;
    --text-2: #8B8B93;
    --text-3: #5A5A62;
    --accent: #4F7CFF;
    --brand: #00FFB3;
    --pos: #35D07F;
    --neg: #FF5C5C;

    --radius-card: 0px;
    --radius-inner: 0px;
    --radius-pill: 0px;

    --space: 4px;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset;

    /* Layout rhythm — single source for header/tabbar/content offsets. */
    --header-h: 56px;
    --tabbar-h: 52px;
    --pad: 16px;
    --gap: 16px;

    /* Large numerals scale with viewport width so 320px screens stay clean. */
    --f-num-xl: clamp(28px, 9vw, 38px);
    --f-num-lg: clamp(22px, 6vw, 28px);
    --f-num-md: clamp(17px, 4.5vw, 20px);

    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
        Menlo, Consolas, monospace;

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

/* Fonts: use locally-installed Inter / JetBrains Mono when present, otherwise the
 * system UI/mono stacks from --font-ui / --font-mono. No @font-face url() is declared
 * so the mobile shell never issues a font request (offline-safe, zero 404s).
 * To self-host later: drop inter-var.woff2 / jetbrains-mono-var.woff2 into
 * backend/static/fonts/ and add `url("/static/fonts/…")` sources here.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: local("Inter");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: local("JetBrains Mono"), local("IBM Plex Mono");
}