:root{
  /* Surfaces */
  --tg-surface-page:var(--tg-white);
  --tg-surface-subtle:var(--tg-ink-50);
  --tg-surface-sunken:var(--tg-ink-100);
  --tg-surface-card:var(--tg-white);
  --tg-surface-inverse:var(--tg-navy);
  --tg-surface-inverse-deep:var(--tg-navy-deep);

  /* Text */
  --tg-text-strong:var(--tg-navy);
  --tg-text-body:var(--tg-ink-700);
  --tg-text-muted:var(--tg-ink-500);
  --tg-text-subtle:var(--tg-ink-400);
  --tg-text-on-inverse:var(--tg-white);
  --tg-text-on-inverse-muted:rgba(255,255,255,.72);
  --tg-text-accent:var(--tg-teal-700);
  --tg-text-link:var(--tg-navy);
  --tg-text-link-hover:var(--tg-teal-700);

  /* Borders */
  --tg-border-subtle:var(--tg-ink-150);
  --tg-border-default:var(--tg-ink-200);
  --tg-border-strong-color:var(--tg-ink-300);
  --tg-border-accent:var(--tg-teal-500);
  --tg-border-inverse:var(--tg-white-a16);

  /* Interactive — primary (navy) */
  --tg-action-bg:var(--tg-navy);
  --tg-action-bg-hover:var(--tg-ink-800);
  --tg-action-bg-active:var(--tg-navy-deep);
  --tg-action-fg:var(--tg-white);

  /* Interactive — accent (teal) */
  --tg-accent-bg:var(--tg-teal-500);
  --tg-accent-bg-hover:var(--tg-teal-600);
  --tg-accent-bg-active:var(--tg-teal-700);
  --tg-accent-fg:var(--tg-navy-deep);

  --tg-focus-ring:var(--tg-ring-focus);
  --tg-disabled-opacity:.42; /* @kind other */
}