/* Kgotla — colour system. Values transcribed verbatim from the Figma file. */
:root{
  /* Brand */
  --kgotla-blue:#0051FF;          /* Main brand, primary CTAs, links */
  --kgotla-blue-hover:#0545CE;    /* Primary button hover */
  --kgotla-blue-dark:#1053E2;     /* Figma variable "Dark blue" */
  --kgotla-blue-alt:#004CFF;      /* Icon component fill */
  --kgotla-mint:#009780;          /* Gradient terminus */
  --kgotla-light-blue:#E8F1FF;    /* Soft highlights, alternative rows */
  --kgotla-orange:#FF834D;        /* Action alerts, selective markers */
  --kgotla-yellow:#FFDF18;        /* Accent marker */

  /* Gradients */
  --gradient-brand:linear-gradient(90deg,#0051FF 1%,#009780 98%); /* @kind color */
  --gradient-mark:linear-gradient(58.392deg,#0051FF 7.25%,#009780 82.51%); /* @kind color */
  --gradient-splash:linear-gradient(-45.618deg,#0051FF 10.13%,#009780 84.07%); /* @kind color */

  /* Neutrals — typographic */
  --ink:#0F172B;                  /* Headings on light */
  --body-charcoal:#374151;        /* Body copy, primary paragraphs */
  --slate-blue:#62748E;           /* Secondary text, labels, sub-heads */
  --muted-gray:#6B7280;           /* Disabled states, subtle annotations */
  --slate-700:#334155;
  --slate-400:#94A3B8;
  --black:#000000;
  --white:#FFFFFF;

  /* Neutrals — surface & line */
  --system-slate:#E2E8F0;         /* Subtle borders, dividers */
  --slate-100:#F1F5F9;
  --bone:#F6F5EF;                 /* Service-card ground, primary-dark hover */
  --off-white:#F0EFEF;            /* Secondary-light hover */
  --blue-tint:#F8FAFF;
  --canvas-gray:#E9E9E9;          /* Figma board ground */
  --placeholder-gray:#C4C4C4;     /* Image slot before art is placed */

  /* Semantic status */
  --success:#16A34A; --success-surface:#F0FDF4; --success-border:#DCFCE7;
  --danger:#DC2626;  --danger-surface:#FFF5F5;  --danger-border:#FEE2E2;

  /* Semantic aliases */
  --text-heading:var(--ink);
  --text-body:var(--body-charcoal);
  --text-secondary:var(--slate-blue);
  --text-muted:var(--muted-gray);
  --text-on-brand:var(--white);
  --text-eyebrow:var(--kgotla-blue);
  --text-link:var(--kgotla-blue);

  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-brand:var(--kgotla-blue);
  --surface-soft:var(--kgotla-light-blue);
  --surface-bone:var(--bone);
  --surface-tint:var(--blue-tint);

  --border-subtle:var(--system-slate);
  --border-strong:var(--kgotla-blue);
  --border-inverse:var(--white);
}