/* Float design tokens.
 *
 * Single source of truth for the visual world. Loaded first by every layout.
 * No surface stylesheet declares its own palette: a second declaration is a
 * second opinion, and a second opinion is how the four surfaces drifted apart.
 *
 * World: cool-white canvas, Ember Green identity, Signal Green data/positive.
 * Fills carry white text. Signal Green never does (3.77:1 would fail 4.5:1).
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/network-dashboard/inter-latin.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;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/network-dashboard/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/network-dashboard/space-mono-400-latin.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;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/network-dashboard/space-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/network-dashboard/space-mono-700-latin.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;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/network-dashboard/space-mono-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---------- Ground ---------- */
    --canvas: #f7fafc;
    --canvas-veil: rgba(247, 250, 252, 0.92);
    --surface: #ffffff;
    --surface-sunk: #edf2f7;
    --surface-2: #f1f5f9;
    --tint: #f0faf7;
    --rule: #e2e8f0;
    --rule-strong: #7c8ba1;

    /* ---------- Ink ---------- */
    --ink: #0f1419;
    --ink-2: #334155;
    --ink-muted: #4a5568;
    --on-brand: #e8f5f1;

    /* ---------- Light inset ----------
     * A mock product screen shown inside a dark brand panel. It is always
     * light, in both themes, because the panel it sits on is always dark, so
     * it must not inherit --surface/--ink or it inverts itself in dark mode. */
    --inset-surface: #ffffff;
    --inset-rule: #e2e8f0;
    --inset-ink: #0f1419;
    --inset-ink-muted: #4a5568;
    --inset-accent-ink: #047857;
    --inset-accent-wash: rgba(5, 150, 105, 0.1);

    /* ---------- Ember Green: identity, chrome, primary action ----------
     * --brand is a fill and carries white text. --brand-ink is the same hue
     * as text or as ink on --brand-soft; dark mode needs them to differ. */
    --brand: #0a4d3c;
    --brand-ink: #0a4d3c;
    --brand-ink-hover: #063a2e;
    --brand-deep: #063a2e;
    --brand-band: #063a2e;
    --brand-soft: #e8f5f1;
    --brand-veil: rgba(10, 77, 60, 0.12);
    --brand-ghost: rgba(10, 77, 60, 0.07);
    --on-brand-ghost: rgba(232, 245, 241, 0.1);
    --on-brand-line: rgba(232, 245, 241, 0.2);
    --on-brand-hover: #d1fae5;
    --on-brand-muted: rgba(232, 245, 241, 0.92);
    --on-brand-veil: rgba(232, 245, 241, 0.75);

    /* ---------- Signal Green: positive, focus, data marks ----------
     * Fill and stroke only. Text on light uses --accent-ink (5.48:1). */
    --accent: #059669;
    --accent-ink: #047857;
    --accent-wash: rgba(5, 150, 105, 0.1);

    /* ---------- Semantic ---------- */
    --danger: #c81e1e;
    --on-danger: #ffffff;
    --danger-soft: #fef2f2;
    --danger-veil: rgba(200, 30, 30, 0.28);
    --warn: #b45309;
    --warn-soft: #fef3c7;
    /* --warn on --warn-soft lands at 4.51:1, which clears AA by nothing at all.
     * Same split the palette already makes for Signal: --warn marks, --warn-ink
     * is the only amber any label may use as a text colour. 6.51:1. */
    --warn-ink: #92400e;

    /* ---------- Accent washes ----------
     * A mark colour needs a low-alpha form for progress, state fills, and
     * decorative blur. Control boundaries use --rule-strong, not the accent. */

    /* ---------- Scrim ----------
     * The dimming layer behind a modal or an off-canvas drawer. Cool near-black,
     * so it reads as the same world receding rather than a grey film over it. */
    --scrim: rgba(9, 16, 13, 0.54);
    --scrim-soft: rgba(9, 16, 13, 0.45);

    /* ---------- Translucent control fill ----------
     * Header icon buttons sit on the header, which is itself translucent. A
     * near-transparent white lift is what separates them from it. */
    --control-wash: rgba(255, 255, 255, 0.04);

    /* ---------- Browser chrome: the select caret ----------
     * Bootstrap draws its caret from a hardcoded #343a40 chevron. On the dark
     * surface that lands at 1.05:1 — a caret nobody can see, on the one control
     * that most needs to advertise that it opens something. The glyph is colour,
     * so it is declared here with the palette and handed to Bootstrap's variable
     * by base.css, which owns the framework bridge. */
    --select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23334155' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* ---------- Elevation: green-tinted, never neutral grey ---------- */
    --shadow-sm: 0 1px 2px rgba(10, 77, 60, 0.06);
    --shadow: 0 4px 12px rgba(10, 77, 60, 0.08);
    --shadow-lg: 0 10px 26px rgba(10, 77, 60, 0.12);
    --shadow-brand: 0 10px 15px -3px rgba(10, 77, 60, 0.2), 0 4px 6px -2px rgba(10, 77, 60, 0.2);

    /* ---------- Radius ---------- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;

    /* ---------- Type ---------- */
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* The operational ramp. Every functional size is one of these roles; label is
     * the 11px floor. The landing page layers its fluid display sizes on top. */
    --type-label: 0.7rem;
    --type-micro: 0.75rem;
    --type-meta: 0.8125rem;
    --type-small: 0.875rem;
    --type-body: 0.9375rem;
    --type-lead: 1rem;
    --type-title: 1.125rem;
    --type-subhead: 1.25rem;
    --type-headline: 1.5rem;
    --type-metric: 1.875rem;

    /* ---------- Motion ---------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.18s;
    --dur-base: 0.28s;

    /* ---------- Shared geometry ---------- */
    --nav-width: 16rem;
}

