/* ─── HUM DESIGN TOKENS ─────────────────────────────────────────────────────
   Evolution of Sprout — softer, more intimate, hummingbird/lullaby feel.
   "Hum" = the quiet sound of growth, the song of feeding, the comfort of being held.
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── Hum neutrals — slightly cooler, more paper-like ── */
  --milk:        #FAF6EF;   /* app bg, slightly cooler than Sprout cream */
  --paper:       #FFFDF8;   /* card fills */
  --linen:       #EFE8DA;   /* dividers */
  --linen-mid:   #DFD3BD;   /* borders */
  --linen-dark:  #B8A48A;   /* low emphasis */

  /* ── Hum primary — Moss (deeper, more grounded than Sage) ── */
  --moss:        #6B8E72;
  --moss-dark:   #4A6651;
  --moss-pale:   #E8EFE5;
  --moss-tint:   #F2F6EE;

  /* ── Hum accent — Honey (warmer, sweeter than Amber) ── */
  --honey:       #D4A55A;
  --honey-dark:  #B8862F;
  --honey-pale:  #FAEFD8;

  /* ── Caution — Clay (kept close to Terracotta but slightly redder) ── */
  --clay:        #BD6B4F;
  --clay-pale:   #F5E1D8;

  /* ── Soft cool accent — Sky (replaces Venice) ── */
  --sky:         #7B95B8;
  --sky-pale:    #E5ECF4;

  /* ── Text ── */
  --ink:         #2A2622;
  --ink-2:       #5C5043;
  --ink-3:       #B8A48A;

  /* ── Type stacks ── */
  --font-serif:  'Fraunces', Georgia, serif;     /* warmer, more contemporary than Cormorant */
  --font-sans:   'Inter', -apple-system, sans-serif;

  /* ── Radii ── */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ── Spacing ── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(42,38,34,0.04), 0 1px 3px rgba(42,38,34,0.05);
  --shadow-md: 0 2px 6px rgba(42,38,34,0.06), 0 8px 24px rgba(42,38,34,0.06);
  --shadow-lg: 0 4px 12px rgba(42,38,34,0.08), 0 16px 40px rgba(42,38,34,0.10);

  /* ── Hum gradients (calmer, less saturated than Sprout) ── */
  --grad-moss:   linear-gradient(155deg, #7BA083 0%, #5A7A61 100%);
  --grad-honey:  linear-gradient(155deg, #E2B97A 0%, #C18F3E 100%);
  --grad-clay:   linear-gradient(155deg, #D08266 0%, #A95940 100%);
  --grad-sky:    linear-gradient(155deg, #93AACB 0%, #6F88AE 100%);
  --grad-dawn:   linear-gradient(170deg, #FAF6EF 0%, #F2EDE2 60%, #E8EFE5 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  font-family: var(--font-sans);
  background: #1a1714;
  color: var(--ink);
  height: 100%;
  font-feature-settings: "ss01", "cv11";
}

/* Type scale */
.serif { font-family: var(--font-serif); font-feature-settings: "ss01"; }
.h-display { font-family: var(--font-serif); font-weight: 500; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.h1 { font-family: var(--font-serif); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); }
.h2 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.h3 { font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--ink); }
.h4 { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink); letter-spacing: -0.005em; }
.body-lg { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--ink-2); }
.body { font-size: 14px; line-height: 1.5; color: var(--ink); }
.body-sm { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.caption { font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }

/* Animations */
@keyframes fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn { from { opacity:0; transform: scale(0.96); } to { opacity:1; transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hum-pulse { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
.fu { animation: fadeUp 0.4s ease both; }
.fi { animation: fadeIn 0.3s ease both; }

/* Components */
.card { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--linen); }
.btn { font-family: var(--font-sans); font-weight: 500; cursor: pointer; border: none; transition: all .18s; border-radius: var(--r-pill); font-size: 14px; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: var(--paper); padding: 14px 24px; }
.btn-moss { background: var(--moss); color: white; padding: 14px 24px; }
.btn-ghost { background: transparent; color: var(--ink-2); border: 1.5px solid var(--linen-mid); padding: 12px 22px; }

.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { display: none; }
.scroll { scrollbar-width: none; }
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }

/* Hum logo wordmark using the fraunces serif */
.hum-wordmark { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.04em; }