/* ==========================================================================
   RDI Technologies Design System — V2 Tokens
   ==========================================================================
   A three-tier token architecture:
     (1) PRIMITIVE  — raw palette & scale (don't reference in components).
     (2) SEMANTIC   — named by role (fg-1, bg-card, accent, status-alarm…).
     (3) COMPONENT  — named by part  (btn-bg, input-border, tab-active-bg…).

   Two themes: [data-theme="light"] (default, marketing + product chrome)
               [data-theme="dark"]  (TrueSight workspace, deep ops screens)
   Anchored to the real RDI brand palette (see Branding Guidelines 2025):
     Primary Red  #BA2528   Cool Gray 10C  #5F6773   Cool Gray 4C  #B0B7C0
     Titillium Web is the secondary product/body face.

   Typography reconciliation:
     The official RDI brand uses ITC Avant Garde Gothic (wordmark, print),
     Titillium Web (secondary), Tahoma (fallback).
     For PRODUCT UI we use Titillium Web as the single body/display face to
     eliminate cross-platform licensing issues and keep tabular figures stable.
     See README.md § "Brand Typography vs Product Typography".
   ========================================================================== */

/* Titillium Web — brand-sanctioned secondary face, locally hosted */
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Mono for measurement readouts (substitute — see README for flag). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   PRIMITIVES — raw values. Don't reference in component CSS.
   ============================================================ */
