:root{
  /* Surfaces */
  --surface-canvas:var(--navy-950);
  --surface-canvas-gradient:var(--gradient-navy-vignette); /* @kind color */
  --surface-panel:var(--navy-700);
  --surface-panel-gradient:var(--gradient-navy-panel); /* @kind color */
  --surface-light:var(--marble-100);
  --surface-card:rgba(255,255,255,.06);
  --surface-card-light:var(--white);

  /* Text on navy (the default context) */
  --text-primary:var(--white);
  --text-secondary:rgba(255,255,255,.78);
  --text-muted:rgba(255,255,255,.56);
  --text-accent:var(--gold-300);

  /* Text on light */
  --text-on-light:var(--navy-900);
  --text-on-light-secondary:var(--grey-700);
  --text-on-light-accent:var(--gold-700);

  /* Accents & lines */
  --accent:var(--gold-400);
  --accent-strong:var(--gold-600);
  --accent-surface:var(--gradient-gold); /* @kind color */
  --accent-on-accent:var(--navy-900);
  --border-subtle:rgba(255,255,255,.28); /* @kind color */
  --border-strong:rgba(255,255,255,.55); /* @kind color */
  --border-accent:var(--gold-500); /* @kind color */

  /* Roles */
  --link-color:var(--gold-300);
  --link-color-hover:var(--gold-100);
  --focus-ring:2px solid var(--gold-300); /* @kind other */
  --focus-ring-offset:3px; /* @kind spacing */
}
a{color:var(--link-color)}
a:hover{color:var(--link-color-hover)}