/* ============================================================
   RAINBACK — WARM LIQUID GLASS (shared design system)
   Performance-light: one cheap blur tier, warm translucent
   surfaces, graceful fallback where backdrop-filter is absent.
   Loaded by member-app, owner-dashboard, and admin so all
   three share one look. Override-friendly: tweak a token here,
   it changes everywhere.
   ============================================================ */

/* Official logo typeface — Boston Angel. Use ONLY for the "RainBack"
   wordmark, never for body text or UI. */
@font-face {
  font-family: 'Boston Angel';
  src: url('/fonts/BostonAngel-Regular.woff2') format('woff2'),
       url('/fonts/BostonAngel-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* Lock scale like a native app — disables double-tap zoom (pinch handled in no-zoom.js). */
html, body { touch-action: pan-x pan-y; }

/* Handwritten accent — Caveat. Used sparingly for personal, note-like touches
   (e.g. the nutrition "what did you eat?" caption). Bundled locally so it works
   offline in the installed PWA. */
@font-face {
  font-family: 'Caveat';
  src: url('/fonts/Caveat-SemiBold.woff2') format('woff2'),
       url('/fonts/Caveat-SemiBold.ttf') format('truetype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

/* The logo wordmark. Apply to an element containing "Rain" + a .rb-back span
   with "Back". Boston Angel's discretionary ligatures render the decorative
   "ck", so we enable them explicitly. */
.rb-logo {
  font-family: 'Boston Angel', 'Fraunces', serif;
  letter-spacing: .01em;
  font-feature-settings: "dlig" 1, "liga" 1, "clig" 1;
  -webkit-font-feature-settings: "dlig" 1, "liga" 1, "clig" 1;
}
/* "Back" — the terracotta half of the wordmark. */
.rb-logo .rb-back { color: var(--tc, #B5482A); }

:root {
  /* ---- Brand palette (from the approved Direction A spec) ---- */
  --tc:        #B5482A;   /* terracotta — primary accent */
  --tc-d:      #8E3620;   /* pressed */
  --tc-s:      #DDB6A4;   /* light terracotta (on dark) */
  --tc-glow:   #C7906A;   /* card inner glow / "back" wordmark */
  --olive:     #B5482A;   /* backward-compat alias (positive / availability) */
  --olive-s:   #DDB6A4;   /* backward-compat alias */
  --ochre:     #C89B4F;   /* member gold */
  --ochre-s:   #E9CBA1;   /* gold light (name/serial on card) */
  --ochre-t:   rgba(200,155,79,.1);
  --sand:      #F4F1EA;
  --sand-w:    #E6DFD1;
  --sand-d:    #D8CFC0;
  --ink:       #241F19;   /* primary text / dark card */
  --ink-s:     #5A4E42;   /* secondary text */
  --smoke:     #8A8272;   /* muted labels */
  --line:      rgba(36,31,25,.12);
  --line-s:    rgba(36,31,25,.20);
  --aug:       #4A2C3A;
  --aug-s:     #7A4A6A;
  --aug-t:     rgba(74,44,58,.08);

  /* ---- Semantic chrome tokens ---- */
  --danger:           #C0392B;
  --danger-border:    #E0B4B0;
  --danger-bg:        #FEF3F2;
  --danger-bg-border: #FDA29B;
  --success:          #7a9a4a;
  --nutri-protein:    #7A9BB5;
  --nutri-fat:        #E07070;
  /* --nutri-carbs: use var(--ochre) directly */

  /* ---- Warm frosted background wash ---- */
  --bg-wash: linear-gradient(178deg,#FAF7F0 0%,#F4F1EA 42%,#E6DFD1 76%,#D8CFC0 100%);

  /* ---- Flat semi-opaque surfaces (no glass blur) ---- */
  --section-bg:       rgba(244,241,234,.85);
  --panel-bg:         rgba(253,251,247,.92);
  --panel-bg-nested:  rgba(230,223,209,.7);

  /* ---- Warm pastel glass surface tokens — flat-leaning, hairline border, soft shadow ---- */
  --glass-bg:        rgba(250,246,237,.68);
  --glass-bg-solid:  rgba(250,246,237,.96);
  --glass-border:    1px solid rgba(120,85,45,.09);
  --glass-shadow:    0 4px 14px -10px rgba(80,50,25,.14);
  --glass-hi:        inset 0 1px 0 rgba(255,255,255,.5);
  --glass-blur:      none;

  /* brighter glass for floating elements (tab bar, tip card, header buttons) */
  --glass-bright-bg:        rgba(255,253,248,.75);
  --glass-bright-bg-solid:  rgba(255,253,248,.98);
  --glass-bright-shadow:    0 4px 12px -8px rgba(80,50,25,.16);
  --glass-feed-shadow:      0 6px 16px -10px rgba(80,50,25,.18);

  /* ---- Unified panel / card surface tokens (single source of truth) ---- */
  --panel-blur:       blur(18px);
  --panel-border:     1px solid rgba(120,85,45,.10);
  --panel-shadow:     0 8px 22px -10px rgba(60,42,22,.14), 0 2px 6px rgba(60,42,22,.06);
  --section-shadow:   0 10px 28px -14px rgba(60,42,22,.16), 0 2px 6px rgba(60,42,22,.05);
  --panel-radius:     20px;
  --panel-radius-sm:  14px;
  --tile-gray:        #F4F1EC;
  --tile-gray-2:      #EFEBE3;

  /* ---- Radii — larger, softer iOS feel ---- */
  --r-card: 24px; --r-tile: 20px; --r-feed: 24px; --r-btn: 14px;
  --r-chip: 100px; --r-tag: 6px;

  /* ---- Type ---- */
  --f-serif: 'Fraunces', Georgia, serif;
  --f-mono:  'JetBrains Mono', ui-monospace, monospace;
  --f-sans:  'Public Sans', 'Inter Tight', system-ui, sans-serif;
}

/* ---- Warm glass surface helper class ---- */
.glass {
  background: var(--glass-bg-solid);            /* fallback first */
  border: var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  border-radius: var(--r-tile);
}
.glass-bright {
  background: var(--glass-bright-bg-solid);
  border: var(--glass-border);
  box-shadow: var(--glass-bright-shadow), var(--glass-hi);
}

/* Only apply the real blur + translucency where the browser supports it.
   This keeps old/Android/Firefox fast and correct. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass {
    background: var(--glass-bg-solid);
  }
  .glass-bright {
    background: var(--glass-bright-bg-solid);
  }
}

/* ---- Mono labels / eyebrows ---- */
.eyebrow, .section-lbl {
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: .20em; color: var(--smoke);
}

/* ---- Tags ---- */
.tag-event { font-family: var(--f-mono); font-size:10px; letter-spacing:.14em;
  color:#6f6253; background:rgba(42,31,23,.07); padding:5px 9px; border-radius:var(--r-tag); }
.tag-vote  { font-family: var(--f-mono); font-size:10px; letter-spacing:.14em;
  color:var(--tc); background:rgba(181,72,42,.12); padding:5px 9px; border-radius:var(--r-tag); }