:root {
  /* --- Neutral ramp (cool gray, per RDI PMS Cool Gray family) --- */
  --gray-0:  #FFFFFF;
  --gray-1:  #FAFBFC;
  --gray-2:  #F4F6F8;
  --gray-3:  #EDF0F3;
  --gray-4:  #E1E5EA;
  --gray-5:  #CED3DA;   /* Near PMS Cool Gray 4C tint */
  --gray-6:  #B0B7C0;   /* PMS Cool Gray 4C — RDI brand gray */
  --gray-7:  #8A919B;
  --gray-8:  #5F6773;   /* PMS Cool Gray 10C — RDI brand gray (dark) */
  --gray-9:  #3D444D;
  --gray-10: #252A31;
  --gray-11: #14181D;
  --gray-12: #0A0C0F;
  --white:   #FFFFFF;
  --black:   #000000;

  /* --- Brand Red (RDI Primary — Pantone 7623 C) --- */
  --rdi-red-50:  #FFF1F1;
  --rdi-red-100: #FFE2E3;
  --rdi-red-200: #FFC7C8;
  --rdi-red-300: #F59094;
  --rdi-red-400: #D95257;
  --rdi-red-500: #BA2528;   /* <-- canonical RDI red (HEX from brand PDF) */
  --rdi-red-600: #9B1C1F;
  --rdi-red-700: #7A1517;
  --rdi-red-800: #5A0E10;
  --rdi-red-900: #3A0709;

  /* --- Instrument Cyan (HUD / measurement secondary) --- */
  --cyan-50:  #F0FAFC;
  --cyan-100: #D9F2F7;
  --cyan-200: #AEE1EC;
  --cyan-300: #76C8DA;
  --cyan-400: #3BA6BF;
  --cyan-500: #1A86A1;
  --cyan-600: #0F6A83;
  --cyan-700: #095265;
  --cyan-800: #063E4D;
  --cyan-900: #03272F;

  /* --- Status ramps (full scales for data-viz & state backgrounds) --- */
  --green-50:  #F0FDF4; --green-100: #DCFCE7; --green-200: #BBF7D0;
  --green-300: #86EFAC; --green-400: #4ADE80; --green-500: #16A34A;
  --green-600: #15803D; --green-700: #166534; --green-800: #14532D;

  --amber-50:  #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE68A;
  --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #D97706;
  --amber-600: #B45309; --amber-700: #92400E; --amber-800: #7C2D12;

  --red-50:    #FEF2F2; --red-100: #FEE2E2; --red-200: #FECACA;
  --red-300:   #FCA5A5; --red-400: #F87171; --red-500: #DC2626;
  --red-600:   #B91C1C; --red-700: #991B1B; --red-800: #7F1D1D;

  --blue-50:   #EFF6FF; --blue-100: #DBEAFE; --blue-200: #BFDBFE;
  --blue-300:  #93C5FD; --blue-400: #60A5FA; --blue-500: #2563EB;
  --blue-600:  #1D4ED8; --blue-700: #1E40AF; --blue-800: #1E3A8A;

  --violet-400: #A78BFA; --violet-500: #7C3AED; --violet-600: #6D28D9;

  /* --- Data-viz categorical (chart palette — 10 distinct hues,
        ordered for reliable differentiation on light AND dark) --- */
  --viz-1:  #BA2528;  /* brand red */
  --viz-2:  #0F6A83;  /* instrument cyan */
  --viz-3:  #D97706;  /* amber */
  --viz-4:  #15803D;  /* green */
  --viz-5:  #1D4ED8;  /* blue */
  --viz-6:  #7C3AED;  /* violet */
  --viz-7:  #9B1C1F;  /* red deep */
  --viz-8:  #0891B2;  /* cyan bright */
  --viz-9:  #92400E;  /* amber deep */
  --viz-10: #166534;  /* green deep */

  /* --- Data-viz sequential (heatmap / single-hue ramps) --- */
  --viz-seq-1: #F0FAFC;
  --viz-seq-2: #AEE1EC;
  --viz-seq-3: #3BA6BF;
  --viz-seq-4: #0F6A83;
  --viz-seq-5: #063E4D;

  /* --- Data-viz diverging (signed deltas — red..neutral..cyan) --- */
  --viz-div-neg-2: #7A1517;
  --viz-div-neg-1: #D95257;
  --viz-div-zero:  #E1E5EA;
  --viz-div-pos-1: #3BA6BF;
  --viz-div-pos-2: #095265;

  /* ============================================================
     TYPOGRAPHY — primitives
     ============================================================ */
  --font-display: 'Titillium Web', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Titillium Web', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-wordmark:'ITC Avant Garde Gothic', 'Century Gothic', 'Titillium Web', sans-serif; /* WORDMARK ONLY — do not use in product UI */

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  80px;
  --fs-6xl:  112px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-hero:   0.01em;
  --ls-caps:   0.08em;
  --ls-normal: 0;
  --ls-tight: -0.015em;

  /* ============================================================
     SPACING — 4pt base
     ============================================================ */
  --sp-0:   0;
  --sp-0-5: 2px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* Radii */
  --r-0:    0;
  --r-1:    3px;
  --r-2:    6px;
  --r-3:    10px;
  --r-4:   14px;
  --r-5:   20px;
  --r-full: 999px;

  /* ============================================================
     LAYOUT / BREAKPOINTS
     ============================================================ */
  --bp-xs:   480px;  /* small phones */
  --bp-sm:   640px;  /* phones */
  --bp-md:   900px;  /* tablets */
  --bp-lg:  1200px;  /* laptop */
  --bp-xl:  1440px;  /* desktop */
  --bp-2xl: 1920px;  /* wide monitors (control room) */

  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-max: 1440px;

  --grid-gutter: 24px;
  --grid-gutter-sm: 16px;

  --nav-h: 68px;
  --nav-h-product: 48px;
  --footer-h: 26px;

  /* ============================================================
     MOTION — durations, easings, semantic roles
     ============================================================ */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --dur-instant: 80ms;
  --dur-fast:    120ms;
  --dur-normal:  220ms;
  --dur-slow:    420ms;
  --dur-deliberate: 600ms;

  /* Semantic motion roles (use these, not raw durations) */
  --motion-hover:     var(--dur-fast)   var(--ease-out);
  --motion-press:     var(--dur-instant) var(--ease-out);
  --motion-enter:     var(--dur-normal) var(--ease-out);
  --motion-exit:      var(--dur-fast)   var(--ease-in);
  --motion-layout:    var(--dur-slow)   var(--ease-emphasized);
  --motion-data:      var(--dur-slow)   var(--ease-out);      /* chart reveals, count-ups */
  --motion-alarm:     1.2s ease-in-out; /* pulse loop */
  --motion-live:      1.2s ease-in-out; /* live dot pulse */

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:   1000;
  --z-tooltip: 1100;
}

