/* ============================================================
   Waterlily – The Ponds
   Brand tokens. Single source of truth for the app and notices.

   Contrast notes (WCAG AA on white):
     navy   #031927  ~18.4:1  body text, headings, any size
     teal   #387780   ~4.6:1  labels, links, small text — passes AA
     sage   #8fa98a   ~2.3:1  FAILS for text. Structure only:
                              keylines, borders, bar fills, the lotus.
     lilac  #d1ccdc   ~1.4:1  backgrounds and tints only.
   White text is safe on navy and on teal. Never on sage.
   ============================================================ */

:root{
  /* Brand */
  --navy:   #031927;
  --lilac:  #d1ccdc;
  --teal:   #387780;
  --sage:   #8fa98a;

  /* Derived — tints and shades of the four, nothing invented */
  --navy-80:  #263946;
  --navy-60:  #4a5a65;
  --teal-dark:#2c5f66;
  --teal-tint:#eaf1f2;
  --sage-tint:#eef2ed;
  --lilac-tint:#f4f2f7;
  --paper:  #ffffff;
  --shell:  #fafafc;   /* app background */
  --rule:   #dfe1e6;

  /* Status. Alerts sit deliberately outside the brand palette so an
     overdue account cannot be mistaken for ordinary chrome. */
  --overdue: #9e4b36;
  --overdue-tint: #fbf0ed;
  --success: #3d7a55;
  --warn:    #8a6d1f;

  /* Type */
  --font-display: "Poppins","Century Gothic","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:    "Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --font-num:     "Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;

  /* Spacing / shape */
  --r-sm: 2px;
  --r-md: 4px;
  --shadow: 0 1px 2px rgba(3,25,39,.06), 0 4px 12px rgba(3,25,39,.05);
}

/* ---- App shell primitives ---- */
body.app{ background:var(--shell); color:var(--navy); font-family:var(--font-body); margin:0; }

.topbar{ background:var(--navy); color:#fff; padding:12px 20px; display:flex;
         align-items:center; gap:14px; border-bottom:3px solid var(--sage); }
.topbar .mark{ height:28px; }
.topbar .scheme{ font-family:var(--font-display); font-weight:700; letter-spacing:.04em; }

.label{ font-size:11px; letter-spacing:.13em; text-transform:uppercase;
        color:var(--teal); font-weight:600; }

.card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md);
       padding:18px; box-shadow:var(--shadow); }

.btn{ font:inherit; font-weight:600; padding:9px 16px; border-radius:var(--r-md);
      border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); }
.btn-secondary{ background:var(--paper); color:var(--teal); border-color:var(--teal); }
.btn-danger{ background:var(--overdue); color:#fff; }
.btn:focus-visible{ outline:3px solid var(--sage); outline-offset:2px; }

/* Arrears ageing buckets — colour carries meaning, but never alone.
   Every badge also states its bucket in words. */
.badge{ display:inline-block; font-size:11px; font-weight:700; padding:3px 8px;
        border-radius:10px; letter-spacing:.03em; }
.badge-current{ background:var(--sage-tint); color:#2f5c3f; }
.badge-30{  background:var(--lilac-tint); color:var(--navy-80); }
.badge-60{  background:#fdf4e3; color:var(--warn); }
.badge-90{  background:var(--overdue-tint); color:var(--overdue); }

table.data{ width:100%; border-collapse:collapse; background:var(--paper); }
table.data th{ background:var(--navy); color:#fff; font-size:11px; letter-spacing:.09em;
               text-transform:uppercase; padding:10px; text-align:left; }
table.data td{ padding:10px; border-bottom:1px solid var(--rule); }
table.data tbody tr:nth-child(even){ background:var(--lilac-tint); }
.num{ font-variant-numeric:tabular-nums; text-align:right; }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }