/* OpenNebula Theme Variables (safe to load globally)
   Scoped usage recommended via #content-cloud selectors in components */
:root {
  /* Brand palette */
  --brand-primary: #29A7E6;
  --brand-primary-light: #6BC8EF;
  --brand-primary-dark: #0473A9;
  --brand-primary-bg: rgba(41, 167, 230, 0.08);
  --brand-primary-gradient: linear-gradient(135deg, #0473A9 0%, #035B85 100%);
  --brand-primary-deep: #035B85;
  --brand-cta: #F5921E;
  --brand-cta-hover: #E07F0A;
  --brand-highlight: #FAAB4D;
  --brand-highlight-bg: rgba(250, 171, 77, 0.30);

  /* Status colors */
  --brand-success: #2DC76B;
  --brand-success-bg: rgba(45, 199, 107, 0.08);
  --brand-info: #0EA5E9;
  --brand-info-bg: rgba(14, 165, 233, 0.08);
  --brand-danger: #D9252E;
  --brand-danger-bg: rgba(217, 37, 46, 0.08);
  --brand-warning: #F59E0B;
  --brand-warning-bg: rgba(245, 158, 11, 0.08);

  /* Neutral scale */
  --gray-50: #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 20px rgba(41, 167, 230, 0.15);

  /* Icon sizes */
  --icon-size-sm: 16px;
  --icon-size-md: 18px;
  --icon-size-lg: 22px;

  /* Surface gradient for header cards */
  --surface-gradient: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%);

  /* Module Token Bridge (aliases to HostBill 2019 theme vars where available) */
  /* Semantic colors: resolve to theme variables with safe fallbacks */
  --color-primary: var(--primary, #007bff);
  --color-primary-600: #0056b3; /* darker primary, no theme alias available */
  --color-accent: var(--blue, var(--brand-primary, #29A7E6));
  --color-accent-600: var(--brand-primary-dark, #0473A9);
  --color-accent-700: #0369A1;

  --color-success: var(--success, #28a745);
  --color-success-strong: #166534;
  --color-success-700: #1a7f37;
  --color-warning: var(--warning, #ffc107);
  --color-warning-700: #e0a800;
  --color-danger: var(--danger, #dc3545);
  --color-danger-soft: #dc2626;
  --color-danger-700: #dc2626;

  /* Neutrals */
  --color-bg: var(--white, #fff);
  --color-surface: var(--light, #f8f9fa);
  --color-surface-2: var(--gray-200, #e9ecef);
  --color-surface-3: var(--gray-100, #fafbfc);
  --color-border: var(--gray-300, #dee2e6);
  --color-border-strong: var(--gray-300, #e5e7eb);
  --color-fg: var(--dark, #212529);
  --color-fg-strong: #111827;
  --color-fg-subtle: var(--gray-700, #495057);
  --color-fg-subtle-strong: #556274;
  --color-fg-muted: #5f676e;
  --color-fg-inverse: #fff;
  --color-bg-elevated: var(--white, #fff);
  --surface-card: var(--color-bg-elevated, #fff);
  --surface-card-strong: var(--color-bg, #fff);
  --text-inverse: var(--color-fg-inverse, #fff);

  /* Typography & spacing */
  --font-base: var(--font-family-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-10: 10px;        /* Status badge text, compact annotations */
  --font-size-11: 11px;        /* Micro labels, compact annotations */
  --font-size-sm: 12px;        /* (existing) */
  --font-size-12: var(--font-size-sm);
  --font-size-13: 13px;        /* Small body text, nav links, status labels, monospace content */
  --font-size-md: 14px;        /* (existing) */
  --font-size-14: var(--font-size-md);
  --font-size-15: 15px;        /* Button text, action labels */
  --font-size-lg: 16px;        /* (existing) */
  --font-size-16: var(--font-size-lg);
  --font-size-18: 18px;        /* Section headings, card titles, tile values */
  --font-size-20: 20px;        /* Display metrics, hero values */
  --font-size-24: 24px;        /* H1 headings, large metric displays, close glyphs */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-650: 650;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-normal: var(--font-weight-400, 400);
  --font-weight-medium: var(--font-weight-500, 500);
  --font-weight-semibold: var(--font-weight-600, 600);
  --font-weight-bold: var(--font-weight-700, 700);
  --line-height-100: 1;
  --line-height-120: 1.2;
  --line-height-125: 1.25;
  --line-height-130: 1.3;
  --line-height-133: 1.33;
  --line-height-135: 1.35;
  --line-height-140: 1.4;
  --line-height-145: 1.45;
  --line-height-150: 1.5;
  --line-height-md: var(--line-height-140, 1.4);
  --letter-spacing-000: 0;
  --letter-spacing-030: 0.03em;
  --letter-spacing-040: 0.04em;
  --letter-spacing-050: 0.05em;
  --letter-spacing-100: 0.1em;
  --letter-spacing-050px: 0.5px;
  --letter-spacing-normal: var(--letter-spacing-000, 0);
  --letter-spacing-wide: var(--letter-spacing-030, 0.03em);
  --letter-spacing-wider: var(--letter-spacing-040, 0.04em);
  --letter-spacing-widest: var(--letter-spacing-100, 0.1em);
  --letter-spacing-caps: var(--letter-spacing-050px, 0.5px);

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-inline-xs: 4px;
  --space-inline-sm: 8px;
  --space-inline-md: 12px;

  /* Canonical responsive breakpoints — documentation only.
     CSS custom properties cannot be used in @media conditions.
     Use these raw px values directly in any @media rules. */
  --bp-phone-max: 479px;
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
  --bp-wide-min: 1400px;

  /* Input/context sizing */
  --touch-target-min: 44px;
  --touch-target-compact: 40px;
  --oneb-nav-hit-target: 44px;

  /* Shared control and media sizing */
  --control-min-h-sm: 28px;
  --control-min-h-md: 40px;
  --size-captcha-w: 120px;
  --size-captcha-h: 60px;
  --size-icon-chip-w: 50px;
  --size-icon-chip-h: 50px;
  --table-col-xs: 20px;
  --table-col-sm: 50px;
  --table-col-md: 100px;
  --iframe-width: 100%;
  --btn-icon-opacity: .85;
  --invoice-paper-bg: #fff;
  --invoice-paper-fg: #111827;
  --invoice-paper-border: #e2e8f0;
  --action-offset-sm: 12px;
  --loader-page-bg: #f7fbff;
  --loader-inline-bg: #e0eefd;

  /* Radii & shadows */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --shadow-1: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 8px rgba(0,0,0,0.12);
  --shadow-sm-soft: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-control-inset: inset 0 1px 2px rgba(0,0,0,0.03);
  --shadow-brand-sm: 0 2px 4px rgba(41,167,230,0.2);
  --shadow-brand-md: 0 4px 10px rgba(41,167,230,0.28);
  --shadow-cta-sm: 0 2px 4px rgba(245, 146, 30, 0.2);
  --shadow-cta-md: 0 4px 10px rgba(245, 146, 30, 0.28);
  --brand-cta-gradient: linear-gradient(135deg, #F5921E 0%, #E07F0A 100%);
  --shadow-focus-ring: rgba(41,167,230,0.1);
  --elevation-soft-1: 0 2px 8px rgba(0,0,0,0.04);
  --elevation-soft-2: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --elevation-popover: 0 4px 16px rgba(0,0,0,0.25);
  --elevation-sticky: 0 -4px 20px rgba(0,0,0,0.15);
  --focus-ring-strong: rgba(41,167,230,0.3);

  /* Semantic gradients */
  --brand-success-gradient: linear-gradient(135deg, var(--brand-success) 0%, #25a85a 100%);
  --brand-danger-gradient: linear-gradient(135deg, var(--brand-danger) 0%, #c21f27 100%);
  --brand-primary-gradient-soft: linear-gradient(90deg, #4DB8E8 0%, #29A7E6 100%);

  /* Semantic status colors */
  --brand-muted: #9BA0B3;
  --brand-accent: #6f42c1;
  --status-inactive-bg: #fce4ec;
  --status-inactive-fg: #c2185b;
  --color-success-strong: #166534;
  --color-warning-strong: #92400e;
  --color-danger-strong: #991b1b;
  --alert-warning-text: #856404;

  --status-glow-success: 0 0 4px rgba(45, 199, 107, 0.4);
  --status-glow-warning: 0 0 4px rgba(245, 158, 11, 0.4);
  --status-glow-info: 0 0 4px rgba(41, 167, 230, 0.4);
  --status-glow-danger: 0 0 4px rgba(217, 37, 46, 0.4);

  --badge-label-bg: rgba(41, 167, 230, 0.1);
  --badge-label-fg: var(--brand-primary, #29A7E6);

  /* Tag/category color palette (8-color, hash-assignable)
     All colors must pass WCAG AA 4.5:1 contrast with white text.
     Colors 1,2,4,6,7 use hardcoded dark values instead of token aliases
     because the brand tokens are too bright for white-text legibility. */
  --tag-color-1: #0b7dba;                           /* darkened blue,   ~4.9:1 */
  --tag-color-2: #178a4c;                           /* darkened green,  ~4.6:1 */
  --tag-color-3: var(--brand-accent, #6f42c1);      /* purple,          ~5.5:1 */
  --tag-color-4: #b45309;                           /* darkened amber,  ~4.7:1 */
  --tag-color-5: var(--status-inactive-fg, #c2185b); /* rose,           ~5.9:1 */
  --tag-color-6: #075985;                           /* darkened sky,    ~6.3:1 */
  --tag-color-7: #0056b3;                           /* darkened primary,~5.5:1 */
  --tag-color-8: var(--color-fg-subtle, #495057);    /* gray,           ~5.9:1 */

  --overlay-white-10: rgba(255,255,255,0.1);
  --overlay-white-15: rgba(255,255,255,0.15);
  --overlay-white-20: rgba(255,255,255,0.2);
  --border-subtle-inverse: rgba(255,255,255,0.1);
  --color-backdrop: rgba(15, 23, 42, 0.5);

  /* Tooltip/dropdown tokens */
  --tooltip-bg: #333;
  --tooltip-fg: #fff;
  --dropdown-bg: var(--color-bg, #fff);
  --dropdown-fg: var(--color-fg-subtle, #495057);
  --dropdown-border: var(--color-border, #dee2e6);
  --dropdown-hover-bg: var(--color-surface, #f8f9fa);

  /* OpenNebula module compatibility tokens */
  --oneb-table-row-even: var(--color-surface, #f8f9fa);
  --oneb-table-row-odd: var(--color-bg, #fff);
  --oneb-table-row-hover: var(--color-surface-2, #e9ecef);
  --oneb-table-row-muted: var(--gray-50, #fafafa);
  --oneb-table-head-bg: var(--gray-100, #f1f3f5);
  --oneb-table-cell-fg: var(--color-fg-subtle, #495057);
  --oneb-table-cell-border: var(--color-border, #dee2e6);

  --oneb-status-placeholder-bg: var(--color-surface-2, #e9ecef);
  --oneb-status-placeholder-fg: var(--color-fg-subtle, #495057);
  --oneb-status-action-bg: var(--color-bg-elevated, #fff);
  --oneb-status-action-fg: var(--brand-primary, #29A7E6);
  --oneb-status-action-border: var(--color-border, #dee2e6);
  --oneb-status-link: var(--brand-primary, #29A7E6);
  --oneb-status-link-hover: var(--color-primary-600, #0056b3);

  --oneb-mobile-toggle-bg: rgba(41, 167, 230, 0.92);
  --oneb-mobile-toggle-border: rgba(255, 255, 255, 0.52);
  --oneb-mobile-toggle-fg: var(--color-fg-inverse, #fff);
  --oneb-mobile-menu-bg: var(--color-bg-elevated, #fff);
  --oneb-mobile-menu-border: var(--color-border, #dee2e6);
  --oneb-mobile-menu-link: var(--color-fg-strong, #212529);
  --oneb-mobile-menu-link-hover-bg: var(--color-surface, #f8f9fa);
  --oneb-mobile-menu-link-hover-fg: var(--color-fg-strong, #111827);
  --oneb-mobile-menu-current-bg: var(--brand-primary, #29A7E6);
  --oneb-mobile-menu-current-fg: var(--color-fg-inverse, #fff);

  --oneb-modal-backdrop: rgba(15, 23, 42, 0.56);
  --oneb-modal-bg: var(--color-bg-elevated, #fff);
  --oneb-modal-border: var(--color-border, #dee2e6);
  --oneb-modal-fg: var(--color-fg, #212529);
  --oneb-modal-fg-muted: var(--color-fg-muted, #5f676e);
  --color-bg-modal: var(--oneb-modal-bg, #fff);

  --oneb-slider-track: var(--gray-300, #e2e8f0);
  --oneb-slider-fill: var(--brand-primary-gradient-soft, linear-gradient(90deg, #4DB8E8 0%, #29A7E6 100%));
  --oneb-slider-thumb-bg: var(--color-bg, #fff);
  --oneb-slider-thumb-border: var(--brand-primary, #29A7E6);
  --oneb-slider-thumb-shadow: var(--shadow-sm-soft, 0 2px 10px rgba(0,0,0,0.1));
  --oneb-slider-focus-ring: rgba(41, 167, 230, 0.3);

  --oneb-progress-bg: var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
  --oneb-progress-border: var(--brand-primary, #29A7E6);

  /* OpenNebula operational tokens */
  --oneb-operational-primary: var(--brand-primary-dark);
  --oneb-operational-primary-hover: var(--brand-primary-deep);
  --oneb-drawer-backdrop: rgba(7, 13, 22, 0.42);
  --oneb-billing-segment-0: #d69a18;
  --oneb-billing-segment-1: #2f9b65;
  --oneb-billing-segment-2: #be5b8f;
  --oneb-billing-segment-3: #8067bc;
  --oneb-billing-segment-4: #c36d2c;
  --oneb-billing-segment-5: #2f87b7;
  --oneb-billing-segment-base: color-mix(in srgb, var(--brand-primary) 48%, var(--color-border));

  /* Operation log tokens */
  --oplog-bg: var(--color-bg);
  --oplog-border: #e6e8f0;
  --oplog-shadow: 0 6px 20px rgb(20 32 61 / 8%);
  --oplog-title-fg: #132042;
  --oplog-blue: #1e6fed;
  --oplog-blue-soft: rgb(30 111 237 / 8%);
  --oplog-blue-border: rgb(30 111 237 / 25%);
  --oplog-blue-gradient-end: #7fb3ff;
  --oplog-green: var(--color-success-700);
  --oplog-green-soft: rgb(26 127 55 / 8%);
  --oplog-green-border: rgb(26 127 55 / 25%);
  --oplog-orange: #b25e09;
  --oplog-red: #c62828;
  --oplog-red-soft: rgb(198 40 40 / 8%);
  --oplog-red-border: rgb(198 40 40 / 25%);
  --oplog-time: #94a3b8;
  --oplog-refresh-fg: #3a4761;

  /* Terminal operation log tokens */
  --macterm-bg: #1e1e1e;
  --macterm-text: #d4d4d4;
  --macterm-header: #2d2d30;
  --macterm-border: #3c3c3c;
  --macterm-title-fg: #aaa;
  --macterm-time: #7f8ea3;
  --macterm-prompt: #4ec9b0;
  --macterm-command-fg: #bde8de;
  --macterm-success: #6a9955;
  --macterm-success-soft: rgba(106,153,85,.12);
  --macterm-success-border: rgba(106,153,85,.28);
  --macterm-error: #f48771;
  --macterm-error-soft: rgba(244,135,113,.12);
  --macterm-error-border: rgba(244,135,113,.28);
  --macterm-running-fg: #7fb3ff;
  --macterm-running-soft: rgba(127,179,255,.12);
  --macterm-running-border: rgba(127,179,255,.28);
  --macterm-info-icon: #9ecbff;
  --macterm-info-glow: rgba(158,203,255,.35);
  --macterm-ok-icon: #a7f3a1;
  --macterm-ok-glow: rgba(167,243,161,.35);
  --macterm-error-icon: #ff8a80;
  --macterm-error-glow: rgba(255,138,128,.35);
  --macterm-refresh-fg: #b0c4ff;
  --macterm-dock-title-fg: #cfd8ff;
  --macterm-focus-ring: rgba(255,255,255,.6);
  --macterm-focus-ring-subtle: rgba(255,255,255,.5);
  --macterm-dock-focus-ring: rgba(127,179,255,.7);
  --macterm-window-glyph: #000;
  --macterm-dock-shadow: 0 6px 20px rgba(0,0,0,.25);
  --macterm-dot-close: #ff5f56;
  --macterm-dot-min: #ffbd2e;
  --macterm-dot-max: #27c93f;
  --dot-red: var(--macterm-dot-close);
  --dot-yellow: var(--macterm-dot-min);
  --dot-green: var(--macterm-dot-max);

  /* Z-index scale (Bootstrap 5-style, 10x increments for breathing room) */
  --z-nav: 100;
  --z-context: 99;
  --z-dropdown: 1000;         /* Standard dropdowns (Bootstrap convention) */
  --z-sticky: 1020;           /* Sticky headers/footers */
  --z-fixed: 1030;            /* Fixed position elements */
  --z-modal-backdrop: 1040;   /* Modal overlay background */
  --z-modal: 1050;            /* Modal dialog content */
  --z-popover: 1060;          /* Popovers */
  --z-tooltip: 1070;          /* Tooltips (highest non-nav) */
  --z-nav-dropdown: 1080;     /* Navigation dropdowns (above tooltips) */
  --z-overlay: 9999;          /* Emergency overlay (existing, legacy compat) */

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Sticky offsets */
  --sticky-top-offset: 96px;
  --cloud-sticky-gap: 24px;

  /* Cloud layout sizing */
  --cloud-content-max-sm: 520px;
  --cloud-content-max-md: 760px;
  --cloud-content-max-lg: 920px;
  --cloud-content-max-xl: 1040px;

  --cloud-modal-content-max-sm: 560px;
  --cloud-modal-content-max-md: 720px;
  --cloud-modal-content-max-lg: 920px;
  --cloud-modal-content-max-xl: 960px;
  --cloud-modal-detail-gap: var(--space-2, 8px);
  --cloud-modal-detail-padding: var(--space-3, 12px);

  /* OpenNebula legacy aliases (avoid module-local fallbacks) */
  --oneb-content-max-sm: var(--cloud-content-max-sm);
  --oneb-content-max-md: var(--cloud-content-max-md);
  --oneb-content-max-lg: var(--cloud-content-max-lg);
  --oneb-content-max-xl: var(--cloud-content-max-xl);

  --oneb-modal-content-max-sm: var(--cloud-modal-content-max-sm);
  --oneb-modal-content-max-md: var(--cloud-modal-content-max-md);
  --oneb-modal-content-max-lg: var(--cloud-modal-content-max-lg);
  --oneb-modal-content-max-xl: var(--cloud-modal-content-max-xl);
  --oneb-modal-detail-gap: var(--cloud-modal-detail-gap);
  --oneb-modal-detail-padding: var(--cloud-modal-detail-padding);
}

html[data-theme="dark"] {
  --brand-primary: #38A9E0;
  --brand-primary-light: #6BC8EF;
  --brand-primary-dark: var(--primary, #3FB7F2);
  --brand-primary-deep: #035B85;
  --brand-primary-gradient: linear-gradient(135deg, var(--primary, #3FB7F2) 0%, #035B85 100%);

  --gray-50: #111827;
  --gray-100: #1f2937;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;

  --color-bg: #0f172a;
  --color-bg-elevated: #111827;
  --color-surface: #1e293b;
  --color-surface-2: #334155;
  --color-surface-3: #1f2937;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-fg: #e2e8f0;
  --color-fg-strong: #f8fafc;
  --color-fg-subtle: #cbd5e1;
  --color-fg-subtle-strong: #cbd5e1;
  --color-fg-muted: #94a3b8;
  --color-fg-inverse: #fff;
  --surface-card: #111827;
  --surface-card-strong: #0f172a;
  --text-inverse: #f8fafc;
  --color-primary: var(--primary, #3FB7F2);
  --color-primary-600: #035B85;
  --color-accent: var(--brand-primary, #38A9E0);
  --color-accent-600: var(--brand-primary-dark, #3FB7F2);
  --color-accent-700: #0369A1;

  --surface-gradient: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  --brand-primary-bg: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --brand-cta: #F5921E;
  --brand-cta-hover: #E07F0A;
  --brand-highlight: #FAAB4D;
  --brand-highlight-bg: rgba(250, 171, 77, 0.30);
  --status-inactive-bg: rgba(244, 114, 182, 0.16);
  --status-inactive-fg: #f9a8d4;
  --color-success-strong: #86efac;
  --color-warning-strong: #fcd34d;
  --color-danger-strong: #fca5a5;
  --color-danger-soft: #F87171;
  --alert-warning-text: #fcd34d;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --shadow-sm-soft: 0 2px 4px rgba(0,0,0,0.35);
  --shadow-control-inset: inset 0 1px 2px rgba(0,0,0,0.45);
  --shadow-brand-sm: 0 2px 8px color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --shadow-brand-md: 0 6px 16px color-mix(in srgb, var(--brand-primary) 40%, transparent);
  --shadow-cta-sm: 0 2px 8px rgba(245, 146, 30, 0.35);
  --shadow-cta-md: 0 6px 16px rgba(245, 146, 30, 0.4);
  --brand-cta-gradient: linear-gradient(135deg, #F5921E 0%, #E07F0A 100%);
  --shadow-focus-ring: color-mix(in srgb, var(--brand-primary) 25%, transparent);
  --elevation-soft-1: 0 2px 8px rgba(2,6,23,0.4);
  --elevation-soft-2: 0 1px 3px rgba(2,6,23,0.55), 0 1px 2px rgba(2,6,23,0.42);
  --elevation-popover: 0 10px 28px rgba(2,6,23,0.6);
  --elevation-sticky: 0 -4px 20px rgba(2,6,23,0.55);
  --focus-ring-strong: color-mix(in srgb, var(--brand-primary) 40%, transparent);

  --tooltip-bg: #020617;
  --tooltip-fg: #f8fafc;
  --status-glow-success: 0 0 4px rgba(110, 231, 183, 0.45);
  --status-glow-warning: 0 0 4px rgba(252, 211, 77, 0.45);
  --status-glow-info: 0 0 4px color-mix(in srgb, var(--brand-primary) 45%, transparent);
  --status-glow-danger: 0 0 4px rgba(252, 165, 165, 0.45);

  --badge-label-bg: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --badge-label-fg: var(--brand-primary, #38A9E0);

  /* Dark-mode tag colors: keep white text legible (WCAG AA 4.5:1) */
  --tag-color-5: #881337;   /* rose-900, contrast 9.57:1 */
  --tag-color-6: #0369a1;   /* sky-800, contrast 5.93:1 */
  --tag-color-8: #334155;   /* slate-700, contrast 10.35:1 */

  --overlay-white-10: rgba(255,255,255,0.1);
  --overlay-white-15: rgba(255,255,255,0.15);
  --overlay-white-20: rgba(255,255,255,0.2);
  --border-subtle-inverse: rgba(148,163,184,0.24);
  --color-backdrop: rgba(2, 6, 23, 0.6);
  --loader-page-bg: var(--color-bg, #0f172a);
  --loader-inline-bg: var(--color-bg-elevated, #111827);

  --oneb-table-row-even: #1e293b;
  --oneb-table-row-odd: #0f172a;
  --oneb-table-row-hover: #334155;
  --oneb-table-row-muted: #1f2937;
  --oneb-table-head-bg: #1e293b;
  --oneb-table-cell-fg: #cbd5e1;
  --oneb-table-cell-border: #334155;

  --oneb-status-placeholder-bg: #334155;
  --oneb-status-placeholder-fg: #e2e8f0;
  --oneb-status-action-bg: #1f2937;
  --oneb-status-action-fg: var(--brand-primary, #38A9E0);
  --oneb-status-action-border: #475569;
  --oneb-status-link: var(--brand-primary, #38A9E0);
  --oneb-status-link-hover: var(--brand-primary-deep, #035B85);

  --oneb-mobile-toggle-bg: color-mix(in srgb, var(--brand-primary) 86%, transparent);
  --oneb-mobile-toggle-border: color-mix(in srgb, var(--brand-primary) 60%, transparent);
  --oneb-mobile-toggle-fg: #f8fafc;
  --oneb-mobile-menu-bg: #111827;
  --oneb-mobile-menu-border: #334155;
  --oneb-mobile-menu-link: #e2e8f0;
  --oneb-mobile-menu-link-hover-bg: #1e293b;
  --oneb-mobile-menu-link-hover-fg: #f8fafc;
  --oneb-mobile-menu-current-bg: var(--primary, #3FB7F2);
  --oneb-mobile-menu-current-fg: #f8fafc;

  --oneb-modal-backdrop: rgba(2, 6, 23, 0.76);
  --oneb-modal-bg: #0f172a;
  --oneb-modal-border: #334155;
  --oneb-modal-fg: #e2e8f0;
  --oneb-modal-fg-muted: var(--color-fg-muted, #94a3b8);
  --color-bg-modal: var(--oneb-modal-bg, #0f172a);

  --oneb-slider-track: #334155;
  --oneb-slider-fill: linear-gradient(90deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
  --oneb-slider-thumb-bg: #0f172a;
  --oneb-slider-thumb-border: var(--brand-primary, #38A9E0);
  --oneb-slider-thumb-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
  --oneb-slider-focus-ring: color-mix(in srgb, var(--brand-primary) 35%, transparent);

  --oneb-progress-bg: var(--brand-primary-bg);
  --oneb-progress-border: var(--brand-primary, #38A9E0);
  --oneb-operational-primary: var(--brand-primary-dark);
  --oneb-operational-primary-hover: var(--brand-primary-deep);
  --oneb-drawer-backdrop: rgba(2, 6, 23, 0.64);

  --oplog-bg: var(--color-bg-elevated);
  --oplog-border: var(--color-border);
  --oplog-shadow: 0 6px 20px rgba(2, 6, 23, 0.35);
  --oplog-title-fg: var(--color-fg-strong);
  --oplog-blue: var(--brand-primary);
  --oplog-blue-soft: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --oplog-blue-border: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  --oplog-blue-gradient-end: var(--brand-primary-light);
  --oplog-green: var(--color-success-strong);
  --oplog-green-soft: color-mix(in srgb, var(--color-success-strong) 14%, transparent);
  --oplog-green-border: color-mix(in srgb, var(--color-success-strong) 30%, transparent);
  --oplog-orange: var(--color-warning-strong);
  --oplog-red: var(--color-danger-strong);
  --oplog-red-soft: color-mix(in srgb, var(--color-danger-strong) 14%, transparent);
  --oplog-red-border: color-mix(in srgb, var(--color-danger-strong) 30%, transparent);
  --oplog-time: var(--color-fg-muted);
  --oplog-refresh-fg: var(--color-fg-subtle);
}

/* Respect reduced motion globally for our design system */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-duration: 0s;
  }
}