/* ============================================================
   SEMANTIC — LIGHT THEME (default)

   IMPORTANT — Token naming convention:
   All semantic color tokens are now generated by tokens/build.mjs and
   live in tokens/build/tokens.css (loaded before this file).
   Canonical names follow the pattern:  --color-<role>-<variant>
   The short aliases below (--bg-*, --fg-*, --accent, etc.) are kept for
   backward compatibility with Explorer chrome and dark-theme overrides.
   New component CSS must use the canonical --color-* names directly.
   ============================================================ */
:root,
[data-theme="light"] {
  /* ── Backward-compat surface aliases → canonical --color-surface-* ── */
  --bg-0:       var(--color-surface-page);
  --bg-1:       var(--color-surface-sunken);
  --bg-2:       var(--color-surface-raised);
  --bg-3:       var(--color-surface-overlay);
  --bg-4:       var(--color-surface-overlay);
  --bg-card:    var(--color-surface-card);
  --bg-input:   var(--color-surface-page);
  --bg-overlay: rgba(15, 23, 42, 0.48);
  --bg-scrim:   linear-gradient(180deg, transparent 0%, rgba(10,12,15,0.72) 100%);

  /* ── Backward-compat text aliases → canonical --color-text-* ── */
  --fg-1:       var(--color-text-primary);
  --fg-2:       var(--color-text-secondary);
  --fg-3:       var(--color-text-tertiary);
  --fg-4:       var(--color-text-disabled);
  --fg-5:       var(--color-text-disabled);
  --fg-on-accent: var(--color-text-onAccent);
  --fg-inverse:   var(--color-text-onAccent);
  --fg-link:      var(--color-accent-default);
  --fg-link-hover:var(--color-accent-hover);

  /* ── Backward-compat border aliases → canonical --color-border-* ── */
  --border-1:     var(--color-border-subtle);
  --border-2:     var(--color-border-default);
  --border-3:     var(--color-border-strong);
  --border-strong:var(--color-border-strong);
  --border-focus: var(--color-accent-default);

  /* ── Backward-compat accent aliases → canonical --color-accent-* ── */
  --accent:        var(--color-accent-default);
  --accent-hover:  var(--color-accent-hover);
  --accent-press:  var(--color-accent-press);
  --accent-fg:     var(--color-text-onAccent);
  --accent-soft:   var(--color-accent-soft);
  --accent-border: var(--color-accent-ring);

  --accent-2:       var(--color-accent2-default);
  --accent-2-hover: var(--color-accent2-default);
  --accent-2-soft:  var(--color-accent2-default);

  /* ── Backward-compat status aliases → canonical --color-status-*-* ── */
  --status-pass:           var(--color-status-pass-fg);
  --status-pass-bg:        var(--color-status-pass-bg);
  --status-pass-border:    var(--color-status-pass-border);

  --status-caution:        var(--color-status-caution-fg);
  --status-caution-bg:     var(--color-status-caution-bg);
  --status-caution-border: var(--color-status-caution-border);

  --status-alarm:          var(--color-status-alarm-fg);
  --status-alarm-bg:       var(--color-status-alarm-bg);
  --status-alarm-border:   var(--color-status-alarm-border);

  --status-info:           var(--color-status-info-fg);
  --status-info-bg:        var(--color-status-info-bg);
  --status-info-border:    var(--color-status-info-border);

  --status-neutral:        var(--color-status-neutral-fg);
  --status-neutral-bg:     var(--color-status-neutral-bg);
  --status-neutral-border: var(--color-status-neutral-border);

  /* TrueSight product status aliases (chart + overlay layers) */
  --ts-pass:    var(--color-status-pass-fg);
  --ts-caution: var(--color-status-caution-fg);
  --ts-alarm:   var(--color-status-alarm-fg);
  --ts-info:    var(--color-status-info-fg);

  /* ── Shadows ── */
  --shadow-0: 0 0 0 1px rgba(15,23,42,0.04);
  --shadow-1: 0 1px 2px rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.04);
  --shadow-2: 0 4px 16px -4px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
  --shadow-3: 0 24px 60px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.05);
  --shadow-inset-1: inset 0 1px 0 rgba(15,23,42,0.04);
  --shadow-focus:   0 0 0 3px var(--color-accent-ring);
  --ring-focus:     0 0 0 3px var(--color-accent-ring);

  /* ── State layers ── */
  --overlay-hover:  var(--color-surface-hover);
  --overlay-press:  rgba(15,23,42,0.08);
  --overlay-select: rgba(186,37,40,0.08);

  /* ============================================================
     COMPONENT TOKENS — reference canonical --color-* names
     ============================================================ */
  /* Button — primary */
  --btn-primary-bg:          var(--color-accent-default);
  --btn-primary-bg-hover:    var(--color-accent-hover);
  --btn-primary-bg-press:    var(--color-accent-press);
  --btn-primary-fg:          var(--color-text-onAccent);
  --btn-primary-border:      transparent;

  /* Button — secondary */
  --btn-secondary-bg:        var(--color-surface-raised);
  --btn-secondary-bg-hover:  var(--color-surface-overlay);
  --btn-secondary-bg-press:  var(--color-surface-overlay);
  --btn-secondary-fg:        var(--color-text-primary);
  --btn-secondary-border:    transparent;

  /* Button — ghost */
  --btn-ghost-bg:            var(--color-surface-page);
  --btn-ghost-bg-hover:      var(--color-surface-raised);
  --btn-ghost-bg-press:      var(--color-surface-overlay);
  --btn-ghost-fg:            var(--color-text-primary);
  --btn-ghost-border:        var(--color-border-default);

  /* Button — danger */
  --btn-danger-bg:           #9B1C1F;
  --btn-danger-bg-hover:     #7A1517;
  --btn-danger-bg-press:     #5A0E10;
  --btn-danger-fg:           var(--color-text-onAccent);

  /* Toolbar rail */
  --toolbar-rail-bg:         rgba(52,58,64,0.8);
  --toolbar-rail-bg-hover:   rgba(52,58,64,0.92);

  /* Input */
  --input-bg:                var(--color-surface-page);
  --input-bg-hover:          var(--color-surface-sunken);
  --input-bg-disabled:       var(--color-surface-raised);
  --input-fg:                var(--color-text-primary);
  --input-placeholder:       var(--color-text-disabled);
  --input-border:            var(--color-border-strong);
  --input-border-hover:      var(--color-border-strong);
  --input-border-focus:      var(--color-accent-default);
  --input-border-error:      var(--color-status-alarm-fg);
  --input-border-success:    var(--color-status-pass-fg);

  /* Card */
  --card-bg:     var(--color-surface-card);
  --card-border: var(--color-border-default);
  --card-shadow: var(--shadow-1);

  /* Tab */
  --tab-bg:           transparent;
  --tab-bg-hover:     var(--color-surface-raised);
  --tab-bg-active:    var(--color-surface-page);
  --tab-fg:           var(--color-text-tertiary);
  --tab-fg-active:    var(--color-text-primary);
  --tab-indicator:    var(--color-accent-default);

  /* Table */
  --table-bg:              var(--color-surface-page);
  --table-row-bg-hover:    var(--color-surface-sunken);
  --table-row-bg-selected: var(--overlay-select);
  --table-header-bg:       var(--color-surface-sunken);
  --table-header-fg:       var(--color-text-tertiary);
  --table-border:          var(--color-border-subtle);

  /* Toast / banner */
  --toast-bg:     var(--color-surface-card);
  --toast-border: var(--color-border-default);
  --toast-shadow: var(--shadow-3);

  /* Tooltip */
  --tooltip-bg: var(--color-text-primary);
  --tooltip-fg: var(--color-text-onAccent);

  /* Nav / chrome */
  --nav-bg:    color-mix(in srgb, var(--color-surface-page) 88%, transparent);
  --nav-border:var(--color-border-subtle);
  --chart-grid:var(--color-border-subtle);
  --chart-axis:var(--color-text-disabled);

  /* Focus */
  --focus-ring:        var(--shadow-focus);
  --focus-ring-offset: var(--color-surface-page);
}

