/* ============================================================
   Peregrine OS — Color Tokens
   The product palette: the Peregrine Health brand greens & coral,
   re-weighted for a warm, soft application surface. Warm cream
   page, white floating cards, green primary, coral for the single
   highest-emphasis action.
   ============================================================ */

:root {
  /* --- Brand-derived core ----------------------------------------- */
  --pos-ink:            #0C3438; /* deepest teal — display headings, dark sidebar */
  --pos-teal:           #235C56; /* headings, callout border, behavioral-health tags */
  --pos-green:          #428E6F; /* PRIMARY interactive: buttons, selected states, focus */
  --pos-green-700:      #2F6E5A; /* hover */
  --pos-green-800:      #2B6450; /* pressed */
  --pos-green-050:      #EAF3EE; /* faint green wash — ghost hover, recommended chips */
  --pos-teal-050:       #E7EEED; /* teal wash — callout fill, info chips */
  --pos-coral:          #DB6A5D; /* ACTION accent: book / confirm / alert — never body text */
  --pos-coral-600:      #CF6258; /* coral hover */
  --pos-coral-text:     #C85A4E; /* coral that meets text contrast (error/alert labels) */
  --pos-coral-050:      #FCEFED; /* coral wash — alert chips */
  --pos-coral-bg:       #FFF5F3; /* alert card fill */
  --pos-coral-border:   #F6DCD7; /* alert card border */

  /* --- Warm neutral surfaces & ink -------------------------------- */
  --pos-page:           #FAF9F6; /* default app page */
  --pos-page-warm:      #ECEAE3; /* warmer canvas (kit / shell background) */
  --pos-card:           #FFFFFF; /* floating card surface */
  --pos-border:         #F2EEE6; /* hairline card border */
  --pos-border-control: #E6E1D6; /* control / input border */
  --pos-border-strong:  #E0DCD2; /* secondary button, divider */
  --pos-divider:        #ECE8DF;

  /* --- Text ramp -------------------------------------------------- */
  --pos-text-strong:    #0C3438; /* display / numbers on light */
  --pos-text:           #1F2E2C; /* default UI text */
  --pos-text-body:      #3A4A47; /* paragraph body */
  --pos-text-muted:     #7C8C89; /* labels, captions */
  --pos-text-faint:     #9AA3A2; /* meta, hints, hex codes */
  --pos-text-disabled:  #A9A89F;
  --pos-text-on-dark:   #F7F6F1; /* reverse text on ink sidebar */
  --pos-text-on-dark-muted: #D6E2DF;

  /* ================================================================
     Semantic aliases — prefer these in components
     ================================================================ */
  --surface-page:       var(--pos-page);
  --surface-card:       var(--pos-card);
  --surface-dark:       var(--pos-ink);
  --surface-wash-green: var(--pos-green-050);
  --surface-wash-teal:  var(--pos-teal-050);
  --surface-wash-coral: var(--pos-coral-050);

  --text-display:       var(--pos-text-strong);
  --text-heading:       var(--pos-teal);
  --text-body:          var(--pos-text-body);
  --text-label:         var(--pos-text-muted);
  --text-muted:         var(--pos-text-faint);

  --border-card:        var(--pos-border);
  --border-input:       var(--pos-border-control);

  --action-primary:       var(--pos-green);
  --action-primary-hover: var(--pos-green-700);
  --action-primary-press: var(--pos-green-800);
  --action-accent:        var(--pos-coral);
  --action-accent-hover:  var(--pos-coral-600);

  --status-success:      var(--pos-green);
  --status-success-fill: var(--pos-green-050);
  --status-info:         var(--pos-teal);
  --status-info-fill:    var(--pos-teal-050);
  --status-alert:        var(--pos-coral-text);
  --status-alert-fill:   var(--pos-coral-050);

  --border-focus:        var(--pos-green);
  --ring-focus:          0 0 0 3px rgba(66, 142, 111, 0.18);
}