: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;

  --foreground: #eaeaea;
  --foreground-secondary: #b3b3b3;
  --foreground-muted: #8d8d8d;
  --foreground-disabled: #6f6f6f;

  --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: #f5f9ff;

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

  --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-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);
}