/* SplitTrip: Split Trip Expenses — app-matched theme.
   The app's own UI is light: soft neutral background, white cards, black pills,
   green "money" accents; the icon is a white receipt + lime card on near-black.
   This theme translates the site's dark "lit tray" pattern onto a light,
   paper-like surface with a deep green accent and a lime lens garnish.
   Link AFTER site.css on every SplitTrip page (landing + guides). */

:root {
  /* Surfaces — paper instead of basalt */
  --bg:        #f5f6f2;   /* soft neutral, like the app's background */
  --bg-2:      #edefe8;   /* deeper pockets */
  --surface:   #eceee7;   /* section-alt */
  --surface-2: #ffffff;   /* cards, like the app's white cards */
  --border:    rgba(23, 25, 20, 0.1);
  --border-2:  rgba(23, 25, 20, 0.18);

  /* Ink */
  --text:      #17191a;   /* near-black, like the icon plate */
  --text-dim:  #3f463f;
  --muted:     #68706a;

  /* The app's hue */
  --app:       #147a43;   /* deep green — the app's "you are owed" money color */
  --app-ink:   #ffffff;

  /* Light on paper instead of light on a tray */
  --page-light: #ffffff;
  --grain: 0.028;

  /* Soft daylight shadows */
  --shadow-icon: 0 8px 26px rgba(23, 25, 20, 0.22);
  --shadow-card: 0 1px 2px rgba(23, 25, 20, 0.04), 0 12px 30px rgba(23, 25, 20, 0.07);
  --shadow-shot: 0 16px 44px rgba(23, 25, 20, 0.16);
}

/* The lens keeps the icon's lime garnish */
.brand-dot {
  background:
    radial-gradient(circle at 32% 30%, #fff 0%, #b5e01e 34%, #2a3311 78%, #101408 100%);
  box-shadow: 0 0 12px rgba(181, 224, 30, 0.6);
}

/* Dark-tray values in site.css that variables don't cover */
.appstore-badge { border-color: #16181a; }
.appstore-badge:hover { border-color: #4a4d48; }