/**
 * Datanomics Horizon palette — Light + provisional Dark mode
 *
 * Source: DATA UI DS FreeVersion + [Desktop] 5 Theme Figma files.
 * The Light collection follows the audited Figma values. The Dark collection
 * is a semantic conversion maintained in code until the designer delivers the
 * official dark variables. Keep this block isolated so those values can be
 * replaced without changing component selectors or tenant persistence.
 *
 * This file loads after ds-bridge.css. The repeated :root selector is
 * intentional: ds-bridge uses :root:root:root to keep legacy tokens stable,
 * so an opt-in palette must be one specificity step higher to win without
 * forced declarations or component forks.
 */

:root:root:root.palette-datanomics-horizon:not([data-pp-theme="dark"]),
:root:root:root.palette-datanomics-horizon:not([data-pp-theme="dark"]) body {
    /* Figma primitives / semantic colors */
    --data-ui-brand: #0e7c86;
    --data-ui-brand-active: #045259;
    --data-ui-brand-border: #74bdc4;
    --data-ui-brand-soft: #e8f5f6;
    --data-ui-nav-active-text: var(--data-ui-brand-active);
    --data-ui-canvas: #edf8f9;
    --data-ui-surface: #ffffff;
    --data-ui-surface-secondary: #f9fafb;
    --data-ui-surface-tertiary: #f0f2f4;
    --data-ui-text-primary: #11181c;
    --data-ui-text-secondary: #697177;
    --data-ui-text-tertiary: #889096;
    --data-ui-border-primary: #d7dbdf;
    --data-ui-border-secondary: #e6e8eb;

    /* DATA UI Context collection — canonical project-wide color roles. */
    --color-text-primary: var(--data-ui-text-primary);
    --color-text-secondary: var(--data-ui-text-secondary);
    --color-text-tertiary: var(--data-ui-text-tertiary);
    --color-text-brand: var(--data-ui-brand);
    --color-text-brand-active: var(--data-ui-brand-active);
    --color-text-success: #45a557;
    --color-text-success-active: #297a3a;
    --color-text-warning: #ff9f1a;
    --color-text-warning-active: #ad5700;
    --color-text-danger: #e54d2e;
    --color-text-danger-hover: #db4224;
    --color-text-danger-active: #cc3314;
    --color-text-additional-1: #8e4ec6;
    --color-text-additional-1-active: #793bb0;
    --color-text-additional-2: #0091ff;
    --color-text-additional-2-active: #006adb;
    --color-border-solid: #889096;
    --color-border-brand-solid: #0e7c86;
    --color-border-success-primary: #96cf9b;
    --color-border-warning-primary: #f3b962;
    --color-border-danger-primary: #f3aea0;
    --color-border-additional-1-primary: #d4b5ed;
    --color-border-additional-2-primary: #97c7f2;
    --color-border-success-solid: #45a557;
    --color-border-warning-solid: #ffb224;
    --color-border-danger-solid: #e54d2e;
    --color-border-additional-1-solid: #8e4ec6;
    --color-border-additional-2-solid: #0091ff;
    --color-bg-surface-base-primary: #ffffff;
    --color-bg-surface-base-secondary: #f9fafb;
    --color-bg-surface-base-tertiary: #f0f2f4;
    --color-bg-fill-success-primary: #45a557;
    --color-bg-fill-success-primary-active: #297a3a;
    --color-bg-fill-success-tertiary: #def2de;
    --color-bg-fill-warning-primary: #ffb224;
    --color-bg-fill-danger-primary: #e54d2e;
    --color-bg-fill-additional-1-primary: #8e4ec6;
    --color-bg-fill-additional-2-primary: #0091ff;
    --color-bg-surface-success-secondary: #f3fcf3;
    --color-bg-surface-success-tertiary: #ebf9eb;
    --color-bg-surface-warning-secondary: #fff8eb;
    --color-bg-surface-danger-secondary: #fff6f5;
    --color-bg-fill-danger-tertiary: #ffe4e0;
    --color-bg-surface-additional-1-secondary: #fdfaff;
    --color-bg-surface-additional-1-tertiary: #f9f1fe;
    --color-bg-surface-additional-2-secondary: #f5faff;
    --color-bg-surface-additional-2-tertiary: #ebf5ff;

    /* DS primitive bridge */
    --navy: var(--data-ui-text-primary);
    --navy-deep: #0b292c;
    --blue: var(--data-ui-brand);
    --blue-bright: var(--data-ui-brand);
    --blue-hover: #096a73;
    --blue-active: var(--data-ui-brand-active);
    --cyan: var(--data-ui-brand-border);
    --cyan-bright: var(--data-ui-brand-border);
    --teal: var(--data-ui-brand);
    --teal-700: var(--data-ui-brand-active);
    --teal-600: var(--data-ui-brand);
    --teal-500: #2797a0;
    --teal-400: var(--data-ui-brand-border);
    --teal-100: #cce7e9;
    --teal-50: var(--data-ui-brand-soft);
    --ink: var(--data-ui-text-primary);
    --grey: var(--data-ui-text-secondary);
    --grey-muted: var(--data-ui-text-tertiary);
    --grey-line: var(--data-ui-border-primary);
    --paper: var(--data-ui-canvas);
    --white: var(--data-ui-surface);
    --slate-50: var(--data-ui-surface-secondary);
    --slate-100: var(--data-ui-surface-tertiary);
    --slate-200: var(--data-ui-border-secondary);
    --slate-300: var(--data-ui-border-primary);
    --slate-400: var(--data-ui-text-tertiary);
    --slate-500: var(--data-ui-text-secondary);
    --slate-600: #566067;
    --slate-700: #3d464c;
    --slate-800: var(--data-ui-text-primary);
    --slate-900: #0b1114;

    /* DS semantic surface */
    --bg-canvas: var(--data-ui-canvas);
    --bg-surface: var(--data-ui-surface);
    --bg-subtle: var(--data-ui-surface-secondary);
    --bg-inset: var(--data-ui-surface-tertiary);
    --bg-hover: #f3f7f8;
    --text-strong: var(--data-ui-text-primary);
    --text-body: var(--data-ui-text-primary);
    --text-muted: var(--data-ui-text-secondary);
    --text-subtle: var(--data-ui-text-tertiary);
    --text-link: var(--data-ui-brand);
    --text-link-hover: var(--data-ui-brand-active);
    --border-subtle: var(--data-ui-border-secondary);
    --border-strong: var(--data-ui-border-primary);
    --border-control: var(--data-ui-text-secondary);
    --border-focus: var(--data-ui-brand-active);
    --accent: var(--data-ui-brand);
    --accent-hover: #096a73;
    --accent-active: var(--data-ui-brand-active);
    --accent-soft: var(--data-ui-brand-soft);
    --accent-2: var(--data-ui-brand);
    --accent-2-soft: var(--data-ui-brand-soft);
    --accent-3: var(--data-ui-brand);
    /* Readable legacy semantics point into the Context contract. Fill and
       border consumers use their explicit --color-bg/--color-border roles. */
    --yellow: var(--color-text-warning);
    --success: var(--color-text-success-active);
    --success-strong: var(--color-text-success-active);
    --success-soft: var(--color-bg-surface-success-tertiary);
    --warning: var(--color-text-warning);
    --warning-strong: var(--color-text-warning-active);
    --warning-soft: var(--color-bg-surface-warning-secondary);
    --danger: var(--color-text-danger-active);
    --danger-hover: var(--color-text-danger-hover);
    --danger-soft: var(--color-bg-surface-danger-secondary);
    --info: var(--color-text-additional-2-active);
    --info-soft: var(--color-bg-surface-additional-2-tertiary);
    --risk-low: var(--color-text-success-active);
    --risk-medium: var(--color-text-warning-active);
    --risk-high: var(--color-text-danger);
    --risk-critical: var(--color-text-danger-active);

    /* Theme-wide categorical aliases for consumers not migrated from the
       legacy chart surface yet. The semantic Context roles remain canonical. */
    --chart-1: var(--color-border-brand-solid);
    --chart-2: var(--color-border-additional-2-solid);
    --chart-3: var(--color-border-success-solid);
    --chart-4: var(--color-border-additional-1-solid);
    --chart-5: var(--color-border-warning-solid);
    --chart-6: var(--color-border-danger-solid);
    --chart-7: var(--color-border-solid);
    --chart-8: var(--color-text-brand-active);
    --dp-chart-1: var(--chart-1);
    --dp-chart-2: var(--chart-2);
    --dp-chart-3: var(--chart-3);
    --dp-chart-4: var(--chart-4);
    --dp-chart-5: var(--chart-5);
    --dp-chart-6: var(--chart-6);
    --dp-chart-7: var(--chart-7);
    --dp-chart-8: var(--chart-8);
    --dp-chart-9: var(--color-text-secondary);

    /* Legacy status aliases are kept in sync for pages still being migrated. */
    --dp-status-success: var(--color-text-success-active);
    --dp-status-success-bg: var(--color-bg-surface-success-tertiary);
    --dp-status-success-border: var(--color-border-success-primary);
    --dp-status-success-text: var(--color-text-success-active);
    --dp-status-success-subtle: var(--color-bg-surface-success-secondary);
    --dp-status-warning: var(--color-text-warning-active);
    --dp-status-warning-bg: var(--color-bg-surface-warning-secondary);
    --dp-status-warning-border: var(--color-border-warning-primary);
    --dp-status-warning-text: var(--color-text-warning-active);
    --dp-status-warning-subtle: var(--color-bg-surface-warning-secondary);
    --dp-status-danger: var(--color-text-danger-active);
    --dp-status-danger-hover: var(--color-text-danger-hover);
    --dp-status-danger-bg: var(--color-bg-surface-danger-secondary);
    --dp-status-danger-border: var(--color-border-danger-primary);
    --dp-status-danger-text: var(--color-text-danger-active);
    --dp-status-danger-subtle: var(--color-bg-surface-danger-secondary);
    --dp-status-info: var(--color-text-additional-2-active);
    --dp-status-info-bg: var(--color-bg-surface-additional-2-secondary);
    --dp-status-info-border: var(--color-border-additional-2-primary);

    /* Figma spacing/radius/elevation contract */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-pill: 999px;
    --border-default: 1px solid var(--data-ui-border-primary);
    --border-separator: 1px solid var(--data-ui-border-secondary);
    --shadow-l1: none;
    --shadow-l1-hover: 0 2px 8px rgba(17, 24, 28, 0.08);
    --shadow-l2: 0 8px 24px rgba(17, 24, 28, 0.12);
    --content-narrow: 1188px;
    --sidebar-width: 252px;
    --page-padding: 24px;

    /* Bridge hard-coded RGB triplets and legacy consumers. */
    --dp-interactive-primary-rgb: 14, 124, 134;
    --pp-primary: var(--data-ui-brand);
    --pp-primary-hover: #096a73;
    --pp-primary-active: var(--data-ui-brand-active);
    --pp-primary-rgb: 14, 124, 134;
    --pp-palette-50: var(--data-ui-brand-soft);
    --pp-bg-soft-brand: var(--data-ui-brand-soft);
    --pp-bg-body: var(--data-ui-canvas);
    --pp-bg-surface: var(--data-ui-surface);
    --pp-bg-surface-elevated: var(--data-ui-surface);
    --pp-bg-input: var(--data-ui-surface);
    --pp-bg-hover: var(--bg-hover);
    --pp-bg-active: var(--data-ui-surface-tertiary);
    --pp-text-primary: var(--data-ui-text-primary);
    --pp-text-secondary: var(--data-ui-text-secondary);
    --pp-text-muted: var(--data-ui-text-tertiary);
    --pp-text-link: var(--data-ui-brand);
    --pp-text-link-hover: var(--data-ui-brand-active);
    --pp-border-color: var(--data-ui-border-primary);
    --pp-border-color-light: var(--data-ui-border-secondary);
    --pp-border-color-dark: #bcc3c8;
    --pp-navbar-bg: var(--data-ui-surface-secondary);
    --pp-navbar-text: var(--data-ui-text-primary);
    --pp-navbar-border: var(--data-ui-border-secondary);
    --pp-sidebar-bg: var(--data-ui-surface-secondary);
    --pp-sidebar-text: var(--data-ui-text-secondary);
    --pp-sidebar-hover-bg: var(--data-ui-brand-soft);
    --pp-sidebar-active-bg: var(--data-ui-brand-soft);
    --pp-sidebar-active-text: var(--data-ui-brand-active);
    --pp-sidebar-border: var(--data-ui-border-secondary);
    --pp-card-bg: var(--data-ui-surface);
    --pp-card-border: var(--data-ui-border-primary);
    --pp-table-bg: var(--data-ui-surface);
    --pp-table-hover-bg: var(--bg-hover);
    --pp-table-border: var(--data-ui-border-secondary);
    --pp-input-bg: var(--data-ui-surface);
    --pp-input-border: var(--data-ui-border-primary);
    --pp-input-focus-border: var(--data-ui-brand-border);
    --pp-input-focus-shadow: 0 0 0 3px rgba(14, 124, 134, 0.16);
    --pp-success: var(--success);
    --pp-success-bg: var(--success-soft);
    --pp-danger: var(--danger);
    --pp-danger-bg: var(--danger-soft);
    --pp-warning: var(--warning-strong);
    --pp-warning-bg: var(--warning-soft);
    --pp-info: var(--info);
    --pp-info-bg: var(--info-soft);

    /* DATA UI is flat rather than the legacy frosted/mesh visual layer. */
    --dp-frost-bg: var(--data-ui-surface-secondary);
    --dp-frost-border: var(--data-ui-border-secondary);
    --dp-frost-blur: none;
    --dp-mesh-1: none;
    --dp-mesh-2: none;
    --dp-mesh-3: none;
    --dp-nav-active-shadow: none;
    --dp-brand-grad: linear-gradient(135deg, var(--data-ui-brand), var(--data-ui-brand-active));
    --dp-brand-grad-shadow: none;
}

