/* Colors — black, white, one cool off-white. No brand accent exists. */
:root{
  /* core */
  --color-canvas-night:#000000;
  --color-canvas-night-soft:#0a0a0a;
  --color-canvas-light:#ffffff;
  --color-canvas-cool:#f0f0fa;
  --color-hairline-on-dark:#3a3a3f;
  --color-hairline-on-light:#e0e0e8;
  --color-on-primary:#ffffff;
  --color-on-primary-mute:#f0f0fa;
  --color-ink:#000000;
  --color-ink-mute:#5a5a5f;
  --color-link-on-dark:#ffffff;
  --color-link-on-light:#000000;
  --color-link-blue-fallback:#0000ee;

  /* semantic — dark (marketing) */
  --surface-marketing:var(--color-canvas-night);
  --surface-marketing-soft:var(--color-canvas-night-soft);
  --text-on-dark:var(--color-on-primary);
  --text-on-dark-mute:var(--color-on-primary-mute);
  --hairline-dark:var(--color-hairline-on-dark);

  /* semantic — light (shop / product) */
  --surface-product:var(--color-canvas-light);
  --surface-product-alt:var(--color-canvas-cool);
  --text-on-light:var(--color-ink);
  --text-on-light-mute:var(--color-ink-mute);
  --hairline-light:var(--color-hairline-on-light);

  /* semantic — interaction */
  --border-cta-on-dark:var(--color-on-primary);
  --border-cta-on-light:var(--color-ink);
  --cta-hover-canvas-on-dark:var(--color-canvas-cool);
  --cta-hover-ink-on-dark:var(--color-ink);
  --focus-ring-on-dark:var(--color-on-primary);
  --focus-ring-on-light:var(--color-ink);
  --media-placeholder:#141417;
}