/**
 * ============================================================================
 * HADRON PLATFORM - CENTRALIZED DESIGN TOKENS & CSS VARIABLES
 * Port 8899 Semantic & IBM Carbon Unified Visual Architecture
 * ============================================================================
 * 
 * Symmetrical token architecture bridging:
 *  1. Hadron Semantic Design Tokens (--bg, --panel, --bd, --tx, --ac, etc.)
 *  2. IBM Carbon Design System g100 Dark Theme Tokens (--cds-*)
 *  3. WCAG 2.1 AA High-Contrast Typography & Surface Palette
 *  4. Architecture & Insight Visualizer Scales (--iv-*)
 *
 * All values adhere to WCAG 2.1 AA (>= 4.5:1 body text, >= 3.0:1 large/UI).
 */

/* IBM Plex: css/plex.css (served locally; index.html links it before this file). */

/* ============================================================================
   DESIGN SYSTEM CATALOG - the single place to retune the platform
   ============================================================================
   Edit a value here and every page follows. Component files hold no raw
   colors, type sizes, weights, radii, spacing, layers or motion timings; they
   reference the tokens below (tests/test_carbon_design_tokens_static.py
   enforces it). The two theme palettes (g100 dark, g10 light, plus g90/white)
   are defined only in this file.

   CANONICAL BREAKPOINTS (CSS custom properties cannot be used in @media, so the
   values are fixed here and enforced by the static test; "max" queries use the
   value minus 1px, so the pair never overlaps):
       compact   400px    phone, one column, tightest chrome
       sm        672px    tablet portrait; the nav rail becomes a drawer below
       md       1056px    small laptop; page frame margins widen above
       lg       1312px    desktop; wide-screen tier starts
       xlg      1920px    large monitor
       max      2560px    ultra-wide; content scales up, never stretches
   Allowed queries:  (max-width: 399px|671px|1055px|1311px|1919px|2559px)
                     (min-width: 400px|672px|1056px|1312px|1920px|2560px)

   Token groups (theme-independent unless noted):
     Brand        --hx-brand            the one accent; all interactive blue
     Surfaces     --cds-background, --cds-layer-01/02/03, --cds-field-01/02  (theme)
     Borders      --cds-border-subtle-01/02, --cds-border-strong-01,
                  --cds-border-interactive                                   (theme)
     Text         --cds-text-primary/secondary/placeholder/helper/on-color,
                  --cds-text-error, --cds-link-primary                        (theme)
     Interactive  --cds-interactive, --cds-focus, --cds-button-*, --cds-icon-*  (theme)
     Support      --cds-support-success/warning/error/info plus
                  --hx-support-*-subtle backgrounds and --hx-support-*-border   (theme)
     Type         --f-2xs..--f-figure sizes, --fw-light..--fw-bold weights,
                  --lh-none..--lh-loose line-heights, --cds-font-sans/mono
     Spacing      --cds-spacing-01..13 (2px..160px), --hx-space-6/10/20 half steps
     Radius       --hx-radius-xs/sm/md/chip/lg/xl/pill/round
     Elevation    --hx-shadow-sm/md/lg, --cds-elevation-01..03                (theme)
     Layers       --cds-z-* global stack, --hx-z-* local steps inside a page
     Motion       --cds-fast/moderate/slow-*, --cds-ease-*, --cds-motion-*
     Focus ring   --hx-focus-ring-width, -offset, -offset-sm, -inset (color is --cds-focus)
   ============================================================================ */

