/* ============================================================
   H&P DASHBOARD — DESIGN TOKENS
   Source: HP_DASHBOARD_HANDOFF_V2.md + Figma file 1K3MyMEvDDw6ingNcN3mC0
   ============================================================ */

:root {

  /* ---- Backgrounds ---- */
  --bg:           #2b2b2b;   /* page background — full window width */
  --bg2:          #3b3b3b;   /* cards, rows, panels */

  /* ---- Primary accent (peach) ---- */
  --peach:        #ffbe9f;
  --peach-25:     rgba(255,190,159,0.25);
  --peach-20:     rgba(255,190,159,0.20);
  --peach-10:     rgba(255,190,159,0.10);

  /* ---- Status: urgent ---- */
  --red:          #e87575;
  --red-25:       rgba(232,117,117,0.25);
  --red-50:       rgba(232,117,117,0.50);
  --red-20:       rgba(232,117,117,0.20);

  /* ---- Status: confirmed / good ---- */
  --green:        #416c52;
  --green-50:     rgba(65,108,82,0.50);
  --green-20:     rgba(65,108,82,0.20);

  /* ---- Dim / dormant ---- */
  --dim-text:     rgba(255,190,159,0.30);
  --dim-border:   rgba(126,121,121,0.40);

  /* ---- Structural ---- */
  --border:       rgba(126,121,121,1);    /* #7e7979 */
  --outline-box:  rgba(157,152,152,1);    /* #9d9898 */
  --white-body:   #dbdbdb;                /* email body / draft text */
  --on-peach:     #3b3b3b;                /* dark text on peach bg */
  --on-peach-dim: rgba(59,59,59,0.10);    /* very faint label on peach */

  /* ---- Layout ---- */
  --content-max:  800px;
  --section-col:  600px;      /* max terminal/viewport width */
  --card-width:   424px;
  --left-col:     122px;      /* left zone within card (date/icons) */
  --border-w:     0.5px;
  --radius-card:  2px;
  --radius-pill:  10px;
  --radius-save:  20px;

  /* ---- Spacing ---- */
  --gap-section:  40px;       /* section to section */
  --gap-sub:      20px;       /* sub-section gap */
  --card-pad-l:   11px;
  --card-pad-r:   10px;
  --card-pad-t:   10px;

}