/* KlearSpend colour system. Base palette values are taken verbatim from the brand book. */
:root{
  /* --- Base palette (brand book) --- */
  --ks-purple:#8238eb;          /* Cryptic Purple  — primary */
  --ks-purple-600:#672ebf;      /* deeper purple   — press / hover-dark */
  --ks-plum:#6b207a;            /* Klear Plum */
  --ks-plum-800:#51175b;        /* deep plum */
  --ks-violet:#300d35;          /* Midnight Violet — ink */
  --ks-yellow:#ffd60a;          /* Cypher Yellow   — accent */
  --ks-cream:#fff3d1;           /* Off-White Screen */

  /* --- Palette variants observed in brand artwork --- */
  --ks-purple-400:#843fe3;      /* poster fills */
  --ks-purple-500:#7033d1;      /* mascot shading */
  --ks-yellow-400:#ffd339;      /* poster yellow */
  --ks-cream-100:#fff5d1;       /* illustration highlight */
  --ks-amber-700:#d68212;       /* illustration shadow */
  --ks-blush:#ffc4f0;           /* rare illustration highlight */

  /* --- Neutrals (derived; keep greys minimal, the brand prefers cream + violet) --- */
  --ks-white:#ffffff;
  --ks-ink-70:rgba(48,13,53,.70);
  --ks-ink-50:rgba(48,13,53,.50);
  --ks-ink-24:rgba(48,13,53,.24);
  --ks-ink-12:rgba(48,13,53,.12);
  --ks-cream-70:rgba(255,243,209,.70);
  --ks-cream-40:rgba(255,243,209,.40);
  --ks-cream-16:rgba(255,243,209,.16);

  /* --- Semantic aliases --- */
  --surface-page:var(--ks-cream);
  --surface-page-alt:var(--ks-purple);
  --surface-card:var(--ks-white);
  --surface-card-invert:var(--ks-violet);
  --surface-raised:var(--ks-cream-100);
  --surface-accent:var(--ks-yellow);
  --surface-grid:var(--ks-cream-40);      /* faint grid overlay on purple */
  --surface-grid-invert:var(--ks-ink-12); /* faint grid overlay on yellow/cream */

  --text-body:var(--ks-violet);
  --text-muted:var(--ks-ink-70);
  --text-on-purple:var(--ks-cream);
  --text-on-purple-muted:var(--ks-cream-70);
  --text-on-yellow:var(--ks-violet);
  --text-accent:var(--ks-yellow);
  --text-link:var(--ks-purple);
  --text-link-hover:var(--ks-purple-600);

  --border-hairline:var(--ks-ink-12);
  --border-strong:var(--ks-violet);
  --border-on-purple:var(--ks-cream-16);

  /* Actions */
  --action-primary-bg:var(--ks-yellow);
  --action-primary-fg:var(--ks-violet);
  --action-primary-bg-hover:var(--ks-yellow-400);
  --action-secondary-bg:var(--ks-purple);
  --action-secondary-fg:var(--ks-cream);
  --action-secondary-bg-hover:var(--ks-purple-600);
  --action-ghost-fg:var(--ks-purple);
  --action-disabled-bg:var(--ks-ink-12);
  --action-disabled-fg:var(--ks-ink-50);

  /* Pillar colours: Save / Spend / Invest */
  --pillar-save:var(--ks-yellow);
  --pillar-spend:var(--ks-purple);
  --pillar-invest:var(--ks-plum);

  /* Status. The brand avoids fear-driven red; "attention" is yellow, and true
     errors use plum rather than a stop-sign red. */
  --status-positive:#1f9d55;
  --status-attention:var(--ks-yellow);
  --status-critical:var(--ks-plum);
  --status-info:var(--ks-purple);
}