/* --------------------------------------------------------------------------
   Provisional dark conversion

   Conversion rules:
   - Preserve the four-step surface hierarchy instead of inverting hex values.
   - Raise teal luminance for links/focus, then use a dark contrast foreground
     on filled teal controls (9.32:1 for #081719 on #64c8ce).
   - Keep borders quieter than text; control borders use a separate 3:1 token.
   - Status hues retain their meaning and use dark chromatic tint surfaces.
   -------------------------------------------------------------------------- */
:root:root:root.palette-datanomics-horizon[data-pp-theme="dark"],
:root:root:root.palette-datanomics-horizon[data-pp-theme="dark"] body {
    color-scheme: dark;

    /* Converted primitives / semantic colors */
    --data-ui-brand: #64c8ce;
    --data-ui-brand-hover: #82d5da;
    --data-ui-brand-active: #49b4bc;
    --data-ui-brand-border: #60777b;
    --data-ui-brand-soft: #163336;
    --data-ui-nav-active-text: var(--data-ui-brand);
    --data-ui-canvas: #0b1517;
    --data-ui-surface: #111d20;
    --data-ui-surface-secondary: #152428;
    --data-ui-surface-tertiary: #1c2d31;
    --data-ui-surface-hover: #22373b;
    --data-ui-surface-active: #2a4247;
    --data-ui-text-primary: #edf5f5;
    --data-ui-text-secondary: #b2c1c3;
    --data-ui-text-tertiary: #8b9c9f;
    --data-ui-border-primary: #3b5357;
    --data-ui-border-secondary: #263a3e;
    --data-ui-border-control: #60777b;

    /* Provisional dark conversion of the same Context collection. */
    --color-text-primary: var(--data-ui-text-primary);
    --color-text-secondary: var(--data-ui-text-secondary);
    --color-text-tertiary: var(--data-ui-text-tertiary);
    --color-text-brand: var(--data-ui-brand);
    --color-text-brand-active: var(--data-ui-brand-active);
    --color-text-success: #5ec47c;
    --color-text-success-active: #5ec47c;
    --color-text-warning: #e2b45d;
    --color-text-warning-active: #e2b45d;
    --color-text-danger: #e18b84;
    --color-text-danger-hover: #eca09a;
    --color-text-danger-active: #e18b84;
    --color-text-additional-1: #c49ae6;
    --color-text-additional-1-active: #d2b1eb;
    --color-text-additional-2: #69b7e3;
    --color-text-additional-2-active: #8ac7ea;
    --color-border-solid: #8b9c9f;
    --color-border-brand-solid: #64c8ce;
    --color-border-success-primary: #356842;
    --color-border-warning-primary: #6b5b34;
    --color-border-danger-primary: #70423f;
    --color-border-additional-1-primary: #5e4770;
    --color-border-additional-2-primary: #365c73;
    --color-border-success-solid: #5ec47c;
    --color-border-warning-solid: #e2b45d;
    --color-border-danger-solid: #e18b84;
    --color-border-additional-1-solid: #c49ae6;
    --color-border-additional-2-solid: #69b7e3;
    --color-bg-surface-base-primary: #111d20;
    --color-bg-surface-base-secondary: #152428;
    --color-bg-surface-base-tertiary: #1c2d31;
    --color-bg-fill-success-primary: #5ec47c;
    --color-bg-fill-success-primary-active: #48aa68;
    --color-bg-fill-success-tertiary: #1d3b28;
    --color-bg-fill-warning-primary: #e2b45d;
    --color-bg-fill-danger-primary: #e18b84;
    --color-bg-fill-additional-1-primary: #c49ae6;
    --color-bg-fill-additional-2-primary: #69b7e3;
    --color-bg-surface-success-secondary: #14291d;
    --color-bg-surface-success-tertiary: #14291d;
    --color-bg-surface-warning-secondary: #2c2516;
    --color-bg-surface-danger-secondary: #2e1b1d;
    --color-bg-fill-danger-tertiary: #54282a;
    --color-bg-surface-additional-1-secondary: #2a2032;
    --color-bg-surface-additional-1-tertiary: #33243e;
    --color-bg-surface-additional-2-secondary: #152735;
    --color-bg-surface-additional-2-tertiary: #193043;

    /* DS primitive bridge — inverted neutral ramp, brightened teal */
    --navy: #f4fafa;
    --navy-deep: var(--data-ui-canvas);
    --blue: var(--data-ui-brand);
    --blue-bright: var(--data-ui-brand);
    --blue-hover: var(--data-ui-brand-hover);
    --blue-active: var(--data-ui-brand-active);
    --cyan: var(--data-ui-brand-hover);
    --cyan-bright: #a3e4e7;
    --teal: var(--data-ui-brand);
    --teal-700: var(--data-ui-brand-active);
    --teal-600: var(--data-ui-brand);
    --teal-500: var(--data-ui-brand-hover);
    --teal-400: #a3e4e7;
    --teal-100: #27484b;
    --teal-50: var(--data-ui-brand-soft);
    --ink: #dce8e9;
    --grey: var(--data-ui-text-secondary);
    --grey-muted: var(--data-ui-text-tertiary);
    --grey-line: var(--data-ui-border-primary);
    --paper: var(--data-ui-canvas);
    --white: var(--data-ui-surface);
    --soft-white: var(--data-ui-text-primary);
    --slate-50: var(--data-ui-canvas);
    --slate-100: var(--data-ui-surface-secondary);
    --slate-200: var(--data-ui-surface-tertiary);
    --slate-300: var(--data-ui-surface-active);
    --slate-400: var(--data-ui-border-control);
    --slate-500: var(--data-ui-text-tertiary);
    --slate-600: var(--data-ui-text-secondary);
    --slate-700: #ccd8d9;
    --slate-800: #e2ebeb;
    --slate-900: #f4fafa;

    /* DS semantic surface */
    --bg-canvas: var(--data-ui-canvas);
    --bg-surface: var(--data-ui-surface);
    --bg-subtle: var(--data-ui-surface-secondary);
    --bg-inset: var(--data-ui-surface-tertiary);
    --bg-hover: var(--data-ui-surface-hover);
    --text-strong: #f4fafa;
    --text-body: #dce8e9;
    --text-muted: var(--data-ui-text-secondary);
    --text-subtle: var(--data-ui-text-tertiary);
    --text-inverse: #081719;
    --text-link: var(--data-ui-brand);
    --text-link-hover: var(--data-ui-brand-hover);
    --border-subtle: var(--data-ui-border-secondary);
    --border-strong: var(--data-ui-border-primary);
    --border-control: var(--data-ui-border-control);
    --border-focus: var(--data-ui-brand);
    --accent: var(--data-ui-brand);
    --accent-hover: var(--data-ui-brand-hover);
    --accent-active: var(--data-ui-brand-active);
    --accent-contrast: #081719;
    --accent-soft: var(--data-ui-brand-soft);
    --accent-2: var(--data-ui-brand);
    --accent-2-soft: var(--data-ui-brand-soft);
    --accent-3: var(--data-ui-brand-hover);
    --success: #5ec47c;
    --success-strong: #5ec47c;
    --success-soft: #14291d;
    --warning: #e2b45d;
    --warning-strong: #e2b45d;
    --warning-soft: #2c2516;
    --danger: #e18b84;
    --danger-hover: #eca09a;
    --danger-soft: #2e1b1d;
    --info: #69b7e3;
    --info-soft: #152735;

    /* Keep old consumers aligned while the Context aliases are adopted. */
    --chart-1: var(--color-border-brand-solid);
    --chart-2: var(--color-border-additional-2-solid);
    --chart-3: var(--color-border-success-solid);
    --chart-4: var(--color-border-additional-1-solid);
    --chart-5: var(--color-border-warning-solid);
    --chart-6: var(--color-border-danger-solid);
    --chart-7: var(--color-border-solid);
    --chart-8: var(--color-text-brand-active);
    --dp-chart-1: var(--chart-1);
    --dp-chart-2: var(--chart-2);
    --dp-chart-3: var(--chart-3);
    --dp-chart-4: var(--chart-4);
    --dp-chart-5: var(--chart-5);
    --dp-chart-6: var(--chart-6);
    --dp-chart-7: var(--chart-7);
    --dp-chart-8: var(--chart-8);
    --dp-chart-9: var(--color-text-secondary);
    --dp-status-success: var(--color-text-success-active);
    --dp-status-success-bg: var(--color-bg-surface-success-tertiary);
    --dp-status-success-border: var(--color-border-success-primary);
    --dp-status-success-text: var(--color-text-success-active);
    --dp-status-success-subtle: var(--color-bg-surface-success-secondary);
    --dp-status-warning: var(--color-text-warning-active);
    --dp-status-warning-bg: var(--color-bg-surface-warning-secondary);
    --dp-status-warning-border: var(--color-border-warning-primary);
    --dp-status-warning-text: var(--color-text-warning-active);
    --dp-status-warning-subtle: var(--color-bg-surface-warning-secondary);
    --dp-status-danger: var(--color-text-danger-active);
    --dp-status-danger-hover: var(--color-text-danger-hover);
    --dp-status-danger-bg: var(--color-bg-surface-danger-secondary);
    --dp-status-danger-border: var(--color-border-danger-primary);
    --dp-status-danger-text: var(--color-text-danger-active);
    --dp-status-danger-subtle: var(--color-bg-surface-danger-secondary);
    --dp-status-info: var(--color-text-additional-2-active);
    --dp-status-info-bg: var(--color-bg-surface-additional-2-secondary);
    --dp-status-info-border: var(--color-border-additional-2-primary);

    /* Theme-invariant geometry plus dark elevation */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-pill: 999px;
    --border-default: 1px solid var(--data-ui-border-primary);
    --border-separator: 1px solid var(--data-ui-border-secondary);
    --shadow-l1: none;
    --shadow-l1-hover: 0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-l2: 0 12px 32px rgba(0, 0, 0, 0.42);
    --content-narrow: 1188px;
    --sidebar-width: 252px;
    --page-padding: 24px;

    /* Legacy consumers */
    --dp-interactive-primary-rgb: 100, 200, 206;
    --dp-auth-bg-glow-1: rgba(100, 200, 206, 0.08);
    --dp-auth-bg-glow-2: rgba(130, 213, 218, 0.05);
    --pp-primary: var(--data-ui-brand);
    --pp-primary-hover: var(--data-ui-brand-hover);
    --pp-primary-active: var(--data-ui-brand-active);
    --pp-primary-disabled: #31565a;
    --pp-primary-rgb: 100, 200, 206;
    --pp-palette-50: var(--data-ui-brand-soft);
    --pp-bg-soft-brand: var(--data-ui-brand-soft);
    --pp-bg-body: var(--data-ui-canvas);
    --pp-bg-surface: var(--data-ui-surface);
    --pp-bg-surface-elevated: var(--data-ui-surface-secondary);
    --pp-bg-input: var(--data-ui-surface-tertiary);
    --pp-bg-hover: var(--data-ui-surface-hover);
    --pp-bg-active: var(--data-ui-surface-active);
    --pp-bg-code: var(--data-ui-surface-tertiary);
    --pp-text-primary: var(--data-ui-text-primary);
    --pp-text-secondary: var(--data-ui-text-secondary);
    --pp-text-muted: var(--data-ui-text-tertiary);
    --pp-text-inverse: #081719;
    --pp-text-link: var(--data-ui-brand);
    --pp-text-link-hover: var(--data-ui-brand-hover);
    --pp-border-color: var(--data-ui-border-primary);
    --pp-border-color-light: var(--data-ui-border-secondary);
    --pp-border-color-dark: var(--data-ui-border-control);
    --pp-navbar-bg: var(--data-ui-surface-secondary);
    --pp-navbar-text: var(--data-ui-text-primary);
    --pp-navbar-border: var(--data-ui-border-secondary);
    --pp-sidebar-bg: var(--data-ui-surface-secondary);
    --pp-sidebar-text: var(--data-ui-text-secondary);
    --pp-sidebar-hover-bg: var(--data-ui-surface-hover);
    --pp-sidebar-active-bg: var(--data-ui-brand-soft);
    --pp-sidebar-active-text: var(--data-ui-brand);
    --pp-sidebar-border: var(--data-ui-border-secondary);
    --pp-card-bg: var(--data-ui-surface);
    --pp-card-border: var(--data-ui-border-primary);
    --pp-card-header-bg: var(--data-ui-surface-secondary);
    --pp-table-bg: var(--data-ui-surface);
    --pp-table-striped-bg: var(--data-ui-surface-secondary);
    --pp-table-hover-bg: var(--data-ui-surface-hover);
    --pp-table-border: var(--data-ui-border-secondary);
    --pp-input-bg: var(--data-ui-surface-tertiary);
    --pp-input-border: var(--data-ui-border-control);
    --pp-input-focus-border: var(--data-ui-brand);
    --pp-input-focus-shadow: 0 0 0 3px rgba(100, 200, 206, 0.22);
    --pp-input-disabled-bg: var(--data-ui-surface-secondary);
    --pp-modal-bg: var(--data-ui-surface);
    --pp-modal-header-bg: var(--data-ui-surface-secondary);
    --pp-modal-backdrop: rgba(0, 0, 0, 0.72);
    --pp-badge-primary-bg: var(--data-ui-brand);
    --pp-badge-secondary-bg: var(--data-ui-border-control);
    --pp-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28);
    --pp-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    --pp-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.48);
    --pp-toast-bg: var(--data-ui-surface-secondary);
    --pp-toast-border: var(--data-ui-border-primary);
    --pp-chart-grid: var(--data-ui-border-secondary);
    --pp-chart-text: var(--data-ui-text-secondary);
    --pp-chart-tooltip-bg: var(--data-ui-surface);
    --pp-chart-tooltip-border: var(--data-ui-border-primary);
    --pp-code-bg: var(--data-ui-surface-tertiary);
    --pp-code-text: var(--data-ui-brand-hover);
    --pp-scrollbar-track: var(--data-ui-surface-secondary);
    --pp-scrollbar-thumb: var(--data-ui-surface-active);
    --pp-scrollbar-thumb-hover: var(--data-ui-border-control);
    --pp-dropdown-bg: var(--data-ui-surface-secondary);
    --pp-dropdown-hover-bg: var(--data-ui-surface-hover);
    --pp-success: var(--success);
    --pp-success-bg: var(--success-soft);
    --pp-danger: var(--danger);
    --pp-danger-bg: var(--danger-soft);
    --pp-warning: var(--warning-strong);
    --pp-warning-bg: var(--warning-soft);
    --pp-info: var(--info);
    --pp-info-bg: var(--info-soft);

    /* Preserve the flat DATA UI character in dark mode. */
    --dp-frost-bg: var(--data-ui-surface-secondary);
    --dp-frost-border: var(--data-ui-border-secondary);
    --dp-frost-blur: none;
    --dp-mesh-1: none;
    --dp-mesh-2: none;
    --dp-mesh-3: none;
    --dp-nav-active-shadow: none;
    --dp-brand-grad: linear-gradient(135deg, var(--data-ui-brand), var(--data-ui-brand-active));
    --dp-brand-grad-shadow: none;
}

