:root{
  /* Text */
  --text-primary:var(--black);
  --text-secondary:var(--grey-600);
  --text-muted:var(--grey-500);
  --text-inverse:var(--white);
  --text-accent:var(--blue-500);
  --text-on-accent:var(--white);

  /* Surfaces */
  --surface-page:var(--white);
  --surface-sunken:var(--grey-50);
  --surface-raised:var(--white);
  --surface-inverse:var(--black);
  --surface-accent:var(--blue-500);
  --surface-accent-deep:var(--blue-700);
  --surface-accent-soft:var(--blue-200);
  --surface-accent-wash:var(--blue-50);

  /* Borders */
  --border-default:var(--grey-200);
  --border-strong:var(--black);
  --border-accent:var(--blue-500);
  --border-inverse:rgba(255,255,255,0.24);

  /* Interactive */
  --link:var(--blue-500);
  --link-hover:var(--blue-700);
  --link-visited:var(--blue-700);
  --focus-ring:var(--blue-500);

  --action-primary-bg:var(--blue-500);
  --action-primary-bg-hover:var(--blue-600);
  --action-primary-fg:var(--white);
  --action-secondary-bg:transparent;
  --action-secondary-fg:var(--black);
  --action-secondary-border:var(--black);
  --action-ghost-fg:var(--blue-500);
  --action-disabled-bg:var(--grey-100);
  --action-disabled-fg:var(--grey-400);

  /* Fields */
  --field-bg:var(--white);
  --field-border:var(--grey-300);
  --field-border-hover:var(--grey-500);
  --field-border-focus:var(--blue-500);
  --field-fg:var(--black);
  --field-placeholder:var(--grey-400);
}
[data-theme="inverse"]{
  --text-primary:var(--white);
  --text-secondary:rgba(255,255,255,0.72);
  --text-muted:rgba(255,255,255,0.56);
  --text-accent:var(--blue-200);
  --surface-page:var(--black);
  --surface-raised:var(--grey-900);
  --border-default:rgba(255,255,255,0.2);
  --border-strong:var(--white);
  --link:var(--blue-200);
  --link-hover:var(--white);
  --action-secondary-fg:var(--white);
  --action-secondary-border:var(--white);
  --action-ghost-fg:var(--blue-200);
}
[data-theme="accent"]{
  --text-primary:var(--white);
  --text-secondary:rgba(255,255,255,0.8);
  --text-muted:rgba(255,255,255,0.64);
  --text-accent:var(--white);
  --surface-page:var(--blue-500);
  --surface-raised:var(--blue-600);
  --border-default:rgba(255,255,255,0.28);
  --border-strong:var(--white);
  --link:var(--white);
  --link-hover:var(--blue-100);
  --action-primary-bg:var(--white);
  --action-primary-fg:var(--blue-500);
  --action-primary-bg-hover:var(--blue-100);
  --action-secondary-fg:var(--white);
  --action-secondary-border:var(--white);
  --action-ghost-fg:var(--white);
}