/* ── Mealendar · orange brand theme, loaded after styles.css on every page ──
   Palette taken from the calendar-bowl app icon: sunny orange, cream, leaf green, a little yolk yellow.
   The token names are kept so styles.css needs no changes: the lavender scale (--b*) now holds
   orange, and peach (--peach*) now holds leaf green. */
:root {
  --n0: #FFFFFF; --n50: #FDF8F1; --n100: #F7EEE2; --n200: #EFE3D3; --n300: #E0D0BC; --n400: #B8A794;
  --n500: #857260; --n600: #6B5A4A; --n700: #4E3F33; --n800: #362A21; --n900: #2A1E16; --n950: #1C130D;
  --b50: #FFF4EA; --b100: #FFE6D2; --b200: #FDD0AE; --b300: #FBB27F; --b400: #FA9248; --b500: #F7782C;
  --b600: #B93D0B; --b900: #6B2408; /* b600 on b100 is 4.7:1 for small pill text */
  --peach50: #EDF6E4; --peach500: #5DA03A; --peach900: #2F5A1C;
  --green50: #EDF6E4; --green500: #5DA03A; --green900: #2F5A1C;
  --amber50: #FFF4DC; --amber500: #F5A21B; --amber900: #7A4508;

  --shadow-1: 0 2px 12px rgba(122, 58, 14, 0.07);
  --shadow-2: 0 8px 28px rgba(122, 58, 14, 0.11);
  --shadow-3: 0 20px 56px rgba(122, 58, 14, 0.17);

  --page: #FDF6EB;
  --peach-text: #3E7F2C;
  --cta: #CC4811;      /* white text on it is 4.7:1 */
  --cta-hover: #B83F0D;
}


/* Buttons: orange CTA */
.btn-ink { background: var(--cta); box-shadow: 0 6px 18px rgba(204, 72, 17, 0.28); }
.btn-ink:hover { background: var(--cta-hover); box-shadow: 0 10px 24px rgba(204, 72, 17, 0.34); }
.mini-btn.ink, .seg .on { background: var(--cta); }

/* Nav */
.nav.scrolled { background: rgba(253, 246, 235, 0.85); }
.brand-mark { width: 34px; height: 34px; border-radius: 22.5%; box-shadow: 0 2px 6px rgba(204, 72, 17, 0.25); }

/* Hero */
.blob-b { background: radial-gradient(circle, #FFE9B8, transparent 70%); }
.f3 { background: var(--amber500); }
.phone { box-shadow: 0 40px 80px rgba(122, 58, 14, 0.26), 0 12px 24px rgba(122, 58, 14, 0.12); }
.notif-icon { background: none; }
.notif-icon img { display: block; width: 38px; height: 38px; }
.st-dabao { background: var(--b500); }
.pill-peach { background: var(--b100); color: var(--b600); } /* "Action needed" stays urgent orange, not green */
.bi-2 { background: var(--green500); }
.sp-2 { background: var(--amber500); }

/* Sections */
.scanline { box-shadow: 0 0 14px 4px rgba(247, 120, 44, 0.5); }
.string-shadow { stroke: rgba(194, 65, 12, 0.10); }
.t-events .tile-ico { background: var(--amber50); color: var(--amber900); }

/* Final CTA */
.giant { background: linear-gradient(to bottom, rgba(247, 120, 44, 0.20), rgba(247, 120, 44, 0.04)); -webkit-background-clip: text; background-clip: text; }
.mascot-tile { display: block; width: 180px; height: 180px; border: 0; border-radius: 22.5%; background: none; box-shadow: 0 30px 60px rgba(204, 72, 17, 0.28); }
.footer .brand-mark { width: 30px; height: 30px; }

@media (max-width: 760px) {
  .brand-mark { width: 30px; height: 30px; }
  .mascot-tile { width: 140px; height: 140px; }
}