/* ============================================================
   SEMANTIC — DARK THEME (TrueSight workspace)
   Floor: #343A40 (WCAG-friendly, per V1 decision).

   Overrides both --color-* canonical names AND backward-compat aliases
   so that dark mode works for all component CSS.
   ============================================================ */
:root[data-theme="dark"],
[data-theme="dark"] {
  /* ── Canonical --color-* overrides ── */
  --color-accent-default:  #F08589;
  --color-accent-hover:    #F59094;
  --color-accent-press:    #FFC7C8;
  --color-accent-soft:     rgba(240, 133, 137, 0.14);
  --color-accent-ring:     rgba(240, 133, 137, 0.32);
  --color-accent2-default: #5EC2D9;

  --color-surface-page:    #343A40;
  --color-surface-sunken:  #3A4046;
  --color-surface-raised:  #41474E;
  --color-surface-overlay: #4A5058;
  --color-surface-card:    #3A4046;
  --color-surface-hover:   rgba(255,255,255,0.05);
  --color-surface-scrim:   rgba(10, 12, 15, 0.72);

  --color-text-primary:    #F7F9FB;
  --color-text-secondary:  #DFE3E8;
  --color-text-tertiary:   #A6ADB6;
  --color-text-disabled:   #7E8690;
  --color-text-onAccent:   #14181D;

  --color-border-subtle:   #454B53;
  --color-border-default:  #545B64;
  --color-border-strong:   #6A717B;

  --color-status-pass-fg:      #34D399;
  --color-status-pass-bg:      rgba(52, 211, 153, 0.14);
  --color-status-pass-border:  rgba(52, 211, 153, 0.32);
  --color-status-caution-fg:   #FBBF24;
  --color-status-caution-bg:   rgba(251, 191, 36, 0.14);
  --color-status-caution-border: rgba(251, 191, 36, 0.32);
  --color-status-alarm-fg:     #F87171;
  --color-status-alarm-bg:     rgba(248, 113, 113, 0.14);
  --color-status-alarm-border: rgba(248, 113, 113, 0.32);
  --color-status-info-fg:      #60A5FA;
  --color-status-info-bg:      rgba(96, 165, 250, 0.14);
  --color-status-info-border:  rgba(96, 165, 250, 0.32);
  --color-status-neutral-fg:   #A6ADB6;
  --color-status-neutral-bg:   rgba(166, 173, 182, 0.12);
  --color-status-neutral-border: rgba(166, 173, 182, 0.28);

  /* Data visualization roles shared by web charts and future native themes. */
  --color-data-series1:   var(--color-accent2-default);
  --color-data-series2:   var(--color-accent-default);
  --color-data-series3:   var(--color-status-info-fg);
  --color-data-series4:   var(--color-status-pass-fg);
  --color-data-series5:   var(--color-status-caution-fg);
  --color-data-positive:  var(--color-status-pass-fg);
  --color-data-negative:  var(--color-status-alarm-fg);
  --color-data-forecast:  var(--color-status-info-fg);
  --color-data-reference: var(--color-text-tertiary);
  --color-data-band:      color-mix(in srgb, var(--color-status-info-fg) 18%, transparent);

  --focus-ring-color: var(--color-accent-ring);
  --shadow-card:      var(--shadow-2);
  --shadow-overlay:   var(--shadow-3);

  /* ── Backward-compat aliases ── */
  --bg-0:      var(--color-surface-page);
  --bg-1:      var(--color-surface-sunken);
  --bg-2:      var(--color-surface-raised);
  --bg-3:      var(--color-surface-overlay);
  --bg-4:      var(--color-surface-overlay);
  --bg-card:   var(--color-surface-card);
  --bg-input:  var(--color-surface-raised);
  --bg-overlay: rgba(10, 12, 15, 0.72);
  --bg-scrim:   linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);

  --fg-1:       var(--color-text-primary);
  --fg-2:       var(--color-text-secondary);
  --fg-3:       var(--color-text-tertiary);
  --fg-4:       var(--color-text-disabled);
  --fg-5:       #636A74;
  --fg-on-accent: var(--color-text-onAccent);
  --fg-inverse:   #14181D;
  --fg-link:      #F59094;
  --fg-link-hover:#FFC7C8;

  --border-1:     var(--color-border-subtle);
  --border-2:     var(--color-border-default);
  --border-3:     var(--color-border-strong);
  --border-strong:#8A919B;
  --border-focus: var(--color-accent-default);

  --accent:        var(--color-accent-default);
  --accent-hover:  var(--color-accent-hover);
  --accent-press:  var(--color-accent-press);
  --accent-fg:     var(--color-text-onAccent);
  --accent-soft:   var(--color-accent-soft);
  --accent-border: var(--color-accent-ring);

  --accent-2:       var(--color-accent2-default);
  --accent-2-hover: #76C8DA;
  --accent-2-soft:  rgba(94, 194, 217, 0.14);

  --status-pass:           var(--color-status-pass-fg);
  --status-pass-bg:        var(--color-status-pass-bg);
  --status-pass-border:    var(--color-status-pass-border);
  --status-caution:        var(--color-status-caution-fg);
  --status-caution-bg:     var(--color-status-caution-bg);
  --status-caution-border: var(--color-status-caution-border);
  --status-alarm:          var(--color-status-alarm-fg);
  --status-alarm-bg:       var(--color-status-alarm-bg);
  --status-alarm-border:   var(--color-status-alarm-border);
  --status-info:           var(--color-status-info-fg);
  --status-info-bg:        var(--color-status-info-bg);
  --status-info-border:    var(--color-status-info-border);
  --status-neutral:        var(--color-status-neutral-fg);
  --status-neutral-bg:     var(--color-status-neutral-bg);
  --status-neutral-border: var(--color-status-neutral-border);

  --ts-pass: var(--color-status-pass-fg); --ts-caution: var(--color-status-caution-fg);
  --ts-alarm: var(--color-status-alarm-fg); --ts-info: var(--color-status-info-fg);

  --shadow-0: 0 0 0 1px rgba(0,0,0,0.3);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.38);
  --shadow-inset-1: inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-focus:   0 0 0 3px var(--color-accent-ring);
  --ring-focus:     0 0 0 3px var(--color-accent-ring);

  --overlay-hover:  var(--color-surface-hover);
  --overlay-press:  rgba(255,255,255,0.08);
  --overlay-select: rgba(240,133,137,0.12);

  --tooltip-bg: #0A0C0F;
  --tooltip-fg: var(--color-text-primary);

  --chart-grid: var(--color-border-subtle);
  --chart-axis: var(--color-text-disabled);
}

