:root {
  /* Surfaces (dark) */
  --l2-surface-0: #0e0c08;
  --l2-surface-1: #1a1612;
  --l2-surface-2: #251f18;
  --l2-surface-3: #332a20;

  /* Body / display ink (dark) */
  --l2-ink-body: #e8e0cf;
  --l2-ink-display: #e8c478;

  /* Metals (theme-invariant) */
  --l2-metal-gold: #c9a55a;
  --l2-metal-gold-dim: #8a7138;
  --l2-metal-gold-bright: #e8c478;
  --l2-metal-bronze: #a06e3a;
  --l2-metal-silver: #b6b1a3;
  --l2-metal-steel-dim: #3d3833;

  /* Grades (dark) */
  --grade-ng: #9a948a;
  --grade-d: #7eb8c9;
  --grade-c: #7ed1a3;
  --grade-b: #a04528;
  --grade-a: #c8c4bd;
  --grade-s: #f5e0a2;
  --grade-s80: #f5e0a2;
  --grade-s84: #f5e0a2;

  /* Rarity glows (theme-invariant; hover-only) */
  --rarity-magic: inset 0 0 12px rgba(126, 184, 201, 0.5);
  --rarity-set: inset 0 0 12px rgba(126, 209, 163, 0.5);
  --rarity-epic: inset 0 0 14px rgba(209, 150, 209, 0.55);
  --rarity-unique: inset 0 0 14px rgba(232, 196, 120, 0.6);
  --rarity-mythical: inset 0 0 16px rgba(245, 224, 162, 0.65);

  /* Semantic (dark) */
  --l2-semantic-danger: #a82828;
  --l2-semantic-success: #5a8a3e;
  --l2-semantic-warning: #d09a3c;
  --l2-semantic-info: #6a8aa8;

  /* Spacing scale (4px base) */
  --l2-spacing-0: 0;
  --l2-spacing-0-5: 0.125rem;
  --l2-spacing-1: 0.25rem;
  --l2-spacing-2: 0.5rem;
  --l2-spacing-3: 0.75rem;
  --l2-spacing-4: 1rem;
  --l2-spacing-5: 1.25rem;
  --l2-spacing-6: 1.5rem;
  --l2-spacing-8: 2rem;
  --l2-spacing-10: 2.5rem;
  --l2-spacing-12: 3rem;
  --l2-spacing-16: 4rem;
}

[data-theme="light"] {
  /* Surfaces (light — aged parchment) */
  --l2-surface-0: #f5efe0;
  --l2-surface-1: #ece1c8;
  --l2-surface-2: #e0d2b3;
  --l2-surface-3: #cbb98f;

  /* Body / display ink (light) */
  --l2-ink-body: #2a1d12;
  --l2-ink-display: #3a2818;

  /* Grades (light) */
  --grade-ng: #5e564b;
  --grade-d: #3a6b7d;
  --grade-c: #2f7d51;
  --grade-b: #6e2c14;
  --grade-a: #5a5852;
  --grade-s: #a88735;
  --grade-s80: #a88735;
  --grade-s84: #a88735;

  /* Semantic (light) */
  --l2-semantic-danger: #7a1f1f;
  --l2-semantic-success: #3a6028;
  --l2-semantic-warning: #8a652a;
  --l2-semantic-info: #3a5a78;
}

/* ===== V3 tokens (per docs/redesign-v3/tokens.scaffold.css) ===== */

