:root{
  /* ---- Base palette (from brand sheet) ---- */
  --white: #FFFFFF;
  --ink: #17121F;          /* body text, dark surfaces */
  --grey: #8A8494;         /* support / muted text */

  /* Gradient stops — "Violet Storm" */
  --violet: #7C3AED;       /* gradient start */
  --pink: #EC4899;         /* gradient end */
  --violet-solid: #B441C3; /* single-color / print fallback for the gradient */

  /* The signature gradient. Use ONLY on: wordmark, one hero word,
     primary buttons, stat numbers. */
  --gradient-violet-storm: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%); /* @kind color */
  --gradient-violet-storm-135: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); /* @kind color */

  /* ---- Neutral ramp (derived from ink + grey, oklch-harmonised) ---- */
  --ink-900: #17121F;
  --ink-800: #241D2F;
  --ink-700: #332941;
  --grey-500: #8A8494;
  --grey-400: #A9A4B2;
  --grey-300: #C8C4CE;
  --grey-200: #E4E2E8;
  --grey-100: #F2F1F5;
  --grey-50:  #F9F8FB;

  /* Tinted violet washes for hovers / soft fills on white */
  --violet-tint-08: rgba(124, 58, 237, 0.08);
  --violet-tint-14: rgba(124, 58, 237, 0.14);
  --pink-tint-10:   rgba(236, 72, 153, 0.10);

  /* ---- Semantic aliases ---- */
  --bg-base: var(--white);
  --bg-ink: var(--ink);
  --surface-card: var(--white);
  --surface-muted: var(--grey-50);
  --surface-inset: var(--grey-100);

  --text-heading: var(--ink);
  --text-body: var(--ink);
  --text-support: var(--grey);
  --text-on-ink: var(--white);
  --text-on-ink-support: var(--grey-400);

  --border-subtle: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-on-ink: rgba(255,255,255,0.10);

  --accent: var(--violet);
  --accent-solid: var(--violet-solid);
  --focus-ring: rgba(124, 58, 237, 0.45);
}