:root[data-theme='dark'],
:root {
  --background: var(--ark-neutral-1);
  --background-elevated: var(--ark-neutral-2);
  --surface-1: #161616;
  --surface-2: #1c1c1c;
  --surface-3: #262626;
  --surface-4: #313131;

  --foreground:           rgba(255, 255, 255, 0.90);
  --foreground-secondary: rgba(255, 255, 255, 0.60);
  --foreground-muted:     rgba(255, 255, 255, 0.40);
  --foreground-disabled:  rgba(255, 255, 255, 0.25);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  --primary: var(--ark-blue-500);
  --primary-hover: var(--ark-blue-600);
  --primary-foreground: #ffffff;

  --accent: var(--ark-domain-aux);
  --success: var(--ark-green-500);
  --warning: var(--ark-orange-500);
  --danger: var(--ark-red-500);

  /* Tone surfaces shared by multiple modules. Keep module-specific hues local. */
  --tone-critical-bg: color-mix(in srgb, var(--danger) 14%, transparent);
  --tone-warning-bg: color-mix(in srgb, var(--warning) 16%, transparent);
  --tone-info-bg: color-mix(in srgb, var(--primary) 16%, transparent);
  --tone-blue-strong: color-mix(in srgb, var(--primary) 28%, transparent);
  --tone-green-strong: color-mix(in srgb, var(--success) 22%, transparent);
  --tone-warning-strong: color-mix(in srgb, var(--warning) 22%, transparent);

  --focus-ring: rgba(67, 105, 239, 0.42);

  /* Interaction State Overlays (ArkUI-style: overlay on surface, not bg swap) */
  --state-hover:    rgba(255, 255, 255, 0.06);
  --state-press:    rgba(255, 255, 255, 0.10);
  --state-muted:    rgba(255, 255, 255, 0.06);
  --state-selected: rgba(67, 105, 239, 0.14);
  --state-focus:    rgba(67, 105, 239, 0.20);

  /* Disabled States */
  --surface-disabled: rgba(255, 255, 255, 0.04);
  --border-disabled:  rgba(255, 255, 255, 0.06);

  --app-background: var(--background);
  --surface-backdrop-filter: none;
  --surface-backdrop-filter-soft: none;
  --surface-backdrop-filter-strong: none;
  --glass-surface-bg: var(--surface-1);
  --glass-surface-bg-soft: var(--surface-2);
  --glass-surface-bg-strong: var(--background-elevated);
  --glass-surface-border: var(--border-default);
  --glass-surface-highlight: none;
  --glass-surface-shadow: none;
}

:root[data-theme='glass'] {
  --background: #080a0f;
  --background-elevated: rgba(18, 25, 38, 0.62);
  --surface-1: rgba(255, 255, 255, 0.075);
  --surface-2: rgba(255, 255, 255, 0.095);
  --surface-3: rgba(255, 255, 255, 0.13);
  --surface-4: rgba(255, 255, 255, 0.18);

  --foreground:           rgba(255, 255, 255, 0.92);
  --foreground-secondary: rgba(255, 255, 255, 0.66);
  --foreground-muted:     rgba(255, 255, 255, 0.46);
  --foreground-disabled:  rgba(255, 255, 255, 0.28);

  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.24);

  --primary: #6fa1ff;
  --primary-hover: #8bb5ff;
  --primary-foreground: #08111f;
  --accent: #90a4d4;

  --focus-ring: rgba(111, 161, 255, 0.44);

  --state-hover:    rgba(255, 255, 255, 0.09);
  --state-press:    rgba(255, 255, 255, 0.14);
  --state-muted:    rgba(255, 255, 255, 0.07);
  --state-selected: rgba(111, 161, 255, 0.18);
  --state-focus:    rgba(111, 161, 255, 0.24);

  --surface-disabled: rgba(255, 255, 255, 0.055);
  --border-disabled:  rgba(255, 255, 255, 0.08);

  --app-background:
    radial-gradient(circle at 0% 0%, rgba(91, 140, 255, 0.20) 0%, rgba(91, 140, 255, 0.10) 18%, transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0.07) 16%, transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(234, 179, 8, 0.10) 0%, transparent 30%),
    linear-gradient(180deg, #080a0f 0%, #0f1623 48%, #080a0f 100%);
  --surface-backdrop-filter: blur(24px) saturate(170%) brightness(1.04);
  --surface-backdrop-filter-soft: blur(16px) saturate(150%) brightness(1.03);
  --surface-backdrop-filter-strong: blur(32px) saturate(180%) brightness(1.06);
  --glass-surface-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.052) 48%, rgba(255, 255, 255, 0.09));
  --glass-surface-bg-soft: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.038) 48%, rgba(255, 255, 255, 0.065));
  --glass-surface-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.064) 46%, rgba(255, 255, 255, 0.115));
  --glass-surface-border: rgba(255, 255, 255, 0.13);
  --glass-surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 1px 0 0 rgba(139, 181, 255, 0.10), inset -1px 0 0 rgba(255, 255, 255, 0.08), inset 0 -14px 30px rgba(0, 0, 0, 0.16);
  --glass-surface-shadow: 0 18px 56px rgba(0, 0, 0, 0.30), 0 3px 18px rgba(0, 0, 0, 0.20);
}

:root[data-theme='light'] {
  --background: var(--ark-neutral-1);
  --background-elevated: var(--ark-neutral-2);
  --surface-1: #FFFFFF;
  --surface-2: #F2F2F2;
  --surface-3: #E6E6E6;
  --surface-4: #CCCCCC;

  --foreground:           rgba(0, 0, 0, 0.90);
  --foreground-secondary: rgba(0, 0, 0, 0.55);
  --foreground-muted:     rgba(0, 0, 0, 0.42);
  --foreground-disabled:  rgba(0, 0, 0, 0.25);

  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.18);

  --focus-ring: rgba(67, 105, 239, 0.36);

  --state-hover:    rgba(0, 0, 0, 0.05);
  --state-press:    rgba(0, 0, 0, 0.09);
  --state-muted:    rgba(0, 0, 0, 0.05);
  --state-selected: rgba(67, 105, 239, 0.10);
  --state-focus:    rgba(67, 105, 239, 0.16);

  --surface-disabled: rgba(0, 0, 0, 0.04);
  --border-disabled:  rgba(0, 0, 0, 0.07);
}