/* Shell: neutral sidebar and restrained brand canvas in both modes. */
.palette-datanomics-horizon .ds-topnav {
    background: var(--data-ui-surface-secondary);
    border-bottom-color: var(--data-ui-border-secondary);
    box-shadow: none;
}

.palette-datanomics-horizon .ds-drawer,
.palette-datanomics-horizon .ds-sidebar,
.palette-datanomics-horizon .ds-drawer-user {
    background: var(--data-ui-surface-secondary);
}

/* The Figma navigation marks the selected child with a teal rail/text instead
   of a solid inverse pill. Parent and standalone rows keep a soft brand fill. */
.palette-datanomics-horizon .ds-sidebar-item--child-active {
    background: transparent;
    color: var(--data-ui-text-primary);
}

.palette-datanomics-horizon .ds-sidebar-item--active,
.palette-datanomics-horizon .ds-sidebar-item--active:hover {
    background: var(--data-ui-brand-soft);
    color: var(--data-ui-nav-active-text);
    box-shadow: inset 2px 0 0 var(--data-ui-brand);
}

.palette-datanomics-horizon .ds-sidebar-child--active,
.palette-datanomics-horizon .ds-sidebar-child--active:hover {
    margin-left: -1px;
    padding-left: 13px;
    border-left: 1px solid var(--data-ui-brand);
    border-radius: 0;
    background: transparent;
    color: var(--data-ui-brand-active);
}