/* ============================================================
   REDUCED MOTION — respect user preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-normal: 0ms;
    --dur-slow: 0ms; --dur-deliberate: 0ms;
    --motion-alarm: 0s; --motion-live: 0s;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-0);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent-soft); color: var(--fg-1); }

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.rdi-hero {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 9vw, var(--fs-6xl));
  line-height: var(--lh-tight); letter-spacing: var(--ls-hero);
  text-transform: uppercase; color: var(--fg-1);
}
.rdi-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-4xl); line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero); text-transform: uppercase; color: var(--fg-1);
}
.rdi-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xl); line-height: var(--lh-snug);
  letter-spacing: var(--ls-hero); text-transform: uppercase; color: var(--fg-1);
}
.rdi-h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-2xl); line-height: var(--lh-snug);
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg-1);
}
.rdi-h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-xl); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight); color: var(--fg-1);
}
.rdi-eyebrow {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-xs); line-height: 1;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-3);
}
.rdi-lead  { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.rdi-body  { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--fg-2); }
.rdi-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.rdi-mono  { font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.rdi-stat  { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5xl); line-height: 1; letter-spacing: var(--ls-tight); color: var(--fg-1); font-feature-settings: 'tnum'; }
.rdi-measurement { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cyan-600); }
[data-theme="dark"] .rdi-measurement { color: var(--accent-2); }

/* ============================================================
   BUTTON
   ============================================================ */
