/* ============================================================================
   MOWDEW — Design tokens & base styles
   "Every visit, on the record."

   A sister brand to Fairtabs: keeps the warm, playful, numbers-forward bones
   (Plus Jakarta / Inter / JetBrains Mono, tabular money, soft ink-tinted
   shadows, vertical-bar status tags, wallet-rail monogram chips) but wears
   its own joyful, fresh-leaf-green identity.

   Two-sided product: a paid PROVIDER side (the gardener / pool pro) and a free
   HOMEOWNER side, in one design language.

   Import into any artifact:  <link rel="stylesheet" href="mowdew.css">
   Fonts load from Google Fonts.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ---- Brand · Leaf green (primary) ----------------------------------- */
  --green-50:  #E9F8EE;
  --green-100: #CBEED7;
  --green-200: #9FE0B5;
  --green-300: #62CC86;
  --green-500: #21A84F;   /* THE brand green — mascot, accents, active, large display */
  --green-600: #1C9447;   /* hover on bright surfaces */
  --green-700: #15803C;   /* PRIMARY BUTTON fill + green text on white (AA, white label 5.0:1) */
  --green-800: #0F5E2C;   /* pressed / deep */

  /* ---- Accent · Sky blue (location / verified / info / secondary) ----- */
  --blue-50:   #E7F5FE;
  --blue-100:  #C6E8FC;
  --blue-300:  #8FD2F6;
  --blue-500:  #46B6F0;   /* the bright sky accent — fills, maps, location */
  --blue-700:  #1379B5;   /* blue text on white (AA) */

  /* ---- Accent · Sunny yellow (highlight / cadence / rating / mascot water) */
  --yellow-50:  #FFF6DD;
  --yellow-100: #FFEBB0;
  --yellow-500: #FFCB3D;  /* always paired with ink text */
  --yellow-700: #9A6B00;  /* yellow-toned text on pale (AA) */

  /* ---- Vertical · Aqua (POOL) — co-equal to leaf green (GARDEN) -------
     Garden services read green; pool services read aqua. Sky-blue (above)
     stays cross-cutting for location / verified / live across both. */
  --aqua-50:   #E2F8FA;
  --aqua-100:  #BDEEF2;
  --aqua-200:  #8CE0E8;
  --aqua-300:  #54CED9;
  --aqua-500:  #12BCC9;   /* THE pool aqua — Dewy mascot, pool accents, water */
  --aqua-600:  #0FA4B0;   /* hover on bright surfaces */
  --aqua-700:  #0A767F;   /* aqua text / fill on white (AA 4.6:1) */
  --aqua-800:  #075A61;   /* pressed / deep */

  /* ---- Chemistry — pH & reading semantics (homeowner pool view) ------
     pH scale runs acidic(coral) -> ideal(green) -> basic(violet). */
  --ph-low:    #F2683C;   /* acidic / out-of-range low */
  --ph-ideal:  #21A84F;   /* in the happy band */
  --ph-high:   #7C6FF0;   /* basic / out-of-range high */
  --chem-50:   #F2F1FE;
  --chem-violet: #7C6FF0;

  /* ---- Status semantics ------------------------------------------------ */
  --paid-500:    #21A84F;   /* paid / done / verified  -> green */
  --pending-500: #FFCB3D;   /* upcoming / due          -> yellow */
  --live-500:    #46B6F0;   /* on-site / checked-in     -> blue */
  --alert-500:   #F2683C;   /* overdue / unpaid / stop  -> warm coral */
  --alert-700:   #C24420;   /* alert text on white (AA) */
  --alert-50:    #FDEDE6;
  --due-text:    #D6432A;   /* money-owed AMOUNT text — stays red even under the restraint palette */

  /* ---- Ink · warm near-black neutrals ---------------------------------- */
  --ink-900: #1B1A17;   /* primary text, dark cards */
  --ink-700: #45433B;   /* body text */
  --ink-500: #6E6B60;   /* muted / captions (AA 4.9:1) */
  --ink-300: #A8A498;   /* disabled / placeholder */
  --ink-200: #DAD6CB;   /* strong borders */
  --ink-100: #ECE9E1;   /* hairlines, card borders */
  --ink-50:  #F6F4EE;   /* subtle fills */

  /* ---- Surfaces -------------------------------------------------------- */
  --paper:   #FBFAF6;   /* warm off-white app background */
  --surface: #FFFFFF;   /* cards */

  /* ---- Wallet rail brand colors (monogram chips) ---------------------- */
  --rail-venmo:  #008CFF;
  --rail-paypal: #003087;
  --rail-zelle:  #6D1ED4;
  --rail-cash:   #15803C;

  /* ---- Elevation · soft, warm-ink-tinted shadows ---------------------- */
  --shadow-sm: 0 1px 2px rgba(27,26,23,.06);
  --shadow-md: 0 6px 18px rgba(27,26,23,.08);
  --shadow-lg: 0 16px 40px rgba(27,26,23,.10);
  --shadow-xl: 0 30px 64px rgba(27,26,23,.14);
  --shadow-green: 0 8px 22px rgba(33,168,79,.30);   /* CTA glow */
  --shadow-aqua:  0 8px 22px rgba(18,188,201,.30);

  /* ---- Radii · friendly & rounded ------------------------------------- */
  --radius-sm:  10px;   /* mono badges, small chips */
  --radius-md:  14px;   /* buttons, inputs */
  --radius-lg:  18px;   /* nested tiles */
  --radius-xl:  22px;   /* list cards */
  --radius-2xl: 26px;   /* hero / feature cards */
  --radius-3xl: 32px;   /* CTA bands, sheets */
  --radius-pill: 999px;

  /* ---- Type families -------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;  /* headings, amounts */
  --font-body:    'Inter', system-ui, sans-serif;              /* body, UI */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;   /* metadata, chips */

  /* ---- Type scale (mobile-first) -------------------------------------- */
  --text-display: 40px;  /* big balance / hero number */
  --text-h1: 28px;       /* screen title */
  --text-h2: 22px;       /* section heading */
  --text-h3: 17px;       /* card title */
  --text-body: 16px;
  --text-sm: 14px;
  --text-xs: 13px;
  --text-caption: 11px;  /* tag / mono caption */

  --tracking-display: -0.03em;
  --tracking-h1: -0.025em;
  --tracking-h2: -0.02em;
  --tracking-tag: 0.14em;
}

/* ============================================================================
   BASE — scoped to .tn so import is safe
   ========================================================================= */
.tn, body.tn {
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tn h1, .tn h2, .tn h3, .tn h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0;
  color: var(--ink-900);
}
.tn h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: var(--tracking-h1); }
.tn h2 { font-size: var(--text-h2); font-weight: 800; letter-spacing: var(--tracking-h2); }
.tn h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.015em; }
.tn h4 { font-size: var(--text-sm); font-weight: 700; letter-spacing: -0.01em; }
.tn p  { margin: 0; color: var(--ink-700); }

/* ---- Numerics — tabular, signed, color-coded ------------------------- */
.tn .amount {
  font-family: var(--font-display); font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.025em; white-space: nowrap;
}
.tn .amount--paid   { color: var(--green-700); }
.tn .amount--due    { color: var(--alert-700); }
.tn .amount--muted  { color: var(--ink-500); }

/* ---- Eyebrow / section tag — Mowdew "record mark" --------------------
   No pill. A small leaf-diamond accent + sentence-case label with a hand-
   drawn marker underline (border-bottom fallback). Set tone via class. */
.tn .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-900);
  white-space: nowrap;
}
.tn .tag::before {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-radius: 2px 3px 2px 3px;
  background: var(--green-500); transform: rotate(45deg);
}
.tn .tag > span, .tn .tag .tag-lab {
  border-bottom: 2px solid var(--green-300); padding-bottom: 2px;
}
.tn .tag.blue::before   { background: var(--blue-500); }
.tn .tag.blue > span    { border-color: var(--blue-300); }
.tn .tag.aqua::before   { background: var(--aqua-500); }
.tn .tag.aqua > span    { border-color: var(--aqua-300); }
.tn .tag.yellow::before { background: var(--yellow-500); }
.tn .tag.yellow > span  { border-color: var(--yellow-500); }
.tn .tag.violet::before { background: var(--chem-violet); }
.tn .tag.alert::before  { background: var(--alert-500); }
.tn .tag.alert > span   { border-color: #F8D3C5; }
.tn .tag.white          { color: #fff; }
.tn .tag.white::before  { background: #fff; }
.tn .tag.white > span   { border-color: rgba(255,255,255,.5); }

/* ---- Status chip — pill, soft tint, used for visit/invoice states ---- */
.tn .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: -0.005em; padding: 5px 11px 5px 9px;
  border-radius: var(--radius-pill); white-space: nowrap;
  border: 1px solid transparent;
}
.tn .chip .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tn .chip--done    { background: var(--green-50);  color: var(--green-700);  border-color: var(--green-100); }
.tn .chip--done .dot    { background: var(--green-500); }
.tn .chip--live    { background: var(--blue-50);   color: var(--blue-700);   border-color: var(--blue-100); }
.tn .chip--live .dot    { background: var(--blue-500); }
.tn .chip--pool    { background: var(--aqua-50);   color: var(--aqua-700);   border-color: var(--aqua-100); }
.tn .chip--pool .dot    { background: var(--aqua-500); }
.tn .chip--soon    { background: var(--yellow-50); color: var(--yellow-700); border-color: var(--yellow-100); }
.tn .chip--soon .dot    { background: var(--yellow-500); }
.tn .chip--alert   { background: var(--alert-50);  color: var(--alert-700);  border-color: #F8D3C5; }
.tn .chip--alert .dot   { background: var(--alert-500); }
.tn .chip--neutral { background: var(--ink-50);    color: var(--ink-700);    border-color: var(--ink-100); }
.tn .chip--neutral .dot { background: var(--ink-300); }

/* ---- Mono badge — JetBrains, system metadata ------------------------- */
.tn .mono {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-800); background: var(--green-50);
  border: 1px solid var(--green-100); border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.tn .mono.blue  { color: var(--blue-700);  background: var(--blue-50);   border-color: var(--blue-100); }
.tn .mono.aqua  { color: var(--aqua-700);  background: var(--aqua-50);   border-color: var(--aqua-100); }
.tn .mono.ink   { color: var(--ink-700);   background: var(--ink-50);    border-color: var(--ink-100); }

/* ---- Buttons — big, friendly, tappable (min 48px) -------------------- */
.tn .btn {
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; min-height: 50px; border-radius: var(--radius-md);
  border: none; cursor: pointer; white-space: nowrap; letter-spacing: -0.01em;
  transition: background .16s ease, transform .12s ease, box-shadow .2s ease;
}
.tn .btn-lg { font-size: 17px; padding: 17px 26px; min-height: 58px; border-radius: var(--radius-lg); }
.tn .btn-block { width: 100%; }
.tn .btn-primary { background: var(--green-700); color: #fff; box-shadow: var(--shadow-green); }
.tn .btn-primary:hover { background: var(--green-800); transform: translateY(-1px); }
.tn .btn-blue { background: var(--blue-500); color: var(--ink-900); box-shadow: var(--shadow-md); }
.tn .btn-blue:hover { background: var(--blue-300); transform: translateY(-1px); }
.tn .btn-aqua { background: var(--aqua-700); color: #fff; box-shadow: 0 8px 22px rgba(18,188,201,.30); }
.tn .btn-aqua:hover { background: var(--aqua-800); transform: translateY(-1px); }
.tn .btn-yellow { background: var(--yellow-500); color: var(--ink-900); box-shadow: var(--shadow-md); }
.tn .btn-yellow:hover { filter: brightness(.97); transform: translateY(-1px); }
.tn .btn-dark { background: var(--ink-900); color: #fff; }
.tn .btn-dark:hover { background: #322f29; transform: translateY(-1px); }
.tn .btn-secondary { background: var(--ink-50); color: var(--ink-900); border: 1px solid var(--ink-100); }
.tn .btn-secondary:hover { background: var(--ink-100); }
.tn .btn-ghost { background: transparent; color: var(--green-700); }
.tn .btn-ghost:hover { background: var(--green-50); }
.tn .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.tn .tn-tile { transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.tn .tn-tile:hover { background: var(--paper); border-color: var(--ink-200); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.tn .tn-tile:active { transform: translateY(0); }

/* ---- Cards ----------------------------------------------------------- */
.tn .card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.tn .card-feature { border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); }

/* ---- Inputs ---------------------------------------------------------- */
.tn .input {
  width: 100%; box-sizing: border-box; padding: 14px 15px;
  font-family: var(--font-body); font-size: 16px; color: var(--ink-900);
  background: var(--surface); border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-md);
}
.tn .input::placeholder { color: var(--ink-300); }
.tn .input:focus {
  outline: none; border-color: var(--green-500);
  box-shadow: 0 0 0 4px var(--green-100);
}

/* ---- Misc ------------------------------------------------------------ */
.tn ::selection { background: var(--green-100); }

/* ---- On-site hero living texture (water / grass) --------------------- */
.onsite-glow { position: absolute; inset: 0; animation: onsiteGlow 6s ease-in-out infinite; }
.onsite-wave { position: absolute; left: 0; bottom: -2px; width: 200%; height: 60px; will-change: transform; }
.onsite-wave.w1 { animation: onsiteWaveA 7s linear infinite; }
.onsite-wave.w2 { height: 48px; animation: onsiteWaveB 11s linear infinite; }
.onsite-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; }
.onsite-blade { position: absolute; bottom: 0; width: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, rgba(33,168,79,0), rgba(98,204,134,.55));
  transform-origin: bottom center; animation-name: onsiteSway; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
@keyframes onsiteWaveA { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes onsiteWaveB { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes onsiteSway { 0%, 100% { transform: skewX(-7deg); } 50% { transform: skewX(7deg); } }
@keyframes onsiteGlow { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .onsite-wave, .onsite-blade, .onsite-glow { animation: none !important; }
}