/**
 * ==========================================================================
 * DS BRIDGE — Datanomics Design System migration layer (Phase 0)
 * ==========================================================================
 *
 * Re-points the legacy token surface (--dp-* / --pp-*) at the new Datanomics
 * Design System tokens (loaded from _content/Datanomics.Ds/tokens/*.css) so
 * the whole app rebrands from Governance Teal (#176B66) to Brand Blue
 * (#165089) in one controlled switch. See docs/design/ui-migration-audit-plan.html.
 *
 * MUST load LAST in App.razor (after apple-vibrancy.css).
 *
 * Cascade strategy:
 *   - The palette system applies .palette-* classes to BOTH <html> and <body>,
 *     and apple-vibrancy/color-palettes define tokens at up to (0,2,0)
 *     specificity on each. Bridge selectors use :root:root:root (0,3,0) and
 *     :root:root:root body (0,3,1) so they deterministically win regardless
 *     of palette class or dark-mode class combinations.
 *   - Values reference DS semantic tokens (--bg-*, --text-*, --accent*, …)
 *     which flip via [data-pp-theme="dark"] (set by theme-helper.js in sync
 *     with data-bs-theme), so ONE mapping serves both themes.
 *   - EXCEPTION — the 9 categorical data-viz tokens (--dp-chart-1..9) are
 *     deliberately NOT bridged: Datanomics.Ds colors.css declares --chart-1..8
 *     only in :root (no [data-pp-theme="dark"] block), so a bridge mapping
 *     froze them at their light values in both themes and shadowed the signed
 *     per-theme palette in variables.css. Do NOT map them here again.
 *
 * Scope (deliberate):
 *   - Bridged: brand-carrying tokens — surfaces, text, borders, interactive,
 *     nav/navbar, charts, links, brand tints, vibrancy mesh/gradients, fonts.
 *   - NOT bridged: hue-neutral groups already tuned per-theme for WCAG AA
 *     (status success/warning/danger/info, risk, classification, audit
 *     severity/diff, auth inputs, shadows, z-index). They keep their legacy
 *     definitions until components consume DS tokens directly in Phase 1+.
 *
 * Remove this file (or shrink it) in Phase 5 once no consumer reads --dp-*.
 */