.rdi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.02em; border-radius: var(--r-2);
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  cursor: pointer; user-select: none;
  transition: background var(--motion-hover), border-color var(--motion-hover),
              color var(--motion-hover), box-shadow var(--motion-hover);
}
.rdi-btn:hover  { background: var(--btn-primary-bg-hover); }
.rdi-btn:active { background: var(--btn-primary-bg-press); }
.rdi-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.rdi-btn[disabled], .rdi-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.rdi-btn--ghost     { background: var(--btn-ghost-bg); color: var(--btn-ghost-fg); border-color: var(--btn-ghost-border); }
.rdi-btn--ghost:hover  { background: var(--btn-ghost-bg-hover); border-color: var(--border-3); }
.rdi-btn--secondary { background: var(--bg-2); color: var(--fg-1); }
.rdi-btn--secondary:hover { background: var(--bg-3); }
.rdi-btn--danger    { background: var(--btn-danger-bg); color: var(--btn-danger-fg); }
.rdi-btn--danger:hover { background: var(--btn-danger-bg-hover); }
.rdi-btn--link      { background: transparent; color: var(--fg-1); padding: 6px 0; border: none; border-bottom: 1px solid var(--accent); border-radius: 0; }
.rdi-btn--link:hover{ color: var(--accent); background: transparent; }
.rdi-btn--sm        { padding: 6px 14px; font-size: var(--fs-xs); }
.rdi-btn--lg        { padding: 14px 28px; font-size: var(--fs-base); }
.rdi-btn--icon      { padding: 8px; width: 36px; }

