/*
 * Versola design tokens: the single source for the website's colour, shape and type.
 *
 * They are the tokens of the product's `default` login theme (central-ui/forms/common.css), so the
 * site and a fresh Versola login page read as one brand. Names match the theme's where a token
 * exists there (--brand, --ink, --sheet, --field, --line, --rf/--rb/--rs). The site is light-only:
 * the theme's dark-scheme values are not used here, and the page is the theme's light page tint. Rules and the component catalogue: DESIGN.md
 * and the live page at /design.
 */
/* JetBrains Mono (code and tokens), self-hosted: one variable woff2 holds weights 100-800, Latin subset only.
   swap: text shows in the fallback monospace at once and is never blocked by the download. Fonts are fetched
   cross-origin from blog. and docs. pages, so nginx sends Access-Control-Allow-Origin for /fonts/. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Brand */
    --brand: #155e75;
    --brand-hover: color-mix(in oklab, var(--brand) 82%, #000000);
    --on-brand: #ffffff;
    --brand-soft: color-mix(in srgb, var(--brand) 9%, transparent);
    --focus: var(--brand);

    /* The primary button is ink, as in the login forms; the brand colour is the accent (links, labels, focus). */
    --btn: var(--ink);
    --btn-hover: #000000;
    --on-btn: #ffffff;

    /* Page: the tint behind the hero and the header, the default theme's light page (--page-light in the login
       theme's common.css). */
    --page: color-mix(in oklab, var(--brand) 9%, #f6f4ef);

    /* Surfaces and text */
    --surface: #faf9f7;
    --surface-alt: #f5f3ee;
    --sheet: #ffffff;
    --field: #f5f3ee;
    --field-hover: #edeae3;
    --ink: #1c1b19;
    --text-muted: #6b6a66;
    --invert: #ffffff;

    /* Lines */
    --line: #e6e2d8;
    --line-strong: #cfc9bb;

    /* Status: the plain colour, and the darker ink to read on its own tint */
    --danger: #c0341d;
    --danger-ink: #991b1b;
    --warn: #b45309;
    --warn-ink: #92400e;

    /* Data series (charts on the landing's observability block): the brand hue and ink, told apart by lightness */
    --viz-1: var(--brand);
    --viz-2: color-mix(in oklab, var(--brand) 55%, #ffffff);
    --viz-3: var(--ink);
    --viz-4: color-mix(in oklab, var(--ink) 38%, #ffffff);
    --viz-5: color-mix(in oklab, var(--brand) 28%, #ffffff);
    --viz-6: color-mix(in oklab, var(--ink) 18%, #ffffff);
    --viz-7: var(--line-strong);

    /* Shape */
    --rf: 14px;   /* fields */
    --rb: 14px;   /* buttons */
    --rs: 24px;   /* sheets and cards */
    --pill: 999px;

    /* Depth */
    --shadow-sheet: 0 30px 60px -24px rgba(0, 0, 0, 0.45);
    --shadow-card:
        0 1px 1px rgba(16, 24, 40, 0.02),
        0 4px 10px rgba(16, 24, 40, 0.04),
        0 20px 48px rgba(16, 24, 40, 0.09);

    /* Type */
    --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing scale (4px base) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 80px;
}