/* ============================================================
   PERMAfit — Colour tokens
   The brand is built on six spectrum hues that flow together
   into the signature multicolour gradient. Large surfaces stay
   clean white so the gradient pops.
   ============================================================ */

:root {
  /* ---- Brand spectrum (exact, from the style guide) ---- */
  --pf-blue:    #2563EB;  /* Clarity, focus, intelligence */
  --pf-violet:  #6A3CFF;  /* Insight, imagination, spirituality */
  --pf-magenta: #C2187A;  /* Passion, connection, emotional strength */
  --pf-red:     #FF4D4D;  /* Drive, courage, transformation */
  --pf-orange:  #FF8A00;  /* Energy, motivation, enthusiasm */
  --pf-yellow:  #FFC52E;  /* Optimism, positivity, awareness */

  /* ---- Tints (12% over white) for soft fills / chips ---- */
  --pf-blue-tint:    #E6EEFD;
  --pf-violet-tint:  #ECE6FF;
  --pf-magenta-tint: #F8E4F0;
  --pf-red-tint:     #FFE6E6;
  --pf-orange-tint:  #FFEFDB;
  --pf-yellow-tint:  #FFF6E0;

  /* ---- Neutrals (near-black on white, warm-cool balanced) ---- */
  --pf-ink:       #16161A;  /* primary text */
  --pf-ink-2:     #3A3A42;  /* strong secondary */
  --pf-slate:     #6A6A76;  /* muted / captions */
  --pf-mist:      #9A9AA6;  /* placeholder / disabled */
  --pf-line:      #E7E7EC;  /* hairline borders */
  --pf-line-2:    #F0F0F3;  /* faint dividers */
  --pf-cloud:     #F4F4F6;  /* app neutral card fill (image slots) */
  --pf-paper:     #FAFAFB;  /* off-white section bg */
  --pf-white:     #FFFFFF;

  /* ---- Signature gradients ---- */
  /* Full spectrum sweep — the core brand device */
  --pf-gradient: linear-gradient(
      105deg,
      var(--pf-blue)    0%,
      var(--pf-violet)  20%,
      var(--pf-magenta) 40%,
      var(--pf-red)     60%,
      var(--pf-orange)  80%,
      var(--pf-yellow)  100%);
  /* Warm slice (orange→magenta) — app course panels */
  --pf-gradient-warm: linear-gradient(135deg, var(--pf-yellow) 0%, var(--pf-orange) 35%, var(--pf-red) 70%, var(--pf-magenta) 100%);
  /* Cool slice (blue→violet) */
  --pf-gradient-cool: linear-gradient(135deg, var(--pf-blue) 0%, var(--pf-violet) 100%);
  /* Soft conic for logo-style icon chips */
  --pf-gradient-icon: linear-gradient(140deg, var(--pf-yellow) 0%, var(--pf-orange) 30%, var(--pf-magenta) 65%, var(--pf-violet) 100%);

  /* ---- Semantic aliases ---- */
  --text-strong:   var(--pf-ink);
  --text-body:     var(--pf-ink-2);
  --text-muted:    var(--pf-slate);
  --text-faint:    var(--pf-mist);
  --text-on-grad:  var(--pf-white);

  --surface-page:    var(--pf-white);
  --surface-sunken:  var(--pf-paper);
  --surface-card:    var(--pf-white);
  --surface-slot:    var(--pf-cloud);

  --border-subtle:  var(--pf-line);
  --border-faint:   var(--pf-line-2);

  --accent:          var(--pf-orange);
  --accent-strong:   var(--pf-red);
  --focus-ring:      color-mix(in srgb, var(--pf-violet) 55%, transparent);
}