/* Design tokens — handoff README § Design tokens. Values are authoritative. */

:root {
  /* Colour */
  --green:            #0E6B44;  /* primary buttons, FAB, active tab, links */
  --green-pressed:    #0A5233;
  --green-dark:       #0A5A38;
  --green-deeper:     #0A4F32;
  --mint:             #00A86B;  /* progress fills, wage segment */
  --mint-tint:        #7FD9B5;  /* mid calendar band R500–R1 000 */
  --mint-pale:        #D9F2E7;  /* pace pill, selected option, night chip */

  --charcoal:         #2F3E46;  /* primary text */
  --charcoal-deep:    #1E2A30;  /* lock screen */
  --slate-700:        #3E4E56;
  --slate-500:        #5A6A70;
  --slate-400:        #6E7E84;
  --slate-mid:        #63757D;

  --bg:               #F7FAF9;  /* app canvas */
  --surface:          #FFFFFF;
  --surface-tint:     #EDF2F1;
  --surface-tint-2:   #F1F6F4;
  --surface-quiet:    #E2EDE8;  /* low calendar band */

  --border:           #D8E0DE;
  --border-strong:    #CDD9D6;
  --border-stronger:  #B3BFBC;

  --warn-bg:          #FFF1EC;
  --warn-border:      #F0CDC3;
  --warn-border-2:    #E4CFC8;

  --alert:            #B0443A;  /* card tips owed, negatives */
  --alert-deep:       #8E362D;

  --bokkie-coat:      #A79484;  /* mascot only */

  /* Type — system stack, no webfont (decisions.md 2026-08-31) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Radii */
  --r-chip:   10px;   /* 9–11 */
  --r-row:    13px;   /* 12–14 */
  --r-card:   16px;
  --r-sheet:  20px;   /* 18–22, top corners only */

  /* Shadow */
  --sh-bubble: 0 1px 3px rgba(26,23,20,.06);
  --sh-callout: 0 6px 20px rgba(26,23,20,.28);
  --sh-cta: 0 6px 20px rgba(14,107,68,.26);

  /* Layout */
  --pad: 20px;
  --touch: 44px;
}

/* Motion — handoff README § Motion */

@keyframes pop  { from { transform: scale(.92); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes rise { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheet { from { transform: translateY(100%) } to { transform: none } }

.anim-pop       { animation: pop .4s ease-out both }
.anim-celebrate { animation: pop .42s cubic-bezier(.2,1.3,.4,1) both }
.anim-rise      { animation: rise .4s ease-out both }
.anim-fade      { animation: fade .18s ease-out both }
.anim-sheet     { animation: sheet .26s cubic-bezier(.22,.9,.3,1) both }

@media (prefers-reduced-motion: reduce) {
  .anim-pop, .anim-celebrate, .anim-rise, .anim-fade, .anim-sheet {
    animation-duration: .01ms; animation-iteration-count: 1;
  }
}