:root{
  /* KlearSpend artwork is flat. Shadows exist only to lift interactive surfaces
     off a coloured field, and they are violet-tinted, never neutral grey. */
  --shadow-none:none;
  --shadow-xs:0 1px 0 rgba(48,13,53,.08);
  --shadow-sm:0 2px 6px rgba(48,13,53,.10);
  --shadow-md:0 8px 20px rgba(48,13,53,.14);
  --shadow-lg:0 18px 40px rgba(48,13,53,.20);
  --shadow-press:inset 0 2px 0 rgba(48,13,53,.16);

  /* Hard offset shadow — the sticker/poster look used on yellow CTAs over purple */
  --shadow-sticker:4px 4px 0 var(--ks-violet);
  --shadow-sticker-sm:2px 2px 0 var(--ks-violet);

  /* Focus ring: yellow on purple, purple on cream */
  --focus-ring:0 0 0 3px var(--ks-yellow),0 0 0 5px rgba(48,13,53,.35);
  --focus-ring-light:0 0 0 3px rgba(130,56,235,.35);

  /* Faint grid overlay used behind illustration and hero art */
  --pattern-grid-light:repeating-linear-gradient(to right,var(--ks-cream-40) 0 1px,transparent 1px var(--grid-cell)),repeating-linear-gradient(to bottom,var(--ks-cream-40) 0 1px,transparent 1px var(--grid-cell)); /* @kind other */
  --pattern-grid-dark:repeating-linear-gradient(to right,var(--ks-ink-12) 0 1px,transparent 1px var(--grid-cell)),repeating-linear-gradient(to bottom,var(--ks-ink-12) 0 1px,transparent 1px var(--grid-cell)); /* @kind other */

  /* Scrim for text over full-bleed illustration */
  --scrim-bottom:linear-gradient(to top,rgba(48,13,53,.72),rgba(48,13,53,0)); /* @kind other */

  /* Blur is used sparingly — sheet backdrops only */
  --backdrop-blur:blur(10px); /* @kind other */
  --backdrop-tint:rgba(48,13,53,.56); /* @kind color */
}