/*
 * Cryptobi design tokens: the typeface, the colours, the radii.
 *
 * Loaded by every page BEFORE css/theme.css (components) - and on its own by the standalone pages that must not get theme.css's global
 * element rules (the report viewer, the admin shell).
 *
 * The colour block is GENERATED from design.py (`python scripts/gen_design_css.py`, checked by tests/test_design.py): design.py is the single
 * source of truth, shared with the report mails, the charts and the PDF, so none of them can drift away from the site.
 *
 * The look, in four rules:
 *   1. Slate for everything that is not data (near-black headings, mid-grey body, hairline borders), one calm blue for what can be clicked.
 *   2. Gain and loss are two muted tones, the same everywhere: --cb-gain / --cb-loss for text, --cb-gain-fill / --cb-loss-fill for bars and areas.
 *   3. No decoration: hairline borders instead of shadows (a shadow only on floating layers), no gradients, no saturated fills, one radius family.
 *   4. One typeface (Inter, self-hosted: no request to Google), tabular figures, the number is the loudest thing on a card.
 *
 * Yellow is the logo's bee and nothing else: it only ever sits on ink (the "BI" chip), never as a button or a banner.
 */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* While Inter loads the page is set in Arial scaled to Inter's metrics, so nothing jumps when the real font arrives. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

/* design:begin (generated from design.py by scripts/gen_design_css.py - do not edit by hand) */
:root {
    color-scheme: light;
    --cb-canvas: #ffffff;
    --cb-page: #f3f5f8;
    --cb-surface: #ffffff;
    --cb-surface-2: #f8fafc;
    --cb-surface-3: #eef1f6;
    --cb-ink: #0f172a;
    --cb-text: #334155;
    --cb-muted: #5f6e84;
    --cb-faint: #94a3b8;
    --cb-line: #e5e9f0;
    --cb-line-strong: #cbd5e1;
    --cb-grid: #edf0f5;
    --cb-accent: #2455d9;
    --cb-accent-text: #1d47c0;
    --cb-accent-hover: #1b3fa8;
    --cb-accent-wash: #eef3ff;
    --cb-on-accent: #ffffff;
    --cb-gain: #0b7a55;
    --cb-gain-fill: #2e9f78;
    --cb-gain-wash: #e8f5ef;
    --cb-loss: #b8322a;
    --cb-loss-fill: #d8645d;
    --cb-loss-wash: #fbeceb;
    --cb-loss-line: #f0cbc8;
    --cb-amber: #a15c07;
    --cb-amber-fill: #d68a2e;
    --cb-amber-wash: #fdf3e2;
    --cb-reference: #8a97ab;
    --cb-series-1: #2455d9;
    --cb-series-2: #64748b;
    --cb-series-3: #0f9d8a;
    --cb-series-4: #d68a2e;
    --cb-series-5: #8561d9;
    --cb-series-6: #d2547c;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --cb-canvas: #0b1120;
    --cb-page: #0b1120;
    --cb-surface: #111a2c;
    --cb-surface-2: #16213a;
    --cb-surface-3: #1c2944;
    --cb-ink: #f1f5f9;
    --cb-text: #cbd5e1;
    --cb-muted: #94a3b8;
    --cb-faint: #64748b;
    --cb-line: #243350;
    --cb-line-strong: #34466a;
    --cb-grid: #1b2840;
    --cb-accent: #6b94ff;
    --cb-accent-text: #8fb0ff;
    --cb-accent-hover: #8fb0ff;
    --cb-accent-wash: #16254a;
    --cb-on-accent: #0b1120;
    --cb-gain: #46c795;
    --cb-gain-fill: #3dbb8a;
    --cb-gain-wash: #12302a;
    --cb-loss: #f08a82;
    --cb-loss-fill: #e5766e;
    --cb-loss-wash: #3a1d22;
    --cb-loss-line: #5a2b31;
    --cb-amber: #f0b254;
    --cb-amber-fill: #e8a444;
    --cb-amber-wash: #33270f;
    --cb-reference: #7b8aa5;
    --cb-series-1: #6b94ff;
    --cb-series-2: #94a3b8;
    --cb-series-3: #3fc9b4;
    --cb-series-4: #f0b254;
    --cb-series-5: #a78bfa;
    --cb-series-6: #f08aa9;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --cb-canvas: #0b1120;
        --cb-page: #0b1120;
        --cb-surface: #111a2c;
        --cb-surface-2: #16213a;
        --cb-surface-3: #1c2944;
        --cb-ink: #f1f5f9;
        --cb-text: #cbd5e1;
        --cb-muted: #94a3b8;
        --cb-faint: #64748b;
        --cb-line: #243350;
        --cb-line-strong: #34466a;
        --cb-grid: #1b2840;
        --cb-accent: #6b94ff;
        --cb-accent-text: #8fb0ff;
        --cb-accent-hover: #8fb0ff;
        --cb-accent-wash: #16254a;
        --cb-on-accent: #0b1120;
        --cb-gain: #46c795;
        --cb-gain-fill: #3dbb8a;
        --cb-gain-wash: #12302a;
        --cb-loss: #f08a82;
        --cb-loss-fill: #e5766e;
        --cb-loss-wash: #3a1d22;
        --cb-loss-line: #5a2b31;
        --cb-amber: #f0b254;
        --cb-amber-fill: #e8a444;
        --cb-amber-wash: #33270f;
        --cb-reference: #7b8aa5;
        --cb-series-1: #6b94ff;
        --cb-series-2: #94a3b8;
        --cb-series-3: #3fc9b4;
        --cb-series-4: #f0b254;
        --cb-series-5: #a78bfa;
        --cb-series-6: #f08aa9;
    }
}
/* design:end */

:root {
    --cb-font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --cb-radius: 12px;       /* cards, panels */
    --cb-radius-sm: 8px;     /* buttons, inputs */
    --cb-pill: 999px;        /* chips, badges */
    --cb-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.10);   /* floating layers only: menus, dropdowns */

    /* The logo's bee. Used for the "BI" chip of the wordmark, nowhere else. */
    --brand-yellow: #f4c430;
    --brand-yellow-ink: #171204;

    /* Names the templates used before the design system (kept so nothing breaks while pages are moved over; new code uses --cb-*). */
    --brand-ink: var(--cb-ink);
    --brand-ink-soft: var(--cb-surface-2);
    --brand-paper: var(--cb-surface-2);
    --brand-blue: var(--cb-accent);
    --brand-blue-hover: var(--cb-accent-hover);
    --brand-blue-soft: var(--cb-accent-text);
    --brand-blue-wash: var(--cb-accent-wash);
    --brand-yellow-deep: var(--cb-amber);
    --brand-yellow-wash: var(--cb-amber-wash);
    --brand-line-on-ink: var(--cb-line);
    --brand-line-on-paper: var(--cb-line);
    --brand-text-muted-on-ink: var(--cb-muted);
    --brand-text-muted-on-paper: var(--cb-muted);
}
:root[data-theme="dark"] {
    --cb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    }
}