/* Loading spinner — append <span class="rdi-spinner"/> inside button */
.rdi-spinner {
  width: 14px; height: 14px; border-radius: 99px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: rdi-spin 700ms linear infinite;
  display: inline-block;
}
@keyframes rdi-spin { to { transform: rotate(360deg); } }

/* ============================================================
   UTILITY
   ============================================================ */
.rdi-divider { height: 1px; background: var(--border-1); border: 0; }
.rdi-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-3); box-shadow: var(--card-shadow);
}
.rdi-dot-grid {
  background-image: radial-gradient(rgba(15,23,42,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
[data-theme="dark"] .rdi-dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* Focus-visible base */
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-1); }

/* Screen-reader-only */
.rdi-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Live pulse (status dot) */
@keyframes rdi-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.88); }
}
.rdi-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 99px;
  background: var(--accent); animation: rdi-pulse var(--motion-live) infinite;
}

/* Skeleton shimmer */
@keyframes rdi-shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
.rdi-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%; animation: rdi-shimmer 1.6s linear infinite;
  border-radius: var(--r-1);
}

/* ── Grafana parity component styles (Combobox, TagsInput, Stat,
       LoadingBar, Counter, Toggletip) ──────────────────────────── */

.rdi-combobox {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 220px;
  background: var(--color-surface-default, #fff);
  border: 1px solid var(--color-border-default, #cbd5e1);
  border-radius: var(--r-sm, 4px);
  padding: 0 8px;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--color-text-primary, #0f172a);
}
.rdi-combobox.is-disabled { opacity: .55; pointer-events: none; }
.rdi-combobox--sm { height: 24px; font-size: 12px; }
.rdi-combobox--md { height: 32px; font-size: 13px; }
.rdi-combobox--lg { height: 40px; font-size: 15px; }
.rdi-combobox__input {
  flex: 1 1 auto;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  height: 100%;
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0;
}
.rdi-combobox__caret {
  margin-left: 6px;
  color: var(--color-text-tertiary, #64748b);
  font-size: 10px;
}

.rdi-tags-input {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 220px;
  min-height: 32px;
  padding: 4px 6px;
  background: var(--color-surface-default, #fff);
  border: 1px solid var(--color-border-default, #cbd5e1);
  border-radius: var(--r-sm, 4px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
}
.rdi-tags-input.is-disabled { opacity: .55; pointer-events: none; }
.rdi-tags-input__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-accent-subtle, rgba(59,111,242,0.12));
  color: var(--color-accent-default, #3B6FF2);
  border-radius: 999px;
  padding: 1px 4px 1px 8px;
  font-size: 11px;
  font-weight: 500;
}
.rdi-tags-input__remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 999px;
}
.rdi-tags-input__remove:hover { background: rgba(0,0,0,0.08); }
.rdi-tags-input__input {
  flex: 1 1 60px;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  color: var(--color-text-primary, #0f172a);
  min-width: 60px;
}

.rdi-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface-default, #fff);
  border: 1px solid var(--color-border-subtle, #e2e8f0);
  border-radius: var(--r-md, 6px);
  padding: 12px 14px;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--color-text-primary, #0f172a);
  min-width: 140px;
}
.rdi-stat--accent { border-color: var(--color-accent-default, #3B6FF2); }
.rdi-stat--success { border-color: var(--color-status-pass-fg, #16a34a); }
.rdi-stat--warning { border-color: var(--color-status-warn-fg, #d97706); }
.rdi-stat--danger { border-color: var(--color-status-fail-fg, #dc2626); }
.rdi-stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #475569);
}
.rdi-stat__value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.rdi-stat__number { font-weight: 700; line-height: 1; }
.rdi-stat--sm .rdi-stat__number { font-size: 22px; }
.rdi-stat--md .rdi-stat__number { font-size: 32px; }
.rdi-stat--lg .rdi-stat__number { font-size: 44px; }
.rdi-stat__unit { font-size: 12px; color: var(--color-text-secondary, #475569); }
.rdi-stat__trend { font-size: 11px; font-weight: 500; }
.rdi-stat__trend--up { color: var(--color-status-pass-fg, #16a34a); }
.rdi-stat__trend--down { color: var(--color-status-fail-fg, #dc2626); }
.rdi-stat__trend--flat { color: var(--color-text-tertiary, #64748b); }

.rdi-loading-bar {
  position: relative;
  height: 3px;
  background: var(--color-border-subtle, #e2e8f0);
  border-radius: 999px;
  overflow: hidden;
}
.rdi-loading-bar__fill {
  position: absolute;
  inset: 0;
  width: 30%;
  background: var(--color-accent-default, #3B6FF2);
  border-radius: 999px;
  /* Slide travels from -100% (fully off-screen left) to 400% (fully off-screen
     right past a 30%-wide bar) so the bar disappears completely between
     iterations, mimicking Grafana's indeterminate loader. */
  animation: rdi-loading-bar-slide 1.4s ease-in-out infinite;
}
@keyframes rdi-loading-bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.rdi-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 6px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 600;
  background: var(--color-surface-sunken, #f1f5f9);
  color: var(--color-text-primary, #0f172a);
  border: 1px solid var(--color-border-subtle, #e2e8f0);
}
.rdi-counter--sm { height: 14px; min-width: 14px; font-size: 9px; }
.rdi-counter--md { height: 18px; min-width: 18px; font-size: 11px; }
.rdi-counter--accent { background: var(--color-accent-default, #3B6FF2); color: #fff; border-color: transparent; }
.rdi-counter--success { background: var(--color-status-pass-fg, #16a34a); color: #fff; border-color: transparent; }
.rdi-counter--warning { background: var(--color-status-warn-fg, #d97706); color: #fff; border-color: transparent; }
.rdi-counter--danger { background: var(--color-status-fail-fg, #dc2626); color: #fff; border-color: transparent; }

.rdi-toggletip {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.rdi-toggletip__trigger {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border-default, #cbd5e1);
  background: var(--color-surface-default, #fff);
  color: var(--color-text-secondary, #475569);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rdi-toggletip__trigger:hover { background: var(--color-surface-sunken, #f1f5f9); }
.rdi-toggletip__bubble {
  position: absolute;
  background: #1e293b;
  color: #fff;
  border-radius: var(--r-sm, 4px);
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.4;
  max-width: 220px;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.rdi-toggletip--top    .rdi-toggletip__bubble { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.rdi-toggletip--bottom .rdi-toggletip__bubble { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.rdi-toggletip--left   .rdi-toggletip__bubble { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.rdi-toggletip--right  .rdi-toggletip__bubble { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.rdi-toggletip__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: auto;
}