/* ============================================================
   Base layer: webfonts, typography defaults, and the ambient
   blob field. Load order: after themes.css, before styles.css.
   ============================================================ */

/* ---- Webfonts (self-hosted, latin subset, OFL) ---- */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-v22-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/space-grotesk-v22-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-v20-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* ---- Font tokens now resolve to the webfonts ---- */
:root {
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-numeric: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   Ambient lava-lamp field — a fixed <canvas> driven by the WebGL
   metaball renderer (blobfield.js): glossy opaque goo on an
   ALWAYS-DARK field, in both color modes. The gradient stack
   below is the NO-WEBGL STATIC FALLBACK: the CSS background
   paints behind the canvas bitmap, so it is visible exactly when
   GL isn't rendering (context/shader failure). Still no blur
   filter — the shader draws analytic edges; full-screen
   filter:blur remains the #1 glass-UI perf cliff.

   Fallback stack: 4 theme blobs spread full-frame → dark lamp
   base. Mode-independent, like the shader.
   ============================================================ */

.blobfield {
    position: fixed;
    inset: 0;
    /* canvas is a REPLACED element: inset alone doesn't stretch it the way
       it stretched the old div — explicit size required */
    width: 100%;
    height: 100%;
    z-index: var(--z-blob);
    display: block;
    pointer-events: none;
    background:
        radial-gradient(55vmax 55vmax at 15% 25%, color-mix(in srgb, var(--blob-1) 60%, transparent), transparent 70%),
        radial-gradient(60vmax 60vmax at 85% 15%, color-mix(in srgb, var(--blob-2) 55%, transparent), transparent 70%),
        radial-gradient(50vmax 50vmax at 75% 80%, color-mix(in srgb, var(--blob-3) 50%, transparent), transparent 70%),
        radial-gradient(45vmax 45vmax at 20% 85%, color-mix(in srgb, var(--blob-4, var(--blob-1)) 45%, transparent), transparent 70%),
        var(--field-page);
    transition: opacity var(--dur-theme) var(--ease-in-out);
}

/* Light-mode fallback: pastel approximation of the shader's light palette —
   low blob mix over the pale field instead of saturated-on-dark */
[data-mode="light"] .blobfield {
    background:
        radial-gradient(55vmax 55vmax at 15% 25%, color-mix(in srgb, var(--blob-1) 26%, transparent), transparent 70%),
        radial-gradient(60vmax 60vmax at 85% 15%, color-mix(in srgb, var(--blob-2) 24%, transparent), transparent 70%),
        radial-gradient(50vmax 50vmax at 75% 80%, color-mix(in srgb, var(--blob-3) 22%, transparent), transparent 70%),
        radial-gradient(45vmax 45vmax at 20% 85%, color-mix(in srgb, var(--blob-4, var(--blob-1)) 20%, transparent), transparent 70%),
        var(--field-page);
}

/* The field owns the page background; body goes transparent so the
   fixed blobfield shows through. html carries the mode's field color as
   a pre-paint/overscroll fallback (pale in light, dark lamp in dark). */
html {
    background: var(--field-page);
}

body {
    background: transparent !important; /* overrides legacy body bg in styles.css */
    font-family: var(--font-ui);
}

/* Display face for page + card headings; data stays in Inter
   (Space Grotesk's figures aren't tabular) */
h1, h2 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}

/* Tabular numerals everywhere data lives */
.num,
td.numeric,
.stat-tile-value,
.chart-live-label,
.chart-live-change,
.watchlist-price-loaded {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Reduced motion: kill drift/morph animation globally for the field */
@media (prefers-reduced-motion: reduce) {
    .blobfield {
        transition: none;
    }
}