/* Shared content chrome: the screenshot uses bordered, shadowless controls. */
.palette-datanomics-horizon .ds-panel,
.palette-datanomics-horizon .ds-table-wrap {
    box-shadow: none;
}

.palette-datanomics-horizon .ds-table-th {
    color: var(--data-ui-text-primary);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
    background: var(--data-ui-surface-tertiary);
}

.palette-datanomics-horizon .ds-table-td {
    height: 56px;
}

.palette-datanomics-horizon .ds-btn {
    font-family: var(--font-body);
    font-weight: 600;
}

.palette-datanomics-horizon .ds-btn--md {
    min-height: 40px;
    padding: 10px 16px;
}

.palette-datanomics-horizon .ds-filterbar-search-input {
    border-color: var(--data-ui-border-primary);
    border-radius: 8px;
}

/* DSR response-template view: preserve the richer production states while
   matching the Figma surface rhythm. */
.palette-datanomics-horizon .dsr-tpl-kpi-row {
    gap: 12px;
}

.palette-datanomics-horizon .dsr-tpl-notice {
    margin-bottom: 12px;
}

.palette-datanomics-horizon .dsr-tpl-pagination {
    background: var(--data-ui-surface-secondary);
    border-top-color: var(--data-ui-border-secondary);
}

/* DsIconButton is the remaining DS primary control with a literal white label.
   Bootstrap keeps the same fallback for compact primary buttons. Both must use
   the converted dark foreground on the brighter Horizon accent. */
:root.palette-datanomics-horizon[data-pp-theme="dark"] .ds-iconbtn--primary {
    color: var(--accent-contrast);
}

:root.palette-datanomics-horizon[data-pp-theme="dark"] .btn-primary {
    --bs-btn-color: var(--accent-contrast);
    --bs-btn-hover-color: var(--accent-contrast);
    --bs-btn-active-color: var(--accent-contrast);
    --bs-btn-disabled-color: var(--accent-contrast);
}