/* Dark mode is a mode of this world, not a second world: the same Ember and
 * Signal greens over a cool near-black ground. Values are chosen so every
 * ink/background pair clears WCAG 2.2 AA, and so a --brand button fill still
 * separates from the surface it sits on (3:1) while carrying white text (4.5:1). */
[data-theme='dark'] {
    --canvas: #0d1411;
    --canvas-veil: rgba(13, 20, 17, 0.92);
    --surface: #141d19;
    --surface-sunk: #080e0c;
    --surface-2: #1d2723;
    --tint: #12211c;
    --rule: rgba(232, 245, 241, 0.13);
    --rule-strong: rgba(232, 245, 241, 0.75);

    --ink: #f2f7f5;
    --ink-2: #c3d0cb;
    --ink-muted: #93a29c;
    --on-brand: #e8f5f1;

    /* A light inset stays light in dark mode: the panel behind it is always
     * dark, so matching the page theme here would invert the mock screen. */
    --inset-surface: #ffffff;
    --inset-rule: #e2e8f0;
    --inset-ink: #0f1419;
    --inset-ink-muted: #4a5568;
    --inset-accent-ink: #047857;
    --inset-accent-wash: rgba(5, 150, 105, 0.1);

    --brand: #0a755f;
    --brand-ink: #7ee0b8;
    --brand-ink-hover: #a7f3d0;
    --brand-deep: #086c56;
    --brand-band: #07604d;
    --brand-soft: rgba(6, 58, 46, 0.55);
    --brand-veil: rgba(16, 185, 129, 0.16);
    --brand-ghost: rgba(16, 185, 129, 0.1);
    --on-brand-ghost: rgba(232, 245, 241, 0.12);
    --on-brand-line: rgba(232, 245, 241, 0.24);
    --on-brand-hover: #c9f2e2;
    --on-brand-muted: rgba(232, 245, 241, 0.92);
    --on-brand-veil: rgba(232, 245, 241, 0.75);

    --accent: #10b981;
    --accent-ink: #6ee7b7;
    --accent-wash: rgba(16, 185, 129, 0.14);

    --danger: #f87171;
    /* White on the lifted dark-mode red is 2.77:1; the canvas ink is 6.75:1. */
    --on-danger: #0d1411;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --danger-veil: rgba(248, 113, 113, 0.32);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.14);
    --warn-ink: #fcd34d;

    /* A scrim in dark mode is already over a near-black field, so it is lighter
     * than the light-mode value: the same dimming read, not a second black. */
    --scrim: rgba(0, 0, 0, 0.62);
    --scrim-soft: rgba(0, 0, 0, 0.5);

    --control-wash: rgba(255, 255, 255, 0.06);

    /* Same chevron, carried by the dark muted ink. The light value is 1.05:1 here. */
    --select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a29c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* The same green-tinted shadows as light mode, deepened to read over a near-black
     * ground. A neutral black shadow here would be the one grey shadow in the system. */
    --shadow-sm: 0 1px 2px rgba(1, 22, 16, 0.4);
    --shadow: 0 4px 12px rgba(1, 22, 16, 0.5);
    --shadow-lg: 0 10px 26px rgba(1, 22, 16, 0.6);
    --shadow-brand: 0 10px 15px -3px rgba(1, 22, 16, 0.6), 0 4px 6px -2px rgba(1, 22, 16, 0.5);
}