/* ============================================================================
   Patitur Design System — Color & Type Tokens
   ----------------------------------------------------------------------------
   Single source of truth for color + typography tokens used across Patitur.
   Derived from patitur-service-frontend/flask_app/static/css/design-system.css
   and patitur-auth.css. Names follow the codebase conventions where possible.
   ============================================================================ */

/* ─── Fonts ──────────────────────────────────────────────────────────────── */
/* The product ships with two web fonts loaded from Google Fonts:
     - Ubuntu Sans  (display / headings — Patitur's signature face)
     - Inter        (UI text, body, tables, charts)
   Plus a system monospace stack for IDs, codes, packet payloads.
   See fonts/README.md if you need to swap in self-hosted files. */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
    /* ─── Brand color ─────────────────────────────────────────────────── */
    /* Primary "Green/100" — the Patitur logo green, used for CTA buttons,
       focus rings, active table links, brand banners. */
    --color-brand-green: #25af88;
    --color-brand-green-hover: #1e9a73;
    --color-brand-green-deep: #047857; /* emerald-700, used for hover on internal links */
    --color-brand-green-bright: #01e4bf; /* legacy auth-page accent (bright teal) */
    --color-brand-green-secondary: #0fb39c;
    --color-brand-green-300: #5bdcc6; /* chart bars / decorative */

    /* ─── Neutrals ────────────────────────────────────────────────────── */
    /* Text */
    --fg-1: #101828; /* heading / strong */
    --fg-2: #333333; /* body */
    --fg-3: #4a5565; /* secondary body */
    --fg-4: #6b7280; /* muted */
    --fg-5: #9ca3af; /* placeholder / disabled */
    --fg-on-dark: #ffffff;

    /* Backgrounds */
    --bg-app: #ffffff;
    --bg-page: #f9fafb; /* #content base, soft */
    --bg-canvas: #f8f9fa; /* dashboard outer */
    --bg-card: #ffffff;
    --bg-secondary-medium: #f5f5f5; /* badge backgrounds */
    --bg-sidebar: #1e2939; /* slate-800 — dark nav rail */
    --bg-sidebar-hover: #374151; /* gray-700 — hover row in sidebar */

    /* Borders */
    --border-base: #e5e7eb; /* default 1px */
    --border-medium: #d1d5db;
    --border-strong: #9ca3af;

    /* ─── Semantic colors ─────────────────────────────────────────────── */
    /* Status pills */
    --status-online-bg: #e8f9f3;
    --status-online-fg: #1a7f5f;
    --status-danger-bg: #ffe8e8;
    --status-danger-fg: #c93636;
    --status-warning-bg: #fff3e8;
    --status-warning-fg: #b86e0f;
    --status-info-bg: #e8f6ff;
    --status-info-fg: #2e7db5;
    --status-neutral-bg: #f3f4f6;
    --status-neutral-fg: #6b7280;

    /* Severity badges (alerts) */
    --sev-low-bg: #eef6ff;
    --sev-low-border: #bedbff;
    --sev-low-fg: #1c398e;
    --sev-medium-bg: #fff8f1;
    --sev-medium-border: #fcd9bd;
    --sev-medium-fg: #8b0836;
    --sev-high-bg: #fef0f2;
    --sev-high-border: #ffccd3;
    --sev-high-fg: #8b0836;
    --sev-critical-bg: #fef0f2;
    --sev-critical-border: #ffccd3;
    --sev-critical-fg: #8b0836;

    /* Severity dots (8px circles in alert lists) */
    --sev-dot-high: #ff5e5e; /* coral red */
    --sev-dot-medium: #fe9239; /* warm orange */
    --sev-dot-info: #51c0ff; /* sky blue */
    --sev-dot-low: #51c0ff;

    /* Chart palette (donuts, bars, line) */
    --chart-status-online: #22e5a1;
    --chart-status-offline: #ff5e5e;
    --chart-importance-low: #51c0ff;
    --chart-importance-medium: #fe9239;
    --chart-importance-high: #ff5e5e;
    --chart-alert-bar: #5bdcc6;
    --chart-line-info: #2563eb;

    /* Banners */
    --banner-soft-start: #e8f9f3; /* light green org dashboard banner */
    --banner-soft-end: #d4f1e8;
    --banner-tenant-start: #0f4f3b; /* dark gradient when scoped to a tenant */
    --banner-tenant-end: #25af88;
    --banner-tenant-border: #0d4532;

    --row-highlight: #e0f2fe; /* selected row in tables */

    /* ─── Hex map metric ramps ────────────────────────────────────────
       Geographic H3-aggregated maps (tenant detail Heat Map sub-tab,
       network-health overview, future device-density views) use one of
       three pre-defined color ramps depending on the active metric. Each
       cell carries all three metrics; the toggle only changes the fill.

       Pick by metric character:
         - Density        → sequential single-hue brand green (monotonic)
         - Gateways heard → sequential single-hue blue (monotonic, different
                            hue from density so legends can't be confused)
         - RSSI / signal  → diverging 7-band red→green (has a "good" end)

       Each cell is rendered with both `color` and `fillColor` set to the
       same hex; only `fillOpacity` varies across stops. Stroke weight is
       always 1.2px. See components-hexmap.html and colors-hexmap.html. */

    /* Density (5 stops, sparse → very dense) */
    --hex-density-1: #5bdcc6;
    --hex-density-1-alpha: 0.3; /* 1–2 devices */
    --hex-density-2: #25af88;
    --hex-density-2-alpha: 0.45; /* 3–8 */
    --hex-density-3: #0fb39c;
    --hex-density-3-alpha: 0.55; /* 9–18 */
    --hex-density-4: #047857;
    --hex-density-4-alpha: 0.65; /* 19–30 */
    --hex-density-5: #064e3b;
    --hex-density-5-alpha: 0.78; /* 30+ */

    /* Gateways heard (4 stops, single → fully redundant) */
    --hex-gw-1: #bfdbfe;
    --hex-gw-1-alpha: 0.4; /* 1 gateway */
    --hex-gw-2: #60a5fa;
    --hex-gw-2-alpha: 0.55; /* 2 gateways */
    --hex-gw-3: #3b82f6;
    --hex-gw-3-alpha: 0.6; /* 3 gateways */
    --hex-gw-4: #1d4ed8;
    --hex-gw-4-alpha: 0.7; /* 4+ gateways */

    /* RSSI signal zones (7-band, weak → strong) */
    --hex-rssi-critical: #991b1b; /* < -115 dBm */
    --hex-rssi-poor: #ef4444; /* -115 to -110 */
    --hex-rssi-marginal: #f97316; /* -110 to -105 */
    --hex-rssi-fair: #f59e0b; /* -105 to -100 */
    --hex-rssi-good: #eab308; /* -100 to -90 */
    --hex-rssi-very-good: #84cc16; /* -90 to -80 */
    --hex-rssi-excellent: #22c55e; /* > -80 */
    --hex-rssi-fill-opacity: 0.6; /* same across all 7 bands */

    /* Gateway marker (sits on top of hex cells, also used on the
       message-flow + device-detail maps). Amber-400 dot with a dark
       slate border and a 3px white halo so it reads on any tile. */
    --gw-marker-fill: #fbbf24;
    --gw-marker-border: #1f2937;
    --gw-marker-halo: #ffffff;

    /* ─── Positioning-tier palette ────────────────────────────────────
       Used by the device-positioning view (map-view.html) where SHAPE
       encodes the position method emitted by the analytics engine
       (`DevicePositionPayload.method`). Color is layered on top so an
       operator can ALSO read confidence at a glance — the system never
       has to choose one channel for two meanings.

       Aligned with the brand semantic palette so positioning tiers are
       readable next to severity badges without re-introducing a new hue.
       See positioning-visibility.md §4 and preview/colors-positioning.html. */

    --tier-tri: #25af88; /* Trilateration (3+ gateways) — brand green, highest confidence */
    --tier-bi: #fe9239; /* Bilateration  (2 gateways)  — sev-medium orange, ambiguous */
    --tier-rad: #51c0ff; /* Radial        (1 gateway)   — sev-low blue, lowest confidence */
    --tier-outlier: #ff5e5e; /* Cluster outlier ring (is_outlier=true) — sev-high coral */

    /* Confidence channels (paired with shape, not stand-alone) */
    --tier-tri-fill-alpha: 0.13;
    --tier-bi-cand2-alpha: 0.5; /* second bilateration candidate (the "or here") */
    --tier-rad-ring-alpha: 0.3; /* bare radial ring */
    --tier-rad-arc-base: 0.12; /* dim trough on von-Mises arc */
    --tier-rad-arc-peak: 0.92; /* peak of the arc, in the believed bearing */

    /* ─── Typography (primitives) ─────────────────────────────────────── */
    --font-display: "Ubuntu Sans", "Ubuntu Sans-Medium", Helvetica, sans-serif;
    --font-base:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    --font-mono:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 30px; /* page titles — patitur-main-page-title */
    --fs-3xl: 36px; /* big stat counters */
    --fs-display: 64px; /* dashboard count display */

    --lh-tight: 1;
    --lh-snug: 1.3;
    --lh-base: 1.4;
    --lh-relaxed: 1.6;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ─── Spacing ─────────────────────────────────────────────────────── */
    --sp-0: 0;
    --sp-0_5: 2px;
    --sp-1: 4px;
    --sp-1_5: 6px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-11: 44px;
    --sp-12: 48px;
    --sp-14: 56px;

    /* Page chrome (from design-system.css) */
    --page-max-width: 110rem; /* analyze + compliance pages */
    --page-max-width-narrow: 1280px; /* dashboard + auth-style pages */
    --page-padding: 1rem 1.25rem;
    --page-rail-width: 240px; /* main + rail two-column stage */

    /* ─── Radii ───────────────────────────────────────────────────────── */
    --radius-xs: 4px; /* badges */
    --radius-sm: 6px; /* small buttons, inputs */
    --radius-md: 8px; /* buttons, alert rows */
    --radius-lg: 12px; /* cards */
    --radius-xl: 16px; /* auth card, top-of-page panels */
    --radius-pill: 9999px;

    /* ─── Shadows ─────────────────────────────────────────────────────── */
    /* Patitur uses subtle elevation. The most common card shadow is almost
       imperceptible (1px). The brand "glow" is reserved for focus rings
       and auth surfaces. */
    --shadow-xs: 0 1px 0.5px 0.05px rgba(29, 41, 61, 0.02);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 212, 170, 0.4); /* brand-tinted */
    --shadow-glow: 0 0 0 2px rgba(37, 175, 136, 0.15); /* focus ring  */
    --shadow-modal: 0 10px 35px rgba(0, 0, 0, 0.18);

    /* ─── Transitions ─────────────────────────────────────────────────── */
    --t-fast: 0.15s ease;
    --t-base: 0.2s ease;
    --t-slow: 0.3s ease;
}

/* ─── Semantic typography roles ─────────────────────────────────────────── */
/* Mirrors usage in the product: page titles are Ubuntu Sans Medium 30 in
   brand green; section titles are Ubuntu Sans 18; everything else is Inter. */

html {
    font-family: var(--font-base);
    color: var(--fg-2);
}

h1,
.h1,
.patitur-main-page-title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xl);
    line-height: 28px; /* matches .patitur-main-page-title */
    color: var(--color-brand-green);
    margin: 0;
}

h2,
.h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--fg-1);
}

h3,
.h3,
.panel-title,
.dashboard-card-title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    line-height: 28px;
    color: var(--fg-1);
}

h4,
.h4 {
    font-family: var(--font-base);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--fg-1);
}

p,
.body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--fg-2);
}

.body-sm {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--fg-3);
}

.eyebrow {
    /* Brand-green uppercase scope label used above the tenant banner title.
       Always paired with a 8px brand-green dot. */
    font-family: var(--font-base);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand-green);
}

code,
.code,
.code-chip {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--fg-3);
    background: var(--status-neutral-bg);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
}