/**
 * Brand tokens — stesso sistema SpinMonitor (--brand → soft/hover/ink).
 */
:root {
  --brand: #1292d1;

  --accent: var(--brand);
  --accent-soft: color-mix(in srgb, var(--brand) 12%, #ffffff);
  --accent-soft-2: color-mix(in srgb, var(--brand) 22%, #ffffff);
  --accent-border: color-mix(in srgb, var(--brand) 42%, #ffffff);
  --accent-hover: color-mix(in srgb, var(--brand) 82%, #000000);
  --accent-ink: color-mix(in srgb, var(--brand) 72%, #000000);
  --accent-deep: color-mix(in srgb, var(--brand) 55%, #000000);
  --accent-contrast: #ffffff;

  --accent-a08: color-mix(in srgb, var(--brand) 8%, transparent);
  --accent-a12: color-mix(in srgb, var(--brand) 12%, transparent);
  --accent-a20: color-mix(in srgb, var(--brand) 20%, transparent);
  --accent-a28: color-mix(in srgb, var(--brand) 28%, transparent);
  --accent-a35: color-mix(in srgb, var(--brand) 35%, transparent);
  --accent-a55: color-mix(in srgb, var(--brand) 55%, transparent);

  --accent-ring: var(--accent-a28);
}