/**
 * Brand tokens — cambia solo --brand (o config brand.color).
 * Soft / hover / ink / ring si derivano con color-mix.
 */
: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);
}