:root {
  /* Brand: change this one value and every link, primary button, selected
     state, focus accent and chart highlight follows in every theme. */
  --hx-brand: var(--hx-blue-60);
  --hx-brand-hover: var(--hx-blue-70);
  --hx-brand-active: var(--hx-blue-80);

  /* Fixed-ink surfaces: things that must stay white or near-black in every
     theme (QR codes, embedded document previews, text on a status fill). */
  --hx-paper: #ffffff;
  --hx-ink: #161616;
  --hx-orange-40: #ff832b;
  --hx-warning-ink-on-light: #8e6a00;

  /* Button states that Carbon themes do not ship */
  --cds-button-primary-hover: var(--hx-brand-hover);
  --cds-button-secondary-hover: #606060;
  --cds-button-danger-hover: #b81921;
  --cds-tag-warm-gray-bg: rgba(241, 194, 27, 0.2);

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights (unitless, relative to the element's font size) */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;
  --lh-loose: 1.6;

  /* Extra type step below --f-xs (dense legends, axis ticks) */
  --f-2xs: 12px;  /* cap round: was 10px; a legend or tick never reads below 12px */

  /* Radii: the product is square by default (Carbon); these are the only
     rounded shapes in use. Raise the values below to soften the whole UI at once. */
  --hx-radius-xs: 2px;
  --hx-radius-sm: 4px;
  --hx-radius-md: 8px;
  --hx-radius-chip: 10px;
  --hx-radius-lg: 12px;
  --hx-radius-xl: 16px;
  --hx-radius-pill: 999px;
  --hx-radius-round: 50%;

  /* Half steps that sit between the Carbon spacing scale */
  --hx-space-6: 0.375rem;
  --hx-space-10: 0.625rem;
  --hx-space-20: 1.25rem;

  /* Local stacking steps inside a page region. They stay below
     --cds-z-dropdown; anything that must cover the shell uses --cds-z-*. */
  --hx-z-2: 2;
  --hx-z-3: 3;
  --hx-z-5: 5;
  --hx-z-20: 20;
  --hx-z-30: 30;
  --hx-z-60: 60;
  --hx-z-70: 70;
  --hx-z-90: 90;
  --hx-z-100: 100;

  /* Focus ring geometry (the color is --cds-focus, which is theme aware) */
  --hx-focus-ring-width: 2px;
  --hx-focus-ring-offset: 2px;
  --hx-focus-ring-offset-sm: 1px;
  --hx-focus-ring-inset: -2px;
}

/* Theme-aware roles. Declared on every theme boundary so each one re-resolves
   against the theme's own --cds-* values. */
:root,
cds-theme,
[data-carbon-theme] {
  --hx-support-success-subtle: color-mix(in srgb, var(--cds-support-success) 14%, transparent);
  --hx-support-warning-subtle: color-mix(in srgb, var(--cds-support-warning) 14%, transparent);
  --hx-support-error-subtle: color-mix(in srgb, var(--cds-support-error) 14%, transparent);
  --hx-support-info-subtle: color-mix(in srgb, var(--cds-support-info) 14%, transparent);
  --hx-support-success-border: color-mix(in srgb, var(--cds-support-success) 45%, transparent);
  --hx-support-warning-border: color-mix(in srgb, var(--cds-support-warning) 45%, transparent);
  --hx-support-error-border: color-mix(in srgb, var(--cds-support-error) 45%, transparent);
  --hx-support-info-border: color-mix(in srgb, var(--cds-support-info) 45%, transparent);
}

:root {
  /* ========================================================================
     1. SURFACES & CANVAS BACKGROUNDS
     ======================================================================== */
  /* Hadron Semantic Surfaces (Aliases mapped to canonical Carbon tokens) */
  --bg: var(--cds-background);
  --bg2: var(--cds-layer-01);
  --panel: var(--cds-layer-01);
  --panel2: var(--cds-layer-02);
  --panelg: rgba(255, 255, 255, 0.025);
  --pan: var(--cds-layer-01); /* Backward-compatibility alias for --panel */

  --surface: var(--cds-layer-01);
  --surface-2: var(--cds-layer-02);
  --surface-3: var(--cds-layer-03);

  /* IBM Carbon g100 Dark Palette Tokens */
  --cds-background: #161616;
  --cds-background-hover: #222222;
  --cds-background-active: #393939;
  --cds-background-selected: #393939;
  --cds-background-inverse: #f4f4f4;

  --cds-layer-01: #262626;
  --cds-layer-02: #393939;
  --cds-layer-03: #525252;
  --cds-layer-hover-01: #333333;
  --cds-layer-hover-02: #474747;
  --cds-layer-active-01: #393939;
  --cds-layer-accent-01: #393939;
  --cds-layer-accent-02: #525252;
  --cds-layer-selected-01: #393939;
  --cds-layer-selected-02: #525252;

  --cds-field-01: #262626;
  --cds-field-02: #393939;
  --cds-field-hover-01: #333333;
  --cds-field-hover-02: #474747;

  /* Carbon v10 / v11 Core Token Compatibility */
  --cds-ui-01: #262626;
  --cds-ui-02: #393939;
  --cds-ui-03: #393939;
  --cds-ui-04: #6f6f6f;
  --cds-ui-05: #161616;

  /* ========================================================================
     2. BORDERS & STRUCTURAL DIVIDERS
     ======================================================================== */
  /* Hadron Semantic Borders */
  --bd: var(--cds-border-subtle-01);
  --bd2: var(--cds-border-subtle-02);
  --bd3: var(--cds-border-subtle-03);
  --border: var(--cds-border-subtle-01);
  --border-strong: var(--cds-border-strong-01);

  /* IBM Carbon Borders */
  --cds-border-subtle-01: #393939;
  --cds-border-subtle-02: #525252;
  --cds-border-subtle-03: #6f6f6f;
  --cds-border-strong-01: #6f6f6f;
  --cds-border-strong-02: #a8a8a8;
  --cds-border-interactive: var(--hx-brand);

  /* ========================================================================
     3. TYPOGRAPHY FAMILIES & SCALES
     ======================================================================== */
  --cds-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cds-font-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
  --font-sans: var(--cds-font-sans);
  --font-mono: var(--cds-font-mono);
  --sans: var(--cds-font-sans);
  --mono: var(--cds-font-mono);

  /* Carbon Type Scale Tokens */
  --cds-heading-01: 0.875rem; /* 14px */
  --cds-heading-02: 1rem;     /* 16px */
  --cds-heading-03: 1.25rem;  /* 20px */
  --cds-heading-04: 1.75rem;  /* 28px */
  --cds-heading-05: 2rem;     /* 32px */

  --cds-body-compact-01: 0.875rem;
  --cds-body-compact-02: 1rem;
  --cds-body-01: 0.875rem;
  --cds-body-02: 1rem;

  --cds-label-01: 0.75rem;    /* 12px */
  --cds-label-02: 0.875rem;   /* 14px */
  --cds-code-01: 0.75rem;
  --cds-code-02: 0.875rem;
  --cds-helper-text-01: 0.75rem;

  /* Semantic Type Scale (Minor Third 1.20) */
  --f-xs: 12px;   /* cap round: nothing below 12px, so xs and sm now match */
  --f-sm: 12px;
  --f-md: 14px;
  --f-lg: 16px;
  --f-xl: 20px;
  --f-2xl: 26px;
  --f-3xl: 34px;

  /* ========================================================================
     4. FOREGROUND & TEXT CONTRAST TOKENS (WCAG 2.1 AA Exceeding)
     ======================================================================== */
  /* Hadron Semantic Text Tokens (Aliases mapped to canonical Carbon tokens) */
  --tx: var(--cds-text-primary);
  --mut: var(--cds-text-secondary);
  --dim: var(--cds-text-helper);
  --faint: var(--cds-border-subtle-03);

  --text: var(--cds-text-primary);
  --text-2: var(--cds-text-secondary);
  --text-3: var(--cds-text-helper);

  /* Carbon Text Tokens */
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-placeholder: #8d8d8d;
  --cds-text-helper: #a8a8a8; /* Carbon v11 g100 (gray 40): 4.9:1 on layer-02; #8d8d8d was 3.5:1 */
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #161616;

  --cds-link-primary: #78a9ff;
  --cds-link-primary-hover: #a6c8ff;
  --cds-link-secondary: #a6c8ff;
  --cds-link-visited: #be95ff;
  --cds-link-inverse: var(--hx-brand);
  --cds-link-01: var(--cds-link-primary, var(--cds-link-primary, #78a9ff));

  /* Carbon Icon Tokens */
  --cds-icon-primary: #f4f4f4;
  --cds-icon-secondary: #c6c6c6;
  --cds-icon-on-color: #ffffff;
  --cds-icon-inverse: #161616;
  --cds-icon-interactive: var(--hx-brand);

  /* ========================================================================
     5. ACCENT, SUPPORT & SEMANTIC STATUS TOKENS
     ======================================================================== */
  /* Hadron Core Accents */
  --ac: var(--cds-ai-border-strong, #4589ff);
  --ac2: var(--cds-ai-border-end, #78a9ff);
  --vi: var(--cds-support-caution-undefined, #a56eff);
  --cy: var(--cds-syntax-class-name, #3ddbd9);
  --gr: var(--cds-support-success, #24a148);
  --yl: var(--cds-support-warning, #f1c21b);
  --rd: var(--cds-support-error, #da1e28);
  --pk: var(--cds-support-purple-30, #a56eff);
  --or: var(--cds-support-caution-major, #ff832b);

  --accent: var(--cds-ai-border-strong, #4589ff);
  --accent-ink: var(--cds-text-inverse, #000000);
  --success: var(--cds-support-success, #24a148);
  --warn: var(--cds-support-warning, #f1c21b);
  --danger: var(--cds-support-error, #da1e28);
  --info: var(--cds-syntax-class-name, #3ddbd9);

  /* Carbon Support & Semantic Colors */
  --cds-support-error: #fa4d56;
  --cds-support-error-inverse: #da1e28;
  --cds-support-success: #42be65;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #4589ff;
  --cds-support-04: var(--cds-support-warning, var(--cds-support-warning, #f1c21b));
  --cds-support-05: #38d3dc;

  /* Carbon Interactive Elements */
  --cds-interactive: var(--hx-brand);
  --cds-interactive-01: var(--hx-brand);
  --cds-interactive-02: #6f6f6f;
  --cds-interactive-03: var(--hx-brand);
  --cds-interactive-04: var(--hx-brand);
  --cds-interactive-hover: #0353e9;
  --cds-interactive-active: #002d9c;
  --cds-focus: #ffffff;
  --cds-focus-ring-color: var(--hx-brand);
  --cds-focus-ring-glow: rgba(15, 98, 254, 0.4);

  /* Status Chip Tints (Alpha fills) */
  --success-bg: rgba(56, 221, 130, 0.12);
  --warn-bg: rgba(242, 181, 60, 0.12);
  --danger-bg: rgba(255, 107, 107, 0.12);
  --info-bg: rgba(56, 211, 220, 0.12);
  --accent-bg: rgba(77, 141, 255, 0.12);

  /* ========================================================================
     6. CARBON TAG PALETTE (g100 Dark Theme)
     ======================================================================== */
  --cds-tag-blue-bg: rgba(15, 98, 254, 0.18);
  --cds-tag-blue-border: rgba(69, 137, 255, 0.45);
  --cds-tag-blue-color: #edf5ff;
  --cds-tag-green-bg: rgba(36, 161, 72, 0.18);
  --cds-tag-green-border: rgba(66, 190, 101, 0.45);
  --cds-tag-green-color: #defbe6;
  --cds-tag-red-bg: rgba(218, 30, 40, 0.20);
  --cds-tag-red-border: rgba(250, 77, 86, 0.45);
  --cds-tag-red-color: #fff1f1;
  --cds-tag-yellow-bg: rgba(241, 194, 27, 0.18);
  --cds-tag-yellow-border: rgba(241, 194, 27, 0.45);
  --cds-tag-yellow-color: #fcf4d6;
  --cds-tag-orange-bg: rgba(255, 131, 43, 0.18);
  --cds-tag-orange-border: rgba(255, 131, 43, 0.45);
  --cds-tag-orange-color: #fff2e8;
  --cds-tag-purple-bg: rgba(138, 63, 252, 0.18);
  --cds-tag-purple-border: rgba(165, 110, 255, 0.45);
  --cds-tag-purple-color: #f6f2ff;
  --cds-tag-magenta-bg: rgba(238, 83, 133, 0.18);
  --cds-tag-magenta-border: rgba(255, 119, 168, 0.45);
  --cds-tag-magenta-color: #fff0f7;
  --cds-tag-cyan-bg: rgba(17, 147, 239, 0.18);
  --cds-tag-cyan-border: rgba(51, 177, 255, 0.45);
  --cds-tag-cyan-color: #e5f6ff;
  --cds-tag-gray-bg: rgba(141, 141, 141, 0.15);
  --cds-tag-gray-border: rgba(141, 141, 141, 0.35);
  --cds-tag-gray-color: #f4f4f4;

  /* ========================================================================
     7. SPACING SCALE TOKENS
     ======================================================================== */
  /* Carbon Standard Spacing Scale */
  --cds-spacing-01: 0.125rem; /* 2px */
  --cds-spacing-02: 0.25rem;  /* 4px */
  --cds-spacing-03: 0.5rem;   /* 8px */
  --cds-spacing-04: 0.75rem;  /* 12px */
  --cds-spacing-05: 1rem;     /* 16px */
  --cds-spacing-06: 1.5rem;   /* 24px */
  --cds-spacing-07: 2rem;     /* 32px */
  --cds-spacing-08: 2.5rem;   /* 40px */
  --cds-spacing-09: 3rem;     /* 48px */
  --cds-spacing-10: 4rem;     /* 64px */
  --cds-spacing-11: 5rem;     /* 80px */
  --cds-spacing-12: 6rem;     /* 96px */
  --cds-spacing-13: 10rem;    /* 160px */

  /* The page frame (shell.css, "The page frame"): the shell's side gutter, the page title and the gap between a
     screen's header, toolbar and sections. Narrow screens take smaller values below (the end of this file). */
  --hadron-page-gutter: var(--cds-spacing-06);       /* 24px; 16px under 1056px */
  --hadron-page-title-size: var(--cds-heading-04);   /* 28px; 24px under 672px */
  --hadron-section-gap: var(--cds-spacing-06);       /* 24px; 16px under 672px */

  /* 8pt Spacing Scale Aliases */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* ========================================================================
     8. RADII, SHADOWS, GLOWS & GRADIENTS
     ======================================================================== */
  /* Border Radii */
  --r: 14px;
  --r2: 10px;
  --r1: 6px;
  --r3: 14px;

  /* Shadows & Elevations */
  --sh: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --sh2: 0 20px 60px -20px rgba(0, 0, 0, 0.75);
  --glow: 0 0 0 1px rgba(122, 168, 255, 0.15), 0 8px 30px -8px rgba(77, 141, 255, 0.35);

  --cds-elevation-01: 0 1px 2px rgba(0, 0, 0, 0.3);
  --cds-elevation-02: 0 4px 12px rgba(0, 0, 0, 0.45);
  --cds-elevation-03: 0 12px 24px rgba(0, 0, 0, 0.65);

  /* Theme Swatch Preview Palette */
  --cds-theme-swatch-g100-bg: #161616;
  --cds-theme-swatch-g100-layer: #262626;
  --cds-theme-swatch-g90-bg: #262626;
  --cds-theme-swatch-g90-layer: #393939;
  --cds-theme-swatch-g10-bg: #f4f4f4;
  --cds-theme-swatch-g10-layer: #ffffff;
  --cds-theme-swatch-white-bg: #ffffff;
  --cds-theme-swatch-white-layer: #f4f4f4;

  /* Gradients */
  --grad: linear-gradient(135deg, var(--cds-ai-border-strong, #4589ff) 0%, var(--cds-support-caution-undefined, #a56eff) 100%);
  --gradc: linear-gradient(135deg, var(--cds-syntax-class-name, #3ddbd9) 0%, var(--cds-ai-border-strong, #4589ff) 100%);

  /* ========================================================================
     9. MOTION, TIMING & SKELETON LOADERS
     ======================================================================== */
  --cds-motion-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-motion-standard: 0.15s cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-motion-entrance: 0.2s var(--cds-ease-entrance-productive, cubic-bezier(0, 0, 0.38, 0.9));
  --cds-motion-exit: 0.15s cubic-bezier(0.4, 0, 1, 1);

  /* Skeleton Colors (g100 Dark Theme) */
  --cds-skeleton-base: #262626;
  --cds-skeleton-mid: #333333;
  --cds-skeleton-pulse: #474747;
  --cds-skeleton-highlight: rgba(255, 255, 255, 0.08);

  /* ========================================================================
     10. SHELL LAYOUT CONSTANTS
     ======================================================================== */
  --cds-header-height: 48px;
  --cds-side-nav-width: 16rem; /* 256px */
  --hadron-header-height: var(--cds-header-height, 48px);
  --hadron-side-nav-width: var(--cds-side-nav-width, 16rem);
  --sidebar: var(--cds-side-nav-width, 16rem);
  --topbar: var(--cds-header-height, 48px);
  --maxw: 1440px;

  /* ========================================================================
     11. INSIGHT VISUALIZER DESIGN TOKENS
     ======================================================================== */
  --iv-1: var(--cds-ai-border-strong, #4589ff);
  --iv-2: var(--cds-support-caution-major, #ff832b);
  --iv-3: var(--cds-support-teal-50, #007d79);
  --iv-good: var(--cds-syntax-block-comment, #198038);
  --iv-warn: var(--cds-support-caution-minor, #f1c21b);
  --iv-serious: var(--cds-support-caution-minor, #ff832b);
  --iv-crit: var(--cds-support-error, #da1e28);
  --iv-grid: var(--cds-layer-01, #262626);
  --iv-axis: var(--cds-ai-popover-caret-bottom-background, #202d45);
  --iv-muted: var(--cds-border-subtle-01, #393939);
  --iv-s1: var(--cds-syntax-attribute, #00539a);
  --iv-s2: var(--cds-support-info, #4589ff);
  --iv-s3: var(--cds-ai-border-strong, #4589ff);
  --iv-s4: var(--cds-ai-border-end, #78a9ff);
  --iv-s5: var(--cds-ai-popover-caret-center, #a0c3ff);

  /* ========================================================================
     12. CANONICAL RESPONSIVE BREAKPOINT TOKENS
     ======================================================================== */
  --cds-breakpoint-sm: 320px;       /* Mobile Small (320px - 671px) */
  --cds-breakpoint-md: 672px;       /* Tablet Standard (672px - 1055px) */
  --cds-breakpoint-lg: 1056px;      /* Desktop Large / SideNav Threshold (1056px - 1311px) */
  --cds-breakpoint-xlg: 1312px;     /* Wide Desktop (1312px - 1583px) */
  --cds-breakpoint-max: 1584px;     /* Extra-Wide Desktop (1584px - 1919px) */
  --cds-breakpoint-2k: 1920px;      /* Full HD 1080p / 2K Display (1920px - 2559px) */
  --cds-breakpoint-qhd: 2560px;     /* 1440p QHD Display (2560px - 3839px) */
  --cds-breakpoint-4k: 3840px;      /* 4K UHD Display (3840px+) */

  /* ========================================================================
     13. CENTRALIZED Z-INDEX LAYERING MATRIX
     ======================================================================== */
  --cds-z-deep: -1;
  --cds-z-base: 0;
  --cds-z-surface: 1;
  --cds-z-docked: 10;
  --cds-z-table-header: 25;
  --cds-z-floating: 50;
  --cds-z-dropdown: 1000;
  --cds-z-sticky: 2000;
  --cds-z-banner: 7000;
  --cds-z-drawer-backdrop: 8500;
  --cds-z-drawer: 9000;
  --cds-z-header: 9200;
  --cds-z-flyout: 9300;
  --cds-z-modal-backdrop: 9500;
  --cds-z-modal: 10000;
  --cds-z-modal-elevated: 10001;
  --cds-z-popover: 10500;
  --cds-z-tooltip: 11000;
  --cds-z-toast: 12000;
  --cds-z-palette: 15000;
  --cds-z-max: 99999;

  /* ========================================================================
     14. UNIFIED FLUID TYPOGRAPHY & SPACING TOKENS (clamp() Continuous Scaling)
     The one definition (responsive.css and tokens.css used to disagree; these are the values index.html showed).
     ======================================================================== */
  --cds-fluid-display-01: clamp(2.0rem, 1.5rem + 1.2vw, 2.75rem);
  --cds-fluid-display-02: clamp(1.5rem, 1.25rem + 0.8vw, 2.25rem);
  --cds-fluid-heading-05: clamp(1.5rem, 1.25rem + 0.8vw, 2.0rem);
  --cds-fluid-heading-04: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --cds-fluid-heading-03: clamp(1.0rem, 0.95rem + 0.4vw, 1.25rem);
  --cds-fluid-heading-02: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  --cds-fluid-heading-01: clamp(0.875rem, 0.85rem + 0.2vw, 1.0625rem);
  --cds-fluid-body-02: clamp(0.875rem, 0.84rem + 0.25vw, 1.0625rem);
  --cds-fluid-body-01: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --cds-fluid-caption: clamp(0.6875rem, 0.67rem + 0.1vw, 0.75rem);
  --cds-fluid-code-01: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --cds-fluid-code-02: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);

  --cds-fluid-space-xs: clamp(0.25rem, 0.15rem + 0.3vw, 0.5rem);
  --cds-fluid-space-sm: clamp(0.5rem, 0.35rem + 0.5vw, 0.875rem);
  --cds-fluid-space-md: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --cds-fluid-space-lg: clamp(1rem, 0.75rem + 1.5vw, 2.5rem);
  --cds-fluid-space-xl: clamp(1.5rem, 1rem + 2.5vw, 4rem);
  --cds-fluid-layout-padding: clamp(var(--cds-spacing-04), var(--cds-spacing-03) + 1.5vw, var(--cds-spacing-09));

  /* ========================================================================
     15. SUPPORT DIM & BORDER TOKENS
     ======================================================================== */
  --cds-support-error-dim: rgba(218, 30, 40, 0.16);
  --cds-support-error-border: rgba(250, 77, 86, 0.4);
  --cds-support-warning-dim: rgba(241, 194, 27, 0.16);
  --cds-support-warning-border: rgba(241, 194, 27, 0.4);
  --cds-support-success-dim: rgba(36, 161, 72, 0.14);
  --cds-support-success-border: rgba(36, 161, 72, 0.35);
  --cds-support-info-dim: rgba(15, 98, 254, 0.14);
  --cds-support-info-border: rgba(69, 137, 255, 0.35);

  /* ========================================================================
     10. IBM CARBON v11 MOTION & PHYSICS TOKENS (DTCG Conformance)
     ======================================================================== */
  /* Carbon Standard Durations */
  --cds-fast-01: 70ms;
  --cds-fast-02: 110ms;
  --cds-moderate-01: 150ms;
  --cds-moderate-02: 240ms;
  --cds-slow-01: 400ms;
  --cds-slow-02: 700ms;

  /* Carbon Standard Easing Curves */
  --cds-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --cds-ease-entrance-productive: cubic-bezier(0, 0, 0.38, 0.9);
  --cds-ease-entrance-expressive: cubic-bezier(0, 0, 0.3, 1);
  --cds-ease-exit-productive: cubic-bezier(0.2, 0, 1, 0.9);
  --cds-ease-exit-expressive: cubic-bezier(0.4, 0.14, 1, 1);

  /* Extended Semantic Keyframe Motion Durations */
  --cds-motion-shimmer: 1.8s;
  --cds-motion-pulse: 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --cds-motion-heartbeat: 1.2s;
  --cds-motion-blink: 0.8s;
}

/* Scoped Insight Visualizer Root Class */
.ivroot {
  --iv-1: var(--cds-ai-border-strong, #4589ff);
  --iv-2: var(--cds-support-caution-major, #ff832b);
  --iv-3: var(--cds-support-teal-50, #007d79);
  --iv-good: var(--cds-syntax-block-comment, #198038);
  --iv-warn: var(--cds-support-caution-minor, #f1c21b);
  --iv-serious: var(--cds-support-caution-minor, #ff832b);
  --iv-crit: var(--cds-support-error, #da1e28);
  --iv-grid: var(--cds-layer-01, #262626);
  --iv-axis: var(--cds-ai-popover-caret-bottom-background, #202d45);
  --iv-muted: var(--cds-border-subtle-01, #393939);
  --iv-s1: var(--cds-syntax-attribute, #00539a);
  --iv-s2: var(--cds-support-info, #4589ff);
  --iv-s3: var(--cds-ai-border-strong, #4589ff);
  --iv-s4: var(--cds-ai-border-end, #78a9ff);
  --iv-s5: var(--cds-ai-popover-caret-center, #a0c3ff);
}

/* ============================================================================
   16. OFFICIAL IBM CARBON MULTI-THEME TOKEN ARCHITECTURE (v11 Canonical)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   THEME 1: IBM Carbon g100 (Default High-Contrast Dark Theme)
   ---------------------------------------------------------------------------- */
:root,
:root[data-carbon-theme="g100"],
[data-carbon-theme="g100"],
cds-theme[theme="g100"] {
  /* Surfaces & Canvas (Aliases mapped to canonical Carbon tokens) */
  --bg: var(--cds-background);
  --bg2: var(--cds-layer-01);
  --panel: var(--cds-layer-01);
  --panel2: var(--cds-layer-02);
  --panelg: rgba(255, 255, 255, 0.025);
  --pan: var(--cds-layer-01);
  --surface: var(--cds-layer-01);
  --surface-2: var(--cds-layer-02);
  --surface-3: var(--cds-layer-03);

  --cds-background: #161616;
  --cds-background-hover: #222222;
  --cds-background-active: #393939;
  --cds-background-selected: #393939;
  --cds-background-inverse: #f4f4f4;

  --cds-layer-01: #262626;
  --cds-layer-02: #393939;
  --cds-layer-03: #525252;
  --cds-layer-hover-01: #333333;
  --cds-layer-hover-02: #474747;
  --cds-layer-active-01: #393939;
  --cds-layer-accent-01: #393939;
  --cds-layer-accent-02: #525252;
  --cds-layer-selected-01: #393939;
  --cds-layer-selected-02: #525252;

  --cds-field-01: #262626;
  --cds-field-02: #393939;
  --cds-field-hover-01: #333333;
  --cds-field-hover-02: #474747;

  --cds-ui-01: #262626;
  --cds-ui-02: #393939;
  --cds-ui-03: #393939;
  --cds-ui-04: #6f6f6f;
  --cds-ui-05: #161616;

  /* Borders */
  --bd: var(--cds-border-subtle-01);
  --bd2: var(--cds-border-subtle-02);
  --bd3: var(--cds-border-subtle-03);
  --border: var(--cds-border-subtle-01);
  --border-strong: var(--cds-border-strong-01);

  --cds-border-subtle-01: #393939;
  --cds-border-subtle-02: #525252;
  --cds-border-subtle-03: #6f6f6f;
  --cds-border-strong-01: #6f6f6f;
  --cds-border-strong-02: #a8a8a8;
  --cds-border-interactive: var(--hx-brand);

  /* Text & Contrast */
  --tx: var(--cds-text-primary);
  --mut: var(--cds-text-secondary);
  --dim: var(--cds-text-helper);
  --faint: var(--cds-border-subtle-03);
  --text: var(--cds-text-primary);
  --text-2: var(--cds-text-secondary);
  --text-3: var(--cds-text-helper);

  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-placeholder: #8d8d8d;
  --cds-text-helper: #a8a8a8; /* Carbon v11 g100 (gray 40): 4.9:1 on layer-02; #8d8d8d was 3.5:1 */
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #161616;

  --cds-link-primary: #78a9ff;
  --cds-link-primary-hover: #a6c8ff;
  --cds-link-secondary: #a6c8ff;
  --cds-link-visited: #be95ff;
  --cds-link-inverse: var(--hx-brand);

  --cds-icon-primary: #f4f4f4;
  --cds-icon-secondary: #c6c6c6;
  --cds-icon-on-color: #ffffff;
  --cds-icon-inverse: #161616;
  --cds-icon-interactive: var(--hx-brand);

  /* Support & Semantic Colors */
  --cds-support-error: #fa4d56;
  --cds-support-error-inverse: #da1e28;
  --cds-support-success: #42be65;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #4589ff;

  --cds-interactive: var(--hx-brand);
  --cds-interactive-01: var(--hx-brand);
  --cds-interactive-02: #6f6f6f;
  --cds-interactive-03: var(--hx-brand);
  --cds-interactive-04: var(--hx-brand);
  --cds-interactive-hover: #0353e9;
  --cds-interactive-active: #002d9c;
  --cds-focus: #ffffff;
  --cds-focus-ring-color: var(--hx-brand);
  --cds-focus-ring-glow: rgba(15, 98, 254, 0.4);

  --cds-skeleton-base: #262626;
  --cds-skeleton-mid: #333333;
  --cds-skeleton-pulse: #474747;
  --cds-skeleton-highlight: rgba(255, 255, 255, 0.08);

  --sh: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --sh2: 0 20px 60px -20px rgba(0, 0, 0, 0.75);
  --cds-elevation-01: 0 1px 2px rgba(0, 0, 0, 0.3);
  --cds-elevation-02: 0 4px 12px rgba(0, 0, 0, 0.45);
  --cds-elevation-03: 0 12px 24px rgba(0, 0, 0, 0.65);

}

/* ----------------------------------------------------------------------------
   THEME 2: IBM Carbon g90 (Slate Dark Gray Theme)
   ---------------------------------------------------------------------------- */
:root[data-carbon-theme="g90"],
[data-carbon-theme="g90"],
cds-theme[theme="g90"] {
  /* Surfaces & Canvas */
  --bg: var(--cds-background, #262626);
  --bg2: var(--cds-background, #262626);
  --panel: var(--cds-skeleton-background, #333333);
  --panel2: var(--cds-layer-01, #393939);
  --panelg: rgba(255, 255, 255, 0.03);
  --pan: var(--cds-skeleton-background, #333333);
  --surface: var(--cds-skeleton-background, #333333);
  --surface-2: var(--cds-layer-01, #393939);
  --surface-3: var(--cds-layer-02, #525252);

  --cds-background: #262626;
  --cds-background-hover: #333333;
  --cds-background-active: #525252;
  --cds-background-selected: #525252;
  --cds-background-inverse: #f4f4f4;

  --cds-layer-01: #393939;
  --cds-layer-02: #525252;
  --cds-layer-03: #6f6f6f;
  --cds-layer-hover-01: #474747;
  --cds-layer-hover-02: #5c5c5c;
  --cds-layer-active-01: #525252;
  --cds-layer-accent-01: #525252;
  --cds-layer-accent-02: #6f6f6f;
  --cds-layer-selected-01: #525252;
  --cds-layer-selected-02: #6f6f6f;

  --cds-field-01: #393939;
  --cds-field-02: #525252;
  --cds-field-hover-01: #474747;
  --cds-field-hover-02: #5c5c5c;

  --cds-ui-01: #393939;
  --cds-ui-02: #525252;
  --cds-ui-03: #525252;
  --cds-ui-04: #8d8d8d;
  --cds-ui-05: #262626;

  /* Borders */
  --bd: var(--cds-border-subtle-01, #525252);
  --bd2: var(--cds-chat-avatar-bot, #6f6f6f);
  --bd3: var(--cds-border-strong-01);
  --border: var(--cds-border-subtle-01, #525252);
  --border-strong: var(--cds-chat-avatar-bot, #6f6f6f);

  --cds-border-subtle-01: #525252;
  --cds-border-subtle-02: #6f6f6f;
  --cds-border-subtle-03: #8d8d8d;
  --cds-border-strong-01: #8d8d8d;
  --cds-border-strong-02: #a8a8a8;
  --cds-border-interactive: var(--hx-brand);

  /* Text & Contrast */
  --tx: var(--cds-text-primary, #f4f4f4);
  --mut: var(--cds-text-secondary, #c6c6c6);
  --dim: var(--cds-text-helper, #a8a8a8);
  --faint: var(--cds-chat-avatar-bot, #6f6f6f);
  --text: var(--cds-text-primary, #f4f4f4);
  --text-2: var(--cds-text-secondary, #c6c6c6);
  --text-3: var(--cds-text-helper, #a8a8a8);

  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-placeholder: #8d8d8d;
  --cds-text-helper: #a8a8a8;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #161616;

  --cds-link-primary: #78a9ff;
  --cds-link-primary-hover: #a6c8ff;
  --cds-link-secondary: #a6c8ff;
  --cds-link-visited: #be95ff;
  --cds-link-inverse: var(--hx-brand);

  --cds-icon-primary: #f4f4f4;
  --cds-icon-secondary: #c6c6c6;
  --cds-icon-on-color: #ffffff;
  --cds-icon-inverse: #161616;
  --cds-icon-interactive: var(--hx-brand);

  --cds-interactive: var(--hx-brand);
  --cds-interactive-01: var(--hx-brand);
  --cds-interactive-02: #6f6f6f;
  --cds-interactive-03: var(--hx-brand);
  --cds-interactive-04: var(--hx-brand);
  --cds-focus: #ffffff;
  --cds-focus-ring-color: var(--hx-brand);
  --cds-focus-ring-glow: rgba(15, 98, 254, 0.4);

  --cds-skeleton-base: #393939;
  --cds-skeleton-mid: #474747;
  --cds-skeleton-pulse: #5c5c5c;
  --cds-skeleton-highlight: rgba(255, 255, 255, 0.08);

  --sh: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --sh2: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --cds-elevation-01: 0 1px 2px rgba(0, 0, 0, 0.28);
  --cds-elevation-02: 0 4px 12px rgba(0, 0, 0, 0.4);
  --cds-elevation-03: 0 12px 24px rgba(0, 0, 0, 0.6);

}

/* ----------------------------------------------------------------------------
   THEME 3: IBM Carbon g10 (Cool Light Gray Theme)
   ---------------------------------------------------------------------------- */
:root[data-carbon-theme="g10"],
[data-carbon-theme="g10"],
cds-theme[theme="g10"] {
  /* Surfaces & Canvas */
  --bg: var(--cds-layer-01, #f4f4f4);
  --bg2: var(--cds-field-hover-01, #e8e8e8);
  --panel: var(--cds-background, #ffffff);
  --panel2: var(--cds-layer-01, #f4f4f4);
  --panelg: rgba(0, 0, 0, 0.02);
  --pan: var(--cds-background, #ffffff);
  --surface: var(--cds-background, #ffffff);
  --surface-2: var(--cds-layer-01, #f4f4f4);
  --surface-3: var(--cds-border-subtle-00, #e0e0e0);

  --cds-background: #f4f4f4;
  --cds-background-hover: #e8e8e8;
  --cds-background-active: #c6c6c6;
  --cds-background-selected: #e0e0e0;
  --cds-background-inverse: #161616;

  --cds-layer-01: #ffffff;
  --cds-layer-02: #f4f4f4;
  --cds-layer-03: #e0e0e0;
  --cds-layer-hover-01: #e8e8e8;
  --cds-layer-hover-02: #e5e5e5;
  --cds-layer-active-01: #c6c6c6;
  --cds-layer-accent-01: #e0e0e0;
  --cds-layer-accent-02: #c6c6c6;
  --cds-layer-selected-01: #e0e0e0;
  --cds-layer-selected-02: #c6c6c6;

  --cds-field-01: #ffffff;
  --cds-field-02: #f4f4f4;
  --cds-field-hover-01: #e8e8e8;
  --cds-field-hover-02: #e5e5e5;

  --cds-ui-01: #ffffff;
  --cds-ui-02: #f4f4f4;
  --cds-ui-03: #e0e0e0;
  --cds-ui-04: #8d8d8d;
  --cds-ui-05: #161616;

  /* Borders */
  --bd: var(--cds-border-subtle-00, #e0e0e0);
  --bd2: var(--cds-border-subtle-01);
  --bd3: var(--cds-border-subtle-01, #a8a8a8);
  --border: var(--cds-border-subtle-00, #e0e0e0);
  --border-strong: var(--cds-border-strong-01);

  --cds-border-subtle-01: #e0e0e0;
  --cds-border-subtle-02: #c6c6c6;
  --cds-border-subtle-03: #a8a8a8;
  --cds-border-strong-01: #8d8d8d;
  --cds-border-strong-02: #161616;
  --cds-border-interactive: var(--hx-brand);

  /* Text & Contrast (WCAG 2.2 AAA >= 7:1 compliant black text on light canvas) */
  --tx: var(--cds-text-primary, #161616);
  --mut: var(--cds-text-secondary, #525252);
  --dim: var(--cds-chat-avatar-bot, #6f6f6f);
  --faint: var(--cds-border-subtle-01, #a8a8a8);
  --text: var(--cds-text-primary, #161616);
  --text-2: var(--cds-text-secondary, #525252);
  --text-3: var(--cds-chat-avatar-bot, #6f6f6f);

  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-placeholder: #a8a8a8;
  --cds-text-helper: #6f6f6f;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #ffffff;

  --cds-link-primary: var(--hx-brand);
  --cds-link-primary-hover: #0043ce;
  --cds-link-secondary: #0043ce;
  --cds-link-visited: #8a3ffc;
  --cds-link-inverse: #78a9ff;
  --cds-link-01: var(--cds-link-primary, var(--cds-link-primary, #0f62fe));

  --cds-icon-primary: #161616;
  --cds-icon-secondary: #525252;
  --cds-icon-on-color: #ffffff;
  --cds-icon-inverse: #ffffff;
  --cds-icon-interactive: var(--hx-brand);

  --cds-interactive: var(--hx-brand);
  --cds-interactive-01: var(--hx-brand);
  --cds-interactive-02: #525252;
  --cds-interactive-03: var(--hx-brand);
  --cds-interactive-04: var(--hx-brand);
  --cds-focus: var(--hx-brand);
  --cds-focus-ring-color: var(--hx-brand);
  --cds-focus-ring-glow: rgba(15, 98, 254, 0.3);

  /* Light Theme Tag Palette */
  --cds-tag-blue-bg: rgba(15, 98, 254, 0.1);
  --cds-tag-blue-border: rgba(15, 98, 254, 0.35);
  --cds-tag-blue-color: #0043ce;
  --cds-tag-green-bg: rgba(36, 161, 72, 0.1);
  --cds-tag-green-border: rgba(36, 161, 72, 0.35);
  --cds-tag-green-color: #0e6027;
  --cds-tag-red-bg: rgba(218, 30, 40, 0.1);
  --cds-tag-red-border: rgba(218, 30, 40, 0.35);
  --cds-tag-red-color: #a2191f;
  --cds-tag-yellow-bg: rgba(241, 194, 27, 0.15);
  --cds-tag-yellow-border: rgba(241, 194, 27, 0.45);
  --cds-tag-yellow-color: #684e00;     /* Carbon yellow 70: 6.7:1 on the tag over a gray layer (#8e6a00 was 4.25:1) */
  --cds-tag-orange-bg: rgba(255, 131, 43, 0.12);
  --cds-tag-orange-border: rgba(255, 131, 43, 0.35);
  --cds-tag-orange-color: #ba4e00;
  --cds-tag-purple-bg: rgba(138, 63, 252, 0.1);
  --cds-tag-purple-border: rgba(138, 63, 252, 0.35);
  --cds-tag-purple-color: #6929c4;
  --cds-tag-magenta-bg: rgba(238, 83, 133, 0.1);
  --cds-tag-magenta-border: rgba(238, 83, 133, 0.35);
  --cds-tag-magenta-color: #9f1853;
  --cds-tag-cyan-bg: rgba(17, 147, 239, 0.1);
  --cds-tag-cyan-border: rgba(17, 147, 239, 0.35);
  --cds-tag-cyan-color: #00539a;
  --cds-tag-gray-bg: rgba(141, 141, 141, 0.12);
  --cds-tag-gray-border: rgba(141, 141, 141, 0.3);
  --cds-tag-gray-color: #393939;

  --cds-skeleton-base: #e0e0e0;
  --cds-skeleton-mid: #e8e8e8;
  --cds-skeleton-pulse: #f4f4f4;
  --cds-skeleton-highlight: rgba(0, 0, 0, 0.05);

  --sh: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --sh2: 0 8px 24px rgba(0, 0, 0, 0.1);
  --glow: 0 0 0 1px rgba(15, 98, 254, 0.15), 0 4px 16px -4px rgba(15, 98, 254, 0.2);
  --cds-elevation-01: 0 1px 2px rgba(0, 0, 0, 0.08);
  --cds-elevation-02: 0 4px 8px rgba(0, 0, 0, 0.1);
  --cds-elevation-03: 0 12px 24px rgba(0, 0, 0, 0.14);

}

/* ----------------------------------------------------------------------------
   THEME 4: IBM Carbon White (Clean Pure White Light Theme)
   ---------------------------------------------------------------------------- */
:root[data-carbon-theme="white"],
[data-carbon-theme="white"],
cds-theme[theme="white"] {
  /* Surfaces & Canvas */
  --bg: var(--cds-background, #ffffff);
  --bg2: var(--cds-layer-01, #f4f4f4);
  --panel: var(--cds-layer-01, #f4f4f4);
  --panel2: var(--cds-background, #ffffff);
  --panelg: rgba(0, 0, 0, 0.02);
  --pan: var(--cds-layer-01, #f4f4f4);
  --surface: var(--cds-layer-01, #f4f4f4);
  --surface-2: var(--cds-background, #ffffff);
  --surface-3: var(--cds-border-subtle-00, #e0e0e0);

  --cds-background: #ffffff;
  --cds-background-hover: #f4f4f4;
  --cds-background-active: #c6c6c6;
  --cds-background-selected: #e0e0e0;
  --cds-background-inverse: #161616;

  --cds-layer-01: #f4f4f4;
  --cds-layer-02: #ffffff;
  --cds-layer-03: #e0e0e0;
  --cds-layer-hover-01: #e8e8e8;
  --cds-layer-hover-02: #f4f4f4;
  --cds-layer-active-01: #c6c6c6;
  --cds-layer-accent-01: #e0e0e0;
  --cds-layer-accent-02: #c6c6c6;
  --cds-layer-selected-01: #e0e0e0;
  --cds-layer-selected-02: #c6c6c6;

  --cds-field-01: #f4f4f4;
  --cds-field-02: #ffffff;
  --cds-field-hover-01: #e8e8e8;
  --cds-field-hover-02: #f4f4f4;

  --cds-ui-01: #f4f4f4;
  --cds-ui-02: #ffffff;
  --cds-ui-03: #e0e0e0;
  --cds-ui-04: #8d8d8d;
  --cds-ui-05: #161616;

  /* Borders */
  --bd: var(--cds-border-subtle-00, #e0e0e0);
  --bd2: var(--cds-border-subtle-01);
  --bd3: var(--cds-border-subtle-01, #a8a8a8);
  --border: var(--cds-border-subtle-00, #e0e0e0);
  --border-strong: var(--cds-border-strong-01);

  --cds-border-subtle-01: #e0e0e0;
  --cds-border-subtle-02: #c6c6c6;
  --cds-border-subtle-03: #a8a8a8;
  --cds-border-strong-01: #8d8d8d;
  --cds-border-strong-02: #161616;
  --cds-border-interactive: var(--hx-brand);

  /* Text & Contrast (WCAG 2.2 AAA >= 7:1 compliant black text on pure white) */
  --tx: var(--cds-text-primary, #161616);
  --mut: var(--cds-text-secondary, #525252);
  --dim: var(--cds-chat-avatar-bot, #6f6f6f);
  --faint: var(--cds-border-subtle-01, #a8a8a8);
  --text: var(--cds-text-primary, #161616);
  --text-2: var(--cds-text-secondary, #525252);
  --text-3: var(--cds-chat-avatar-bot, #6f6f6f);

  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-placeholder: #a8a8a8;
  --cds-text-helper: #6f6f6f;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #ffffff;

  --cds-link-primary: var(--hx-brand);
  --cds-link-primary-hover: #0043ce;
  --cds-link-secondary: #0043ce;
  --cds-link-visited: #8a3ffc;
  --cds-link-inverse: #78a9ff;
  --cds-link-01: var(--cds-link-primary, var(--cds-link-primary, #0f62fe));

  --cds-icon-primary: #161616;
  --cds-icon-secondary: #525252;
  --cds-icon-on-color: #ffffff;
  --cds-icon-inverse: #ffffff;
  --cds-icon-interactive: var(--hx-brand);

  --cds-interactive: var(--hx-brand);
  --cds-interactive-01: var(--hx-brand);
  --cds-interactive-02: #525252;
  --cds-interactive-03: var(--hx-brand);
  --cds-interactive-04: var(--hx-brand);
  --cds-focus: var(--hx-brand);
  --cds-focus-ring-color: var(--hx-brand);
  --cds-focus-ring-glow: rgba(15, 98, 254, 0.3);

  /* Tag Palette */
  --cds-tag-blue-bg: rgba(15, 98, 254, 0.1);
  --cds-tag-blue-border: rgba(15, 98, 254, 0.35);
  --cds-tag-blue-color: #0043ce;
  --cds-tag-green-bg: rgba(36, 161, 72, 0.1);
  --cds-tag-green-border: rgba(36, 161, 72, 0.35);
  --cds-tag-green-color: #0e6027;
  --cds-tag-red-bg: rgba(218, 30, 40, 0.1);
  --cds-tag-red-border: rgba(218, 30, 40, 0.35);
  --cds-tag-red-color: #a2191f;
  --cds-tag-yellow-bg: rgba(241, 194, 27, 0.15);
  --cds-tag-yellow-border: rgba(241, 194, 27, 0.45);
  --cds-tag-yellow-color: #8e6a00;
  --cds-tag-orange-bg: rgba(255, 131, 43, 0.12);
  --cds-tag-orange-border: rgba(255, 131, 43, 0.35);
  --cds-tag-orange-color: #ba4e00;
  --cds-tag-purple-bg: rgba(138, 63, 252, 0.1);
  --cds-tag-purple-border: rgba(138, 63, 252, 0.35);
  --cds-tag-purple-color: #6929c4;
  --cds-tag-magenta-bg: rgba(238, 83, 133, 0.1);
  --cds-tag-magenta-border: rgba(238, 83, 133, 0.35);
  --cds-tag-magenta-color: #9f1853;
  --cds-tag-cyan-bg: rgba(17, 147, 239, 0.1);
  --cds-tag-cyan-border: rgba(17, 147, 239, 0.35);
  --cds-tag-cyan-color: #00539a;
  --cds-tag-gray-bg: rgba(141, 141, 141, 0.12);
  --cds-tag-gray-border: rgba(141, 141, 141, 0.3);
  --cds-tag-gray-color: #393939;

  --cds-skeleton-base: #e0e0e0;
  --cds-skeleton-mid: #e8e8e8;
  --cds-skeleton-pulse: #f4f4f4;
  --cds-skeleton-highlight: rgba(0, 0, 0, 0.05);

  --sh: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --sh2: 0 8px 24px rgba(0, 0, 0, 0.1);
  --glow: 0 0 0 1px rgba(15, 98, 254, 0.15), 0 4px 16px -4px rgba(15, 98, 254, 0.2);
  --cds-elevation-01: 0 1px 2px rgba(0, 0, 0, 0.08);
  --cds-elevation-02: 0 4px 8px rgba(0, 0, 0, 0.1);
  --cds-elevation-03: 0 12px 24px rgba(0, 0, 0, 0.14);

}

/* ----------------------------------------------------------------------------
   17. HIGH-CONTRAST ACCESSIBILITY MODE (WCAG 2.2 AAA >= 7:1 Contrast & 3px Focus)
   ---------------------------------------------------------------------------- */
:root[data-high-contrast="true"],
[data-high-contrast="true"],
body.cds-high-contrast {
  --cds-focus: #ffffff;
  --cds-focus-ring-color: #ffffff;
}

/* High Contrast Dark Themes (g100 / g90) */
:root[data-high-contrast="true"][data-carbon-theme="g100"],
:root[data-high-contrast="true"]:not([data-carbon-theme="g10"]):not([data-carbon-theme="white"]),
[data-high-contrast="true"][data-carbon-theme="g100"],
cds-theme[data-high-contrast="true"][theme="g100"],
:root[data-high-contrast="true"][data-carbon-theme="g90"],
[data-high-contrast="true"][data-carbon-theme="g90"],
cds-theme[data-high-contrast="true"][theme="g90"] {
  --tx: var(--cds-text-primary, #ffffff);
  --mut: var(--cds-text-secondary, #f4f4f4);
  --dim: var(--cds-text-helper, #dfdfdf);
  --faint: var(--cds-border-strong-01);
  --text: var(--cds-text-primary, #ffffff);
  --text-2: var(--cds-text-secondary, #f4f4f4);
  --text-3: var(--cds-text-helper, #dfdfdf);

  --cds-text-primary: #ffffff;
  --cds-text-secondary: #f4f4f4;
  --cds-text-helper: #dfdfdf;
  --cds-text-placeholder: #c6c6c6;

  --cds-border-subtle-01: #6f6f6f;
  --cds-border-subtle-02: #8d8d8d;
  --cds-border-subtle-03: #a8a8a8;
  --cds-border-strong-01: #c6c6c6;
  --cds-border-strong-02: #ffffff;
  --cds-focus: #ffffff;
  --cds-focus-ring-color: #ffffff;

  --bd: var(--cds-border-subtle-01, #6f6f6f);
  --bd2: var(--cds-border-strong-01);
  --bd3: var(--cds-border-subtle-03, #a8a8a8);
  --border: var(--cds-border-subtle-02, #8d8d8d);
  --border-strong: var(--cds-border-strong-01, #c6c6c6);
}

/* High Contrast Light Themes (g10 / White) */
:root[data-high-contrast="true"][data-carbon-theme="g10"],
[data-high-contrast="true"][data-carbon-theme="g10"],
cds-theme[data-high-contrast="true"][theme="g10"],
:root[data-high-contrast="true"][data-carbon-theme="white"],
[data-high-contrast="true"][data-carbon-theme="white"],
cds-theme[data-high-contrast="true"][theme="white"] {
  --tx: var(--cds-text-primary, #000000);
  --mut: var(--cds-text-secondary, #161616);
  --dim: var(--cds-text-helper, #262626);
  --faint: var(--cds-border-subtle-02, #525252);
  --text: var(--cds-text-primary, #000000);
  --text-2: var(--cds-text-secondary, #161616);
  --text-3: var(--cds-text-helper, #262626);

  --cds-text-primary: #000000;
  --cds-text-secondary: #161616;
  --cds-text-helper: #262626;
  --cds-text-placeholder: #393939;

  --cds-border-subtle-01: #8d8d8d;
  --cds-border-subtle-02: #525252;
  --cds-border-subtle-03: #393939;
  --cds-border-strong-01: #393939;
  --cds-border-strong-02: #000000;
  --cds-focus: #001d6c;
  --cds-focus-ring-color: #001d6c;

  --bd: var(--cds-border-strong-01);
  --bd2: var(--cds-border-subtle-02, #525252);
  --bd3: var(--cds-border-subtle-03, #393939);
  --border: var(--cds-border-strong-01);
  --border-strong: var(--cds-border-strong-02, #000000);
}

/* WCAG 2.2 AAA Compliant 3px Solid Focus Indicator (Criterion 2.4.13) */
[data-high-contrast="true"] *:focus-visible,
body.cds-high-contrast *:focus-visible,
[data-high-contrast="true"] cds-button:focus-visible,
[data-high-contrast="true"] cds-header-menu-button:focus-visible,
[data-high-contrast="true"] cds-header-nav-item:focus-visible,
[data-high-contrast="true"] cds-side-nav-link:focus-visible,
[data-high-contrast="true"] a:focus-visible,
[data-high-contrast="true"] button:focus-visible,
[data-high-contrast="true"] input:focus-visible,
[data-high-contrast="true"] select:focus-visible,
[data-high-contrast="true"] textarea:focus-visible,
[data-high-contrast="true"] [role="button"]:focus-visible,
[data-high-contrast="true"] [role="tab"]:focus-visible,
[data-high-contrast="true"] [tabindex]:focus-visible {
  outline: 3px solid var(--cds-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px var(--cds-background), 0 0 0 4px var(--cds-focus) !important;
}

/* Underline link affordance in High Contrast Mode (WCAG 2.2 AAA Criterion 1.4.1) */
[data-high-contrast="true"] a:not(.hadron-header-title-link):not(.switcher-card):not(.theme-option-card):not(.carbon-btn),
body.cds-high-contrast a:not(.hadron-header-title-link):not(.switcher-card):not(.theme-option-card):not(.carbon-btn) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}


/* Invariant #5: Calibrated Hairline Enterprise Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--cds-border-subtle-01);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cds-border-strong-01);
}

/* Enterprise High-Density Table Lining Numbers */
table, .cds--data-table, td, th {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   HADRON SHARED SCALES: severity, status, categorical, sequential, diff, 13 px type
   One palette for every estate and studio (checklist C3, C4, C8, G9). A color
   never carries meaning alone (C5): pair it with the label or an icon.

   --hx-sev-<level>          fill / accent (chips, dots, bars, node rings)
   --hx-sev-<level>-on       text drawn ON the fill (filled chips)
   --hx-sev-<level>-text     the level as text on the theme background (4.5:1)
   --hx-status-<state>[-text] ok, degraded, down, unknown, provisional
   --hx-cat-0 .. --hx-cat-9  Carbon categorical order (charts, sectors, groups)
   --hx-seq-1 .. --hx-seq-5  sequential, light to strong (heat, density)
   --hx-diff-<add|del|chg>[-bg|-text]  added / removed / changed
   Dark values first (g100, g90 and the default); light (g10, white) below.
   ============================================================================ */
:root,
[data-carbon-theme="g100"],
[data-carbon-theme="g90"],
cds-theme[theme="g100"],
cds-theme[theme="g90"] {
  --hx-sev-critical: #da1e28;
  --hx-sev-high: #fa4d56;
  --hx-sev-medium: #ff832b;
  --hx-sev-low: #f1c21b;
  --hx-sev-info: #4589ff;
  --hx-sev-critical-on: #ffffff;
  --hx-sev-high-on: #161616;
  --hx-sev-medium-on: #161616;
  --hx-sev-low-on: #161616;
  --hx-sev-info-on: #161616;
  --hx-sev-critical-text: #ffb3b8;
  --hx-sev-high-text: #ff8389;
  --hx-sev-medium-text: #ffb784;
  --hx-sev-low-text: #f1c21b;
  --hx-sev-info-text: #78a9ff;

  --hx-status-ok: #42be65;
  --hx-status-degraded: #f1c21b;
  --hx-status-down: #fa4d56;
  --hx-status-unknown: #8d8d8d;
  --hx-status-provisional: #a56eff;
  --hx-status-ok-text: #6fdc8c;
  --hx-status-degraded-text: #f1c21b;
  --hx-status-down-text: #ffb3b8;
  --hx-status-unknown-text: #c6c6c6;
  --hx-status-provisional-text: #d4bbff;

  --hx-cat-0: #8a3ffc;
  --hx-cat-1: #33b1ff;
  --hx-cat-2: #007d79;
  --hx-cat-3: #ff7eb6;
  --hx-cat-4: #fa4d56;
  --hx-cat-5: #fff1f1;
  --hx-cat-6: #6fdc8c;
  --hx-cat-7: #4589ff;
  --hx-cat-8: #d12771;
  --hx-cat-9: #d2a106;

  --hx-seq-1: #001d6c;
  --hx-seq-2: #002d9c;
  --hx-seq-3: #0043ce;
  --hx-seq-4: #4589ff;
  --hx-seq-5: #a6c8ff;

  --hx-diff-add: #42be65;
  --hx-diff-del: #fa4d56;
  --hx-diff-chg: #f1c21b;
  --hx-diff-add-bg: rgba(36, 161, 72, 0.18);
  --hx-diff-del-bg: rgba(218, 30, 40, 0.20);
  --hx-diff-chg-bg: rgba(241, 194, 27, 0.16);
  --hx-diff-add-text: #a7f0ba;
  --hx-diff-del-text: #ffb3b8;
  --hx-diff-chg-text: #fddc69;

  /* 13 px: between --f-sm (12) and --f-md (14), for dense studio lists */
  --f-ms: 13px;
}

:root[data-carbon-theme="g10"],
:root[data-carbon-theme="white"],
[data-carbon-theme="g10"],
[data-carbon-theme="white"],
cds-theme[theme="g10"],
cds-theme[theme="white"] {
  --hx-sev-critical: #a2191f;
  --hx-sev-high: #da1e28;
  --hx-sev-medium: #eb6200;
  --hx-sev-low: #b28600;
  --hx-sev-info: var(--hx-brand);
  --hx-sev-critical-on: #ffffff;
  --hx-sev-high-on: #ffffff;
  --hx-sev-medium-on: #161616;
  --hx-sev-low-on: #161616;
  --hx-sev-info-on: #ffffff;
  --hx-sev-critical-text: #a2191f;
  --hx-sev-high-text: #da1e28;
  --hx-sev-medium-text: #8a3800;
  --hx-sev-low-text: #684e00;
  --hx-sev-info-text: #0043ce;

  --hx-status-ok: #24a148;
  --hx-status-degraded: #b28600;
  --hx-status-down: #da1e28;
  --hx-status-unknown: #8d8d8d;
  --hx-status-provisional: #8a3ffc;
  --hx-status-ok-text: #0e6027;
  --hx-status-degraded-text: #684e00;
  --hx-status-down-text: #a2191f;
  --hx-status-unknown-text: #525252;
  --hx-status-provisional-text: #6929c4;

  --hx-cat-0: #6929c4;
  --hx-cat-1: #1192e8;
  --hx-cat-2: #005d5d;
  --hx-cat-3: #9f1853;
  --hx-cat-4: #fa4d56;
  --hx-cat-5: #570408;
  --hx-cat-6: #198038;
  --hx-cat-7: #002d9c;
  --hx-cat-8: #ee538b;
  --hx-cat-9: #b28600;

  --hx-seq-1: #edf5ff;
  --hx-seq-2: #a6c8ff;
  --hx-seq-3: #4589ff;
  --hx-seq-4: var(--hx-brand);
  --hx-seq-5: #002d9c;

  --hx-diff-add: #24a148;
  --hx-diff-del: #da1e28;
  --hx-diff-chg: #b28600;
  --hx-diff-add-bg: #defbe6;
  --hx-diff-del-bg: #fff1f1;
  --hx-diff-chg-bg: #fcf4d6;
  --hx-diff-add-text: #0e6027;
  --hx-diff-del-text: #a2191f;
  --hx-diff-chg-text: #684e00;
}

/* ============================================================================
   CARBON V11 PALETTE (theme-independent) and the identity colors of languages.
   --hx-<hue>-<grade>: read these instead of a hex in views and canvases
   (var() in CSS; getComputedStyle(document.documentElement) in JS). A palette
   grade does not follow the theme: pick the light or dark grade per theme, or
   use the themed scales above (--hx-sev-*, --hx-status-*, --hx-cat-*).
   ============================================================================ */
:root {
  --hx-white: #ffffff;
  --hx-black: #000000;
  --hx-gray-10: #f4f4f4;
  --hx-gray-20: #e0e0e0;
  --hx-gray-30: #c6c6c6;
  --hx-gray-40: #a8a8a8;
  --hx-gray-50: #8d8d8d;
  --hx-gray-60: #6f6f6f;
  --hx-gray-70: #525252;
  --hx-gray-80: #393939;
  --hx-gray-80-hover: #474747;
  --hx-gray-90: #262626;
  --hx-gray-90-hover: #333333;
  --hx-gray-100: #161616;
  --hx-blue-10: #edf5ff;
  --hx-blue-20: #d0e2ff;
  --hx-blue-30: #a6c8ff;
  --hx-blue-40: #78a9ff;
  --hx-blue-50: #4589ff;
  --hx-blue-60: #0f62fe;
  --hx-blue-60-hover: #0050e6;
  --hx-blue-70: #0043ce;
  --hx-blue-80: #002d9c;
  --hx-blue-90: #001d6c;
  --hx-cyan-10: #e5f6ff;
  --hx-cyan-20: #bae6ff;
  --hx-cyan-30: #82cfff;
  --hx-cyan-40: #33b1ff;
  --hx-cyan-50: #1192e8;
  --hx-cyan-60: #0072c3;
  --hx-cyan-70: #00539a;
  --hx-cyan-80: #003a6d;
  --hx-cyan-90: #012749;
  --hx-teal-10: #d9fbfb;
  --hx-teal-20: #9ef0f0;
  --hx-teal-30: #3ddbd9;
  --hx-teal-40: #08bdba;
  --hx-teal-50: #009d9a;
  --hx-teal-60: #007d79;
  --hx-teal-70: #005d5d;
  --hx-teal-80: #004144;
  --hx-teal-90: #022b30;
  --hx-green-10: #defbe6;
  --hx-green-20: #a7f0ba;
  --hx-green-30: #6fdc8c;
  --hx-green-40: #42be65;
  --hx-green-50: #24a148;
  --hx-green-60: #198038;
  --hx-green-70: #0e6027;
  --hx-green-80: #044317;
  --hx-green-90: #022d0d;
  --hx-purple-10: #f6f2ff;
  --hx-purple-20: #e8daff;
  --hx-purple-30: #d4bbff;
  --hx-purple-40: #be95ff;
  --hx-purple-50: #a56eff;
  --hx-purple-60: #8a3ffc;
  --hx-purple-70: #6929c4;
  --hx-purple-80: #491d8b;
  --hx-purple-90: #31135e;
  --hx-magenta-10: #fff0f7;
  --hx-magenta-20: #ffd6e8;
  --hx-magenta-30: #ffafd2;
  --hx-magenta-40: #ff7eb6;
  --hx-magenta-50: #ee5396;
  --hx-magenta-60: #d02670;
  --hx-magenta-70: #9f1853;
  --hx-magenta-80: #740937;
  --hx-magenta-90: #510224;
  --hx-red-10: #fff1f1;
  --hx-red-20: #ffd7d9;
  --hx-red-30: #ffb3b8;
  --hx-red-40: #ff8389;
  --hx-red-50: #fa4d56;
  --hx-red-60: #da1e28;
  --hx-red-70: #a2191f;
  --hx-red-80: #750e13;
  --hx-red-90: #520408;
  --hx-orange-10: #fff2e8;
  --hx-orange-20: #ffd9be;
  --hx-orange-30: #ffb784;
  --hx-orange-40: #ff832b;
  --hx-orange-50: #eb6200;
  --hx-orange-60: #ba4e00;
  --hx-orange-70: #8a3800;
  --hx-orange-80: #5e2900;
  --hx-orange-90: #3e1a00;
  --hx-yellow-10: #fcf4d6;
  --hx-yellow-20: #fddc69;
  --hx-yellow-30: #f1c21b;
  --hx-yellow-40: #d2a106;
  --hx-yellow-50: #b28600;
  --hx-yellow-60: #8e6a00;
  --hx-yellow-70: #684e00;
  --hx-yellow-80: #483700;
  --hx-yellow-90: #302400;

  /* Languages: each language's own identity color (as its project draws it), one set for every view */
  --hx-lang-python: #4b8bbe;
  --hx-lang-typescript: #3178c6;
  --hx-lang-javascript: #d8b100;
  --hx-lang-go: #00add8;
  --hx-lang-rust: #c9824a;
  --hx-lang-java: #e76f00;
  --hx-lang-kotlin: #a97bff;
  --hx-lang-scala: #dc322f;
  --hx-lang-csharp: #68217a;
  --hx-lang-ruby: #cc342d;
  --hx-lang-php: #777bb4;
  --hx-lang-c: #8d8d8d;
  --hx-lang-cpp: #f34b7d;
  --hx-lang-swift: #f05138;
  --hx-lang-vue: #41b883;
  --hx-lang-svelte: #ff3e00;
  --hx-lang-elixir: #6e4a7e;
  --hx-lang-dart: #00b4ab;
  --hx-lang-r: #198ce7;
  --hx-lang-other: #8d8d8d;

  /* Type: studio screen titles (18 px) and a large figure (24 px), beside --f-* above */
  --f-title: 18px;
  --f-figure: 24px;
}

/* Code syntax (diffs, snippets) and elevation: themed. Dark first, light below. */
:root,
[data-carbon-theme="g100"],
[data-carbon-theme="g90"],
cds-theme[theme="g100"],
cds-theme[theme="g90"] {
  --hx-code-kw: #be95ff;
  --hx-code-str: #42be65;
  --hx-code-cm: #a8a8a8;
  --hx-code-num: #82cfff;
  --hx-code-meta: #ff7eb6;
  --hx-code-key: #78a9ff;
  --hx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --hx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
  --hx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --hx-overlay: rgba(0, 0, 0, 0.6);
}

:root[data-carbon-theme="g10"],
:root[data-carbon-theme="white"],
[data-carbon-theme="g10"],
[data-carbon-theme="white"],
cds-theme[theme="g10"],
cds-theme[theme="white"] {
  --hx-code-kw: #6929c4;
  --hx-code-str: #0e6027;
  --hx-code-cm: #525252;
  --hx-code-num: #0043ce;
  --hx-code-meta: #9f1853;
  --hx-code-key: #0043ce;
  --hx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --hx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.16);
  --hx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --hx-overlay: rgba(22, 22, 22, 0.5);
}

/* The page frame on narrow screens (see --hadron-page-gutter above). */
@media (max-width: 1055px) {
  :root { --hadron-page-gutter: var(--cds-spacing-05); }
}
@media (max-width: 671px) {
  :root {
    --hadron-page-title-size: var(--f-figure);
    --hadron-section-gap: var(--cds-spacing-05);
  }
}

/* A1 (alignment round): native controls - checkboxes, selects, date pickers, scrollbars - follow the Carbon theme, not
   the operating system's (a checkbox was a white box in the dark themes). It inherits, so dialogs and every view get it. */
:root[data-carbon-theme="g100"], :root[data-carbon-theme="g90"] { color-scheme: dark; }
:root[data-carbon-theme="white"], :root[data-carbon-theme="g10"] { color-scheme: light; }