/* ==========================================================================
   Peoplos — Color tokens
   A cool, low-saturation teal foundation. Near-neutral surfaces and ink are
   gently teal-tinted rather than pure gray, so the whole product reads calm
   and coherent. One teal accent does the interface work; the seven Peoplos-mark
   colours form the secondary palette for charts, data viz and expressive
   accents — status and expressive roles draw from that same set.
   Source: Peoplos Design System — Essence (working prototype).
   ========================================================================== */

:root {
  /* ---------- Core neutrals (light theme) ---------- */
  --pp-bg:      #eef4f4; /* Page canvas */
  --pp-card:    #ffffff; /* Surfaces */
  --pp-ink:     #16323a; /* Primary text */
  --pp-ink2:    #4a595e; /* Body text */
  --pp-muted:   #6f8488; /* Secondary text */
  --pp-faint:   #a3b4b7; /* Captions / meta */
  --pp-line:    #e0eaea; /* Borders */
  --pp-line2:   #ecf3f3; /* Hairlines / fills */

  /* ---------- Accent — Teal ---------- */
  --pp-accent:       #0e8f83; /* Primary action */
  --pp-accent2:      #16b3a4; /* Gradient end / hover */
  --pp-accent-deep:  #0d9488; /* Pressed / deep tag */
  --pp-accent-soft:  #d7f0ec; /* Tint / selected */
  --pp-accent-tint:  #eefaf8; /* Faintest teal wash (hero top) */
  --pp-accent-grad:  linear-gradient(150deg, #16b3a4, #0e8f83); /* @kind color */

  /* ---------- Secondary — Peoplos mark palette ----------
     The seven figures of the Peoplos mark, clockwise from the top. This is the
     product's secondary palette: use it for charts, data viz, categorical
     graphics and expressive accents. Names are canonical — refer to them
     everywhere (Coral, Orange, Yellow, Green, Teal, Blue, Orchid). Status and
     expressive roles draw from this same set; there are no separate status hues. */
  --pp-coral:  #f26a4b; /* mark 1 · top */
  --pp-orange: #f7a93e; /* mark 2 */
  --pp-yellow: #f6cb2a; /* mark 3 */
  --pp-green:  #3fae49; /* mark 4 */
  --pp-teal:   #22b8a8; /* mark 5 */
  --pp-blue:   #4a90d9; /* mark 6 */
  --pp-orchid: #ab6db4; /* mark 7 */

  /* Ordered categorical scale — cycle series / segments through these in order */
  --pp-cat-1: var(--pp-coral);
  --pp-cat-2: var(--pp-orange);
  --pp-cat-3: var(--pp-yellow);
  --pp-cat-4: var(--pp-green);
  --pp-cat-5: var(--pp-teal);
  --pp-cat-6: var(--pp-blue);
  --pp-cat-7: var(--pp-orchid);

  /* Soft mark tints — 12% washes for chart fills, banners, mood pulse */
  --pp-coral-soft:  #fde1da;
  --pp-orange-soft: #fdeccb;
  --pp-yellow-soft: #fdf3c9;
  --pp-green-soft:  #dcf0de;
  --pp-teal-soft:   #d3f1ec;
  --pp-blue-soft:   #dce9f8;
  --pp-orchid-soft: #ece0ef;

  /* Muted mark tier — washed-out but still on-hue. Second-tier categorical
     series (use after --pp-cat-1…7 are spent), lower-emphasis surfaces &
     supporting data. Lighter and less saturated than the vivid mark, but far
     more colour than the pale -soft fills. */
  --pp-coral-muted:  #f4a291;
  --pp-orange-muted: #f8cb8a;
  --pp-yellow-muted: #f6de84;
  --pp-green-muted:  #86c98d;
  --pp-teal-muted:   #7fd3ca;
  --pp-blue-muted:   #9abde8;
  --pp-orchid-muted: #cdaad4;

  /* ---------- Status & expressive — aliased onto the mark palette ---------- */
  --pp-success:      var(--pp-green);  /* Green  */
  --pp-warning:      var(--pp-orange); /* Orange */
  --pp-alert:        var(--pp-coral);  /* Coral — alerts / unread badges */
  --pp-alert-strong: var(--pp-orchid); /* Orchid — role tag / strong accent */
  --pp-info:         var(--pp-blue);   /* Blue   */
  --pp-cover:        var(--pp-green);  /* Cover / illustration base */

  /* Soft status tints (mood pulse, banners) */
  --pp-success-soft: var(--pp-green-soft);
  --pp-warning-soft: var(--pp-orange-soft);
  --pp-alert-soft:   var(--pp-coral-soft);
  --pp-info-soft:    var(--pp-blue-soft);

  /* ---------- Semantic aliases (light) ---------- */
  --pp-surface:        var(--pp-card);
  --pp-surface-page:   var(--pp-bg);
  --pp-surface-sunken: var(--pp-line2);
  --pp-surface-brand:  var(--pp-accent-soft);
  --pp-hover-wash:     rgba(15,42,48,.05); /* subtle wash for borderless hover (icon btn, nav) */

  --pp-text:           var(--pp-ink);
  --pp-text-body:      var(--pp-ink2);
  --pp-text-muted:     var(--pp-muted);
  --pp-text-faint:     var(--pp-faint);
  --pp-text-on-accent: #ffffff;

  --pp-border:         var(--pp-line);
  --pp-border-subtle:  var(--pp-line2);
  --pp-border-brand:   #d3efe9;

  --pp-focus:          var(--pp-accent);

  --pp-link:           var(--pp-accent);
  --pp-link-hover:     var(--pp-accent-deep);
}

/* ---------- Dark theme — same roles, remapped ---------- */
[data-theme="dark"] {
  --pp-bg:      #0c2a30;
  --pp-card:    #123a41;
  --pp-ink:     #e9f3f2;
  --pp-ink2:    #bcd3d1;
  --pp-muted:   #8fb0ad;
  --pp-faint:   #6f938f;
  --pp-line:    #1e4952;
  --pp-line2:   #16414a;

  --pp-accent:      #35caba;
  --pp-accent2:     #16b3a4;
  --pp-accent-deep: #2bb3a4;
  --pp-accent-soft: #16414a;
  --pp-accent-tint: #103840;
  --pp-accent-grad: linear-gradient(150deg, #35caba, #16b3a4); /* @kind color */

  --pp-border-brand: #1e5a5f;
  --pp-text-on-accent: #06262b;
  --pp-hover-wash: rgba(255,255,255,.07);
}