/* ============================================================
   COLORS
   The system is four values of ink, five greys of text, one
   rationed yellow, and four desaturated signal colors.
   ============================================================ */
:root {
  /* --- ink surfaces --- */
  --pl-page:            #08090A;  /* page ground. the default background */
  --pl-panel:           #0E0F11;  /* product panels, end-CTA shells, insets */
  --pl-float:           #16181B;  /* the only true float. pair with --pl-shadow */
  --pl-wash:            linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006));
  --pl-wash-flat:       rgba(255,255,255,0.025); /* flat card fill, e.g. testimonials */

  /* --- text ramp --- */
  --pl-text:            #F7F8F8;  /* headlines, answers, anything that matters */
  --pl-text-2:          #8A8F98;  /* body, and every label, caption, kicker and piece of fine print. 6.13:1 */
  --pl-text-3:          #62666D;  /* large quiet figures only, 24px and up. 3.45:1, never a label */
  --pl-text-4:          #494D53;  /* never text: disabled states, rules. 2.34:1 */
  --pl-text-5:          #33363B;  /* never text: decorative rules. 1.64:1 */

  /* --- hairlines. surfaces separate by value, not by heavy borders --- */
  --pl-line-1:          rgba(255,255,255,0.05);  /* rows inside a panel */
  --pl-line-2:          rgba(255,255,255,0.06);  /* section rules, panel edges */
  --pl-line-3:          rgba(255,255,255,0.08);  /* cards that must read as objects */
  --pl-line-4:          rgba(255,255,255,0.12);  /* outline buttons */

  /* --- the accent. one per viewport --- */
  --pl-yellow:          #F3CA07;
  --pl-yellow-line:     rgba(243,202,7,0.35);    /* resting border on yellow-edged things */
  --pl-yellow-hot:      rgba(243,202,7,0.60);    /* hovered border */
  --pl-yellow-wash:     rgba(243,202,7,0.06);    /* the only yellow fill allowed */
  --pl-yellow-glow:     rgba(243,202,7,0.07);    /* radial hero wash, behind content */

  /* --- signals. desaturated on purpose. no pure red --- */
  --pl-strong:          #5FA36B;  /* strong / shipped */
  --pl-average:         #F3CA07;  /* average / in progress */
  --pl-fix-first:       #D98A45;  /* fix first / bottleneck */
  --pl-next:            #62666D;  /* next / not started */

  /* --- light plate. ONLY inside product mocks and print --- */
  --pl-lp-surface:      #FFFFFF;
  --pl-lp-surface-2:    #F6F6F4;
  --pl-lp-text:         #08090A;
  --pl-lp-text-2:       #4A4A4A;
  --pl-lp-text-3:       #6B6B6B;
  --pl-lp-line:         #C9C9C3;

  /* --- semantic aliases --- */
  --pl-bg:              var(--pl-page);
  --pl-surface-card:    var(--pl-wash);
  --pl-text-body:       var(--pl-text-2);
  --pl-text-label:      var(--pl-text-2);
  --pl-border:          var(--pl-line-2);
  --pl-accent:          var(--pl-yellow);

  /* --- actions. white rests, yellow rewards --- */
  --pl-btn-primary-bg:        var(--pl-text);
  --pl-btn-primary-fg:        var(--pl-page);
  --pl-btn-primary-bg-hover:  var(--pl-yellow);
  --pl-btn-secondary-border:       var(--pl-line-4);
  --pl-btn-secondary-border-hover: var(--pl-yellow-hot);

  /* --- focus --- */
  --pl-focus: 0 0 0 2px var(--pl-page), 0 0 0 4px var(--pl-yellow);
}