/* @spec spec://modules/experience/FEAT-005-snippist-radar#interface */
/* Snippist — semantic tokens (SNIPPIST-DESIGN-SYSTEM.md §5, §8, §9, §28)
   One source for every artboard. Light is the default; a root with .t-dark switches the theme. */

:root, .t-light {
  --bg-canvas: #F7F6F2;
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #EFEEE9;
  --bg-surface-pressed: #E6E5E0;
  --bg-inverse: #0D0E11;

  --text-primary: #0B0C0E;
  --text-secondary: #60636B;
  --text-tertiary: #8C8E94;
  --text-inverse: #F7F6F2;
  --text-accent: #0060FF;

  --icon-primary: #0B0C0E;
  --icon-secondary: #60636B;
  --icon-accent: #0060FF;

  --action-primary-fill: #0B0C0E;
  --action-primary-text: #F7F6F2;
  --action-secondary-fill: #FFFFFF;
  --action-secondary-text: #0B0C0E;
  --action-accent: #0060FF;

  --selection-border: #0060FF;
  --selection-fill: #E3EDFF;

  --divider-default: rgba(11, 12, 14, 0.12);
  --divider-strong: rgba(11, 12, 14, 0.22);

  --overlay-scrim: rgba(0, 0, 0, 0.48);
  --overlay-media-chrome: rgba(0, 0, 0, 0.32);

  --feedback-success: #167A46;
  --feedback-warning: #9A5B00;
  --feedback-error: #C93333;
  --feedback-info: #0060FF;

  /* component tokens (proposed, not yet in the DS doc) */
  --wave-idle: #8C8E94;
  --text-on-media: #F7F6F2;
  --spark: #C7FF3D;
  --brand-blue: #0060FF; /* the logo blue; UI accent = the same blue since 2026-09-23 (option A) */

  --shadow-low: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-floating: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.t-dark {
  --bg-canvas: #0D0E11;
  --bg-surface: #14161A;
  --bg-surface-subtle: #1B1D22;
  --bg-surface-pressed: #25282E;
  --bg-inverse: #F7F6F2;

  --text-primary: #F7F6F2;
  --text-secondary: #B8BBC2;
  --text-tertiary: #7C8089;
  --text-inverse: #0B0C0E;
  --text-accent: #4D8FFF;

  --icon-primary: #F7F6F2;
  --icon-secondary: #B8BBC2;
  --icon-accent: #4D8FFF;

  --action-primary-fill: #F7F6F2;
  --action-primary-text: #0B0C0E;
  --action-secondary-fill: #1B1D22;
  --action-secondary-text: #F7F6F2;
  --action-accent: #4D8FFF;

  --selection-border: #4D8FFF;
  --selection-fill: #0B2A66;

  --divider-default: rgba(247, 246, 242, 0.12);
  --divider-strong: rgba(247, 246, 242, 0.22);

  --overlay-scrim: rgba(0, 0, 0, 0.54);
  --overlay-media-chrome: rgba(0, 0, 0, 0.38);

  --feedback-success: #62D894;
  --feedback-warning: #FFBF5B;
  --feedback-error: #FF7777;
  --feedback-info: #4D8FFF;

  --wave-idle: #60636B;
  --text-on-media: #F7F6F2;
  --spark: #C7FF3D;
  --brand-blue: #0060FF;

  --shadow-low: none;
  --shadow-floating: none;
}

/* motion tokens */
:root {
  --motion-instant: 80ms;
  --motion-fast: 120ms;
  --motion-standard: 200ms;
  --motion-emphasized: 320ms;
  --motion-reveal: 520ms;
  --motion-hero: 700ms;
}

@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-spin { animation: ds-spin 900ms linear infinite; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .ds-spin { animation-duration: 2400ms; }
}