:root:root:root,
:root:root:root body {
    /* ---------------- Fonts (guideline §02 — Typography) ---------------- */
    --font-display: 'Montserrat', 'Manrope', 'Inter', 'Be Vietnam Pro', 'Segoe UI', sans-serif;
    --font-heading: 'Inter', 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;

    /* ---------------- Surfaces ---------------- */
    --dp-surface-page:          var(--bg-canvas);
    --dp-surface-primary:       var(--bg-surface);
    --dp-surface-secondary:     var(--bg-subtle);
    --dp-surface-elevated:      var(--bg-surface);
    --dp-surface-hover:         var(--bg-hover);
    --dp-surface-active:        var(--slate-200);
    --dp-surface-selected:      rgba(var(--dp-interactive-primary-rgb), 0.07);
    --dp-surface-brand-subtle:  var(--accent-soft);
    --dp-surface-input:         var(--bg-inset);
    --dp-surface-input-focus:   var(--bg-surface);
    --dp-skeleton-bg:           var(--slate-200);

    /* ---------------- Text ---------------- */
    --dp-text-primary:      var(--text-body);
    --dp-text-secondary:    var(--text-muted);
    --dp-text-tertiary:     var(--text-subtle);   /* decorative/placeholder — below AA by design */
    --dp-text-muted:        var(--text-muted);
    --dp-text-disabled:     var(--slate-300);
    --dp-text-inverse:      var(--text-inverse);
    --dp-text-link:         var(--accent);
    --dp-text-link-hover:   var(--accent-hover);
    --dp-text-on-primary:   var(--accent-contrast);
    --dp-text-on-accent:    var(--accent-contrast);

    /* ---------------- Borders ---------------- */
    --dp-border-default:            var(--border-subtle);
    --dp-border-subtle:             var(--slate-200);
    --dp-border-strong:             var(--border-strong);
    --dp-border-control:            var(--border-control);
    --dp-border-focus:              rgba(var(--dp-interactive-primary-rgb), 0.44);
    --dp-border-interactive-focus:  rgba(var(--dp-interactive-primary-rgb), 0.44);

    /* ---------------- Interactive ---------------- */
    --dp-interactive-primary:           var(--accent);
    --dp-interactive-primary-rgb:       22, 80, 137;          /* #165089 — dark overrides below */
    --dp-interactive-primary-hover:     var(--accent-hover);
    --dp-interactive-primary-active:    var(--accent-active);
    --dp-interactive-primary-disabled:  color-mix(in srgb, var(--accent) 35%, var(--bg-surface));
    --dp-interactive-secondary:         var(--bg-surface);
    --dp-interactive-secondary-hover:   var(--bg-hover);
    --dp-interactive-ghost-hover:       var(--bg-inset);
    --dp-interactive-accent:            var(--accent-2);       /* teal secondary accent */
    --dp-interactive-accent-hover:      var(--teal-700);

    /* ---------------- Navigation (sidebar) — mockup: light surface, blue active pill ---------------- */
    --dp-nav-bg:            var(--bg-surface);
    --dp-nav-text:          var(--text-body);
    --dp-nav-text-muted:    var(--text-subtle);
    --dp-nav-hover:         var(--bg-hover);
    --dp-nav-active-bg:     var(--accent);
    --dp-nav-active-text:   var(--accent-contrast);
    --dp-nav-divider:       var(--slate-200);
    --dp-nav-section-label: var(--text-subtle);

    /* ---------------- Navbar (top bar) ---------------- */
    --dp-navbar-bg:     var(--bg-surface);
    --dp-navbar-text:   var(--text-strong);
    --dp-navbar-border: var(--slate-200);

    /* ---------------- Chart infrastructure only (see header note on --dp-chart-1..9) ---------------- */
    --dp-chart-grid:           var(--slate-200);
    --dp-chart-axis:           var(--text-subtle);
    --dp-chart-tooltip-bg:     var(--bg-surface);
    --dp-chart-tooltip-border: var(--slate-200);
    --dp-chart-tooltip-text:   var(--text-body);

    /* ---------------- Brand tints & misc ---------------- */
    --dp-notify-unread-bg:  rgba(var(--dp-interactive-primary-rgb), 0.04);
    --dp-auth-bg-glow-1:    rgba(22, 80, 137, 0.05);
    --dp-auth-bg-glow-2:    rgba(28, 154, 165, 0.035);

    /* ---------------- Vibrancy layer (apple-vibrancy.css) — teal → blue ---------------- */
    --dp-mesh-1: radial-gradient(ellipse 70% 55% at 12% -5%, rgba(var(--dp-interactive-primary-rgb), 0.10), transparent 55%);
    --dp-mesh-2: radial-gradient(ellipse 80% 60% at 92% 8%, rgba(28, 154, 165, 0.05), transparent 55%);
    --dp-mesh-3: radial-gradient(ellipse 90% 65% at 50% 110%, rgba(var(--dp-interactive-primary-rgb), 0.05), transparent 60%);
    --dp-nav-active-shadow: 0 4px 12px rgba(var(--dp-interactive-primary-rgb), 0.20);
    --dp-brand-grad: linear-gradient(135deg, var(--accent) 0%, var(--blue-bright) 100%);
    --dp-brand-grad-shadow: 0 5px 12px rgba(var(--dp-interactive-primary-rgb), 0.22);

    /* ---------------- DataGrid layout — aliases onto the DS table scale (ADR-046 §5.4) ----------------
       Values live in _content/Datanomics.Ds/tokens/spacing.css (--ds-table-*) so the compact
       `.dp-grid` layer and the DsDataTable comfortable layer read ONE scale. Nothing here carries a
       number: these names exist only until `.dp-grid` is retired at the end of the migration.
       `--dp-grid-col-select` is NOT bridged — it belongs to DataGrid's selection column, which dies
       with the component, so it keeps its own value in variables.css and is not ported into the DS.
       Dimensions only, theme-invariant — no dark-mode counterpart below. */
    --dp-grid-cell-py:      var(--ds-table-cell-py-compact);
    --dp-grid-cell-px:      var(--ds-table-cell-px-compact);
    --dp-grid-header-py:    var(--ds-table-head-py-compact);
    --dp-grid-row-min-h:    var(--ds-table-row-min-h-compact);
    --dp-grid-col-actions:  var(--ds-table-col-actions);
    --dp-grid-col-xs:       var(--ds-table-col-xs);
    --dp-grid-col-sm:       var(--ds-table-col-sm);
    --dp-grid-col-chip:     var(--ds-table-col-chip);
    --dp-grid-col-md:       var(--ds-table-col-md);
    --dp-grid-col-lg:       var(--ds-table-col-lg);
    --dp-grid-min-w-tablet: var(--ds-table-min-w-tablet);

    /* ---------------- Legacy --pp-* aliases still consumed directly ---------------- */
    --pp-primary:            var(--accent);
    --pp-primary-hover:      var(--accent-hover);
    --pp-primary-active:     var(--accent-active);
    --pp-primary-rgb:        var(--dp-interactive-primary-rgb);
    --pp-palette-50:         var(--accent-soft);
    --pp-bg-soft-brand:      var(--accent-soft);
    --pp-text-link:          var(--accent);
    --pp-text-link-hover:    var(--accent-hover);
    --pp-sidebar-active-bg:  var(--accent);
    --pp-sidebar-active-text: var(--accent-contrast);
    --pp-sidebar-hover-bg:   rgba(var(--dp-interactive-primary-rgb), 0.08);
    --pp-input-focus-border: rgba(var(--dp-interactive-primary-rgb), 0.48);
    --pp-input-focus-shadow: 0 0 0 3px rgba(var(--dp-interactive-primary-rgb), 0.16);
    --pp-accent:             var(--teal);          /* DS secondary accent */
    --pp-accent-hover:       var(--teal-700);
    --pp-accent-text:        var(--accent-contrast);
    --pp-bg-body:            var(--bg-canvas);
    --pp-bg-surface:         var(--bg-surface);
    --pp-text-primary:       var(--text-body);
    --pp-text-secondary:     var(--text-muted);
    --pp-navbar-bg:          var(--bg-surface);
    --pp-navbar-text:        var(--text-strong);
    --pp-sidebar-bg:         var(--bg-surface);
    --pp-sidebar-text:       var(--text-body);
    --pp-border-color:       var(--border-subtle);
}

/* Dark-only literals: values that cannot flip via DS tokens (rgb triplets). */
:root:root:root[data-pp-theme="dark"],
:root:root:root[data-pp-theme="dark"] body {
    --dp-interactive-primary-rgb: 47, 157, 226;   /* dark --accent #2f9de2 */
}