/* === Primitive layer === */
:root {
  --l2-color-cobalt-50:  #EEF2F8;
  --l2-color-cobalt-100: #D8E0EE;
  --l2-color-cobalt-200: #B5C2DC;
  --l2-color-cobalt-300: #8E9FC4;
  --l2-color-cobalt-400: #5E78AA;
  --l2-color-cobalt-500: #34568B;
  --l2-color-cobalt-600: #2A4677;
  --l2-color-cobalt-700: #213760;
  --l2-color-cobalt-800: #182849;
  --l2-color-cobalt-900: #0E1A33;

  --l2-color-gold-50:  #FBF6E3;
  --l2-color-gold-100: #F5E9B8;
  --l2-color-gold-200: #EBD580;
  --l2-color-gold-300: #DDBE54;
  --l2-color-gold-400: #D5B03A;
  --l2-color-gold-500: #C9A227;
  --l2-color-gold-600: #A8861E;
  --l2-color-gold-700: #846818;
  --l2-color-gold-800: #5E4A11;
  --l2-color-gold-900: #382C09;

  --l2-color-neutral-50:   #F7F5F2;
  --l2-color-neutral-100:  #EBE7E1;
  --l2-color-neutral-200:  #D6D0C7;
  --l2-color-neutral-300:  #B8B1A6;
  --l2-color-neutral-400:  #968D80;
  --l2-color-neutral-500:  #75695B;
  --l2-color-neutral-600:  #5A4F44;
  --l2-color-neutral-700:  #423A31;
  --l2-color-neutral-800:  #2E2823;
  --l2-color-neutral-900:  #1F1B17;
  --l2-color-neutral-950:  #15120F;
  --l2-color-neutral-1000: #0B0A08;

  --l2-color-success-base:   #467B49;
  --l2-color-warning-base:   #A37222;
  --l2-color-danger-base:    #B14842;
  --l2-color-info-base:      #677B8E;
  --l2-color-milestone-base: #9B7EDB;

  --l2-color-element-fire:  #d2403a;
  --l2-color-element-water: #3a73d2;
  --l2-color-element-wind:  #3aa66a;
  --l2-color-element-earth: var(--l2-color-gold-700);
  --l2-color-element-holy:  var(--l2-color-gold-300);
  --l2-color-element-unholy: var(--l2-color-cobalt-800);

  /* Variation flavour tints (theme-invariant; promoted from docs/mockups/03-items-detail.html in b3-4b-7) */
  --l2-color-variation-pvp: #8B3A75;

  --l2-color-state-active:  var(--l2-color-cobalt-500);
  --l2-color-state-passive: var(--l2-color-neutral-500);
  --l2-color-state-toggle:  var(--l2-color-gold-300);
  --l2-color-state-buff:    var(--l2-color-cobalt-500);
  --l2-color-state-debuff:  var(--l2-color-danger-base);

  --l2-color-skill-active:  var(--l2-color-cobalt-500);
  --l2-color-skill-passive: var(--l2-color-neutral-500);
  --l2-color-skill-toggle:  var(--l2-color-gold-500);

  --l2-space-2:  2px;
  --l2-space-4:  4px;
  --l2-space-8:  8px;
  --l2-space-12: 12px;
  --l2-space-16: 16px;
  --l2-space-24: 24px;
  --l2-space-32: 32px;
  --l2-space-48: 48px;
  --l2-space-64: 64px;

  --l2-size-icon-xs:   16px;
  --l2-size-icon-sm:   32px;
  --l2-size-icon-base: 40px;
  --l2-size-icon-md:   48px;
  --l2-size-icon-lg:   64px;
  --l2-size-icon-xl:   96px;

  --l2-type-size-12: 12px;
  --l2-type-size-13: 13px;
  --l2-type-size-14: 14px;
  --l2-type-size-16: 16px;
  --l2-type-size-18: 18px;
  --l2-type-size-24: 24px;
  --l2-type-size-32: 32px;
  --l2-type-size-48: 48px;

  --l2-radius-0:    0;
  --l2-radius-4:    4px;
  --l2-radius-8:    8px;
  --l2-radius-12:   12px;
  --l2-radius-16:   16px;
  --l2-radius-pill: 9999px;

  --l2-motion-duration-instant: 0ms;
  --l2-motion-duration-fast:    120ms;
  --l2-motion-duration-base:    200ms;
  --l2-motion-duration-slow:    320ms;

  --l2-motion-easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --l2-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --l2-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --l2-motion-easing-sharp:      cubic-bezier(0.4, 0, 0.6, 1);

  --l2-font-display-fallback: 'PT Serif', ui-serif, Georgia, serif;
  --l2-font-display: var(--l2-font-display-fallback, ui-serif, Georgia, serif);
  --l2-font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --l2-font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --l2-font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

/* === Semantic layer (dark default) === */
:root {
  --l2-color-surface-base:    var(--l2-color-neutral-1000);
  --l2-color-surface-raised:  var(--l2-color-neutral-950);
  --l2-color-surface-sunken:  var(--l2-color-neutral-1000);
  --l2-color-surface-overlay: var(--l2-color-neutral-900);
  --l2-color-surface-chrome:  var(--l2-color-neutral-950);
  --l2-color-surface-scrim:   rgba(0, 0, 0, 0.72);

  --l2-color-text-primary:   var(--l2-color-neutral-50);
  --l2-color-text-secondary: var(--l2-color-neutral-300);
  --l2-color-text-muted:     var(--l2-color-neutral-500);
  --l2-color-text-inverse:   var(--l2-color-neutral-950);
  --l2-color-text-on-action: var(--l2-color-neutral-50);
  --l2-color-text-link:      var(--l2-color-cobalt-300);

  --l2-color-border-default: var(--l2-color-neutral-800);
  --l2-color-border-strong:  var(--l2-color-neutral-700);
  --l2-color-border-focus:   var(--l2-color-cobalt-400);

  --l2-color-action-primary:        var(--l2-color-cobalt-500);
  --l2-color-action-primary-hover:  var(--l2-color-cobalt-400);
  --l2-color-action-primary-active: var(--l2-color-cobalt-600);

  --l2-color-accent-tenant:           var(--l2-color-cobalt-300);
  --l2-color-accent-tenant-hover:     var(--l2-color-cobalt-200);
  --l2-color-accent-tenant-strong:    var(--l2-color-cobalt-200);
  --l2-color-accent-tenant-soft:      var(--l2-color-cobalt-500);
  --l2-color-accent-tenant-bg-tint:   rgba(142, 159, 196, 0.08);
  --l2-color-accent-tenant-bg-strong: rgba(142, 159, 196, 0.16);
  --l2-color-tenant-tint:             var(--l2-color-cobalt-900);
  --l2-color-tenant-sigil:            var(--l2-color-cobalt-400);
  --l2-color-tenant-glow:             var(--l2-color-cobalt-400);
  --tenant-sigil-url:                 url("/assets/sigils/dex.svg");

  --l2-color-focus: var(--l2-color-cobalt-400);

  --l2-color-state-success:   var(--l2-color-success-base);
  --l2-color-state-warning:   var(--l2-color-warning-base);
  --l2-color-state-danger:    var(--l2-color-danger-base);
  --l2-color-state-info:      var(--l2-color-info-base);
  --l2-color-state-milestone: var(--l2-color-milestone-base);

  --l2-space-stack-tight:    var(--l2-space-8);
  --l2-space-stack-default:  var(--l2-space-16);
  --l2-space-stack-loose:    var(--l2-space-24);
  --l2-space-inline-tight:   var(--l2-space-4);
  --l2-space-inline-default: var(--l2-space-8);
}

/* === Semantic layer (light overrides) === */
[data-theme="light"] {
  --l2-color-surface-base:    var(--l2-color-neutral-50);
  --l2-color-surface-raised:  #FFFFFF;
  --l2-color-surface-sunken:  var(--l2-color-neutral-100);
  --l2-color-surface-overlay: #FFFFFF;
  --l2-color-surface-chrome:  var(--l2-color-neutral-100);
  --l2-color-surface-scrim:   rgba(0, 0, 0, 0.48);

  --l2-color-text-primary:   var(--l2-color-neutral-950);
  --l2-color-text-secondary: var(--l2-color-neutral-700);
  --l2-color-text-muted:     var(--l2-color-neutral-500);
  --l2-color-text-inverse:   var(--l2-color-neutral-50);
  --l2-color-text-on-action: var(--l2-color-neutral-50);
  --l2-color-text-link:      var(--l2-color-cobalt-600);

  --l2-color-border-default: var(--l2-color-neutral-200);
  --l2-color-border-strong:  var(--l2-color-neutral-300);
  --l2-color-border-focus:   var(--l2-color-cobalt-600);

  --l2-color-action-primary:        var(--l2-color-cobalt-600);
  --l2-color-action-primary-hover:  var(--l2-color-cobalt-500);
  --l2-color-action-primary-active: var(--l2-color-cobalt-700);

  --l2-color-accent-tenant:           var(--l2-color-cobalt-700);
  --l2-color-accent-tenant-hover:     var(--l2-color-cobalt-600);
  --l2-color-accent-tenant-strong:    var(--l2-color-cobalt-700);
  --l2-color-accent-tenant-soft:      var(--l2-color-cobalt-500);
  --l2-color-accent-tenant-bg-tint:   rgba(33, 55, 96, 0.08);
  --l2-color-accent-tenant-bg-strong: rgba(33, 55, 96, 0.16);
  --l2-color-tenant-tint:             var(--l2-color-cobalt-50);
  --l2-color-tenant-sigil:            var(--l2-color-cobalt-600);
  --l2-color-tenant-glow:             var(--l2-color-cobalt-400);

  --l2-color-focus: var(--l2-color-cobalt-600);

  --l2-color-state-success:   #2F5733;
  --l2-color-state-warning:   #8A5717;
  --l2-color-state-danger:    #6F2421;
  --l2-color-state-info:      #3A4F62;
  --l2-color-state-milestone: #5A3B91;

  --l2-color-skill-active: var(--l2-color-cobalt-600);
  --l2-color-skill-toggle: var(--l2-color-gold-700);
}

/* === Tenant identity overrides (per design-system §3.7) ===
   `:root` + `[data-theme="light"]` declare DEX-cold values as the default
   tenant. UNION-warm values override below. `<html>` carries both attrs:
       <html data-theme="dark" data-tenant="dex">    <-- default at first paint
       <html data-theme="light" data-tenant="union"> <-- example switched state
   B1.9.2 (2026-05-13) widened the overlay from 5 identity tokens to also
   flip primary action, focus, link, border-focus, AND the matching
   MudBlazor palette vars so MudButton / MudLink / focus rings / NavMenu
   active accent / drops-table accents go cobalt↔gold per tenant.
   B1.9.3 (2026-05-13) added the `--l2-color-accent-tenant-{strong,soft,
   bg-tint,bg-strong}` family alongside the existing `accent-tenant`, so
   the ~22 decorative scoped-CSS consumers that historically aliased to
   `--mud-palette-warning` (V2 gold holdover, tenant-blind) now flip per
   tenant. Three chroma steps (strong/default/soft) + two transparent
   fills (bg-tint at ~8% / bg-strong at ~16%) per locked decision #4 in
   docs/redesign-v3/plan.md.
   Surfaces, neutrals, semantic states, body text, scrim stay
   theme-driven only. */

[data-tenant="union"] {
  --l2-color-accent-tenant:           var(--l2-color-gold-500);
  --l2-color-accent-tenant-hover:     var(--l2-color-gold-400);
  --l2-color-accent-tenant-strong:    var(--l2-color-gold-300);
  --l2-color-accent-tenant-soft:      var(--l2-color-gold-500);
  --l2-color-accent-tenant-bg-tint:   rgba(201, 162, 39, 0.08);
  --l2-color-accent-tenant-bg-strong: rgba(201, 162, 39, 0.16);
  --l2-color-tenant-tint:             var(--l2-color-gold-900);
  --l2-color-tenant-sigil:            var(--l2-color-gold-600);
  --l2-color-tenant-glow:             var(--l2-color-gold-400);
  --tenant-sigil-url:                 url("/assets/sigils/union.svg");

  --l2-color-action-primary:        var(--l2-color-gold-500);
  --l2-color-action-primary-hover:  var(--l2-color-gold-400);
  --l2-color-action-primary-active: var(--l2-color-gold-600);
  --l2-color-text-on-action:        var(--l2-color-neutral-950);
  --l2-color-text-link:             var(--l2-color-gold-400);
  --l2-color-border-focus:          var(--l2-color-gold-400);
  --l2-color-focus:                 var(--l2-color-gold-400);

  --mud-palette-primary:         #C9A227;
  --mud-palette-primary-text:    #15120F;
  --mud-palette-primary-darken:  #A8861E;
  --mud-palette-primary-lighten: #D5B03A;
  --mud-palette-primary-hover:   rgba(213, 176, 58, 0.12);
  --mud-palette-tertiary:        #DDBE54;
  --mud-palette-action-default:  #C9A227;

  --l2-color-skill-active: var(--l2-color-gold-500);
  --l2-color-skill-toggle: var(--l2-color-cobalt-500);
}

/* `--mud-palette-tertiary` is load-bearing — Npcs/Details.razor uses
   `Color="Color.Tertiary"` on the skill MudTooltip + MudLink. Removing
   the override silently regresses those surfaces from gold to cobalt
   under UNION. Migrate consumers off `Color.Tertiary` before the
   override is retired. Regression guarded by
   `TenantAccentFamilyTests.TokensCss_PreservesMudPaletteTertiaryOverride`. */
[data-theme="light"][data-tenant="union"] {
  --l2-color-accent-tenant:           var(--l2-color-gold-700);
  --l2-color-accent-tenant-hover:     var(--l2-color-gold-600);
  --l2-color-accent-tenant-strong:    var(--l2-color-gold-700);
  --l2-color-accent-tenant-soft:      var(--l2-color-gold-500);
  --l2-color-accent-tenant-bg-tint:   rgba(132, 104, 24, 0.08);
  --l2-color-accent-tenant-bg-strong: rgba(132, 104, 24, 0.16);
  --l2-color-tenant-tint:             var(--l2-color-gold-50);
  --l2-color-tenant-sigil:            var(--l2-color-gold-700);
  --l2-color-tenant-glow:             var(--l2-color-gold-400);

  --l2-color-action-primary:        var(--l2-color-gold-700);
  --l2-color-action-primary-hover:  var(--l2-color-gold-600);
  --l2-color-action-primary-active: var(--l2-color-gold-800);
  --l2-color-text-on-action:        var(--l2-color-neutral-50);
  --l2-color-text-link:             var(--l2-color-gold-700);
  --l2-color-border-focus:          var(--l2-color-gold-700);
  --l2-color-focus:                 var(--l2-color-gold-700);

  --mud-palette-primary:         #846818;
  --mud-palette-primary-text:    #F7F5F2;
  --mud-palette-primary-darken:  #5E4A11;
  --mud-palette-primary-lighten: #A8861E;
  --mud-palette-primary-hover:   rgba(168, 134, 30, 0.12);
  --mud-palette-tertiary:        #846818;
  --mud-palette-action-default:  #846818;

  --l2-color-skill-active: var(--l2-color-gold-700);
  --l2-color-skill-toggle: var(--l2-color-cobalt-600);
}

/* === Component layer === */
:root {
  --l2-button-bg:           var(--l2-color-action-primary);
  --l2-button-bg-hover:     var(--l2-color-action-primary-hover);
  --l2-button-bg-active:    var(--l2-color-action-primary-active);
  --l2-button-text:         var(--l2-color-text-on-action);
  --l2-button-border:       transparent;
  --l2-button-radius:       var(--l2-radius-4);
  --l2-button-padding-x:    var(--l2-space-16);
  --l2-button-padding-y:    var(--l2-space-8);

  --l2-table-row-bg:          transparent;
  --l2-table-row-hover-bg:    var(--l2-color-surface-raised);
  --l2-table-row-selected-bg: var(--l2-color-accent-tenant-bg-strong);
  --l2-table-row-border:      var(--l2-color-border-default);
  --l2-table-cell-padding-y:  var(--l2-space-8);
  --l2-table-cell-padding-x:  var(--l2-space-12);
  --l2-table-header-min-h:    36px;
  --l2-table-row-min-h:       32px;

  --l2-chip-grade-ng-bg:   #423A31;
  --l2-chip-grade-d-bg:    #182849;
  --l2-chip-grade-c-bg:    #1F3F3A;
  --l2-chip-grade-b-bg:    #a04528;
  --l2-chip-grade-a-bg:    #3a3d42;
  --l2-chip-grade-s-bg:    #C9A227;
  --l2-chip-grade-s80-bg:  #C9A227;
  --l2-chip-grade-s84-bg:  #C9A227;
  --l2-chip-grade-text-light: var(--l2-color-neutral-50);
  --l2-chip-grade-text-dark:  var(--l2-color-neutral-950);
  --l2-chip-radius:        var(--l2-radius-pill);
  --l2-chip-padding-x:     var(--l2-space-8);
  --l2-chip-padding-y:     var(--l2-space-2);
  --l2-chip-font-size:     var(--l2-type-size-12);

  --l2-input-bg:            var(--l2-color-surface-sunken);
  --l2-input-border:        var(--l2-color-border-default);
  --l2-input-border-focus:  var(--l2-color-border-focus);
  --l2-input-text:          var(--l2-color-text-primary);
  --l2-input-placeholder:   var(--l2-color-text-muted);
  --l2-input-radius:        var(--l2-radius-4);
  --l2-input-padding-x:     var(--l2-space-12);
  --l2-input-padding-y:     var(--l2-space-8);

  --l2-card-bg:      var(--l2-color-surface-raised);
  --l2-card-border:  var(--l2-color-border-default);
  --l2-card-radius:  var(--l2-radius-8);
  --l2-card-padding: var(--l2-space-24);

  --l2-autocomplete-dropdown-bg:     var(--l2-color-surface-overlay);
  --l2-autocomplete-dropdown-border: var(--l2-color-border-strong);
  --l2-autocomplete-dropdown-radius: var(--l2-radius-8);
  --l2-autocomplete-dropdown-scrim:  var(--l2-color-surface-scrim);
  --l2-autocomplete-dropdown-z:      calc(var(--mud-zindex-appbar) + 1);

  --l2-focus-ring-width:  2px;
  --l2-focus-ring-offset: 2px;
  --l2-focus-ring-color:  var(--l2-color-focus);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}