:root {
  /* Brand colors */
  --color-primary: #9d00ff;        /* bright purple */
  --color-primary-dark: #341539;   /* dark purple */
  --color-primary-faded: #52215A;  /* faded dark purple */
  --color-success: #04A12B;        /* green1 - initial state */
  --color-success-hover: #00CC33;  /* green2 - hover state */
  --color-white: #FFFFFF;
  --color-bg: #FAFAFA;
  --color-border: #E8E8E8;
  --color-border-strong: #D9DADC;

  /* Text (not explicitly given, using sensible defaults against this palette) */
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;

  /* Typography */
  --font-base: 'Montserrat', sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;

  /* Radii */
  --radius: 8px;
  --radius-full: 999px;

  /* Header specific */
  --header-row1-bg: var(--color-white);
  --header-row2-bg: var(--color-primary-dark);

  --container-max-width: 1280px; /* adjust to taste */
  --container-padding: 1.5rem;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-success-hover);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}