/* Violet — the brand hue. It owns every action, focus ring and active state.
 * Nothing else may appear on a button, a link or a focus ring. */
:root {
  --color-violet-50: #f3edfd;
  --color-violet-100: #e4d6fa;
  --color-violet-200: #cfb6f4;
  --color-violet-300: #b08cec;
  --color-violet-400: #9a6ce6;
  --color-violet-500: #8348de;
  --color-violet-600: #6d34c9;
  --color-violet-700: #55279e;
  --color-violet-800: #3f1d76;
  --color-violet-900: #2e1459;

  --action-default: var(--color-violet-600);
  --action-hover: var(--color-violet-700);
  --action-pressed: var(--color-violet-800);
  --action-soft: var(--color-violet-50);
  --action-on: #ffffff;
  --focus-ring: var(--color-violet-500);

  /* The hero CTA's gradient border. Two background layers, painted to the
     border box — see components/core/PrimaryCta. */
  --gradient-cta-border: linear-gradient(100deg, oklch(0.62 0.24 292), oklch(0.56 0.26 312), oklch(0.66 0.2 276)); /* @kind other */
}