/* =====================================================================
   GROW TOGETHER — COLORS & TYPE
   A warm, painterly, storybook nature palette.
   The mood: an early-morning meadow, sun coming through trees,
   a hand-illustrated children's book about a couple building a home.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Nunito:wght@400;500;600;700;800;900&family=Caveat:wght@400;500;600;700&display=swap");

:root {
  /* ---------- BASE NEUTRALS — paper & ink ---------- */
  --paper:        #faf3e3;   /* base background, like aged sketch paper */
  --paper-warm:   #f4ead0;   /* slightly more saturated cream */
  --paper-deep:   #e9dcb6;   /* card edges, recessed surfaces */
  --ink:          #2b2118;   /* primary text, like a soft brown ink */
  --ink-soft:     #4a3a2c;   /* secondary text */
  --ink-mute:     #8a7a66;   /* tertiary, captions, meta */
  --ink-faint:    #b9ac95;   /* placeholders, dividers */

  /* ---------- BRAND CORE — moss, sun, terracotta ---------- */
  --moss:         #4f7a3a;   /* primary brand — fern green */
  --moss-deep:    #355524;   /* hover/press, leaf shadows */
  --moss-soft:    #8fb072;   /* light fills, growth tints */
  --moss-pale:    #d6e3c1;   /* surface tints, highlights */

  --sun:          #e9a23b;   /* warm gold, sunlight, primary accent */
  --sun-deep:     #c47e1d;   /* pressed gold */
  --sun-pale:     #f5d894;   /* gold tints, warmth */

  --terracotta:   #c8552c;   /* roof clay, autumn accents */
  --terracotta-deep: #9a3d1c;
  --terracotta-pale: #f0b89c;

  --sky:          #7fb0c9;   /* dawn sky, water, calm */
  --sky-deep:     #4f88a7;
  --sky-pale:     #cfe2ec;

  --bloom:        #d36a8c;   /* flowers, special celebration */
  --bloom-deep:   #a84569;
  --bloom-pale:   #f3c8d4;

  --mushroom:     #b94a3c;   /* mushroom red, easter-egg accent */
  --mushroom-spot:#f9efd4;   /* mushroom dots, cream */

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--paper);
  --bg-soft:      var(--paper-warm);
  --bg-deep:      var(--paper-deep);
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-soft);
  --fg-3:         var(--ink-mute);
  --fg-4:         var(--ink-faint);

  --primary:      var(--moss);
  --primary-deep: var(--moss-deep);
  --primary-soft: var(--moss-soft);
  --primary-pale: var(--moss-pale);

  --accent:       var(--sun);
  --accent-deep: var(--sun-deep);
  --accent-pale:  var(--sun-pale);

  --success:      var(--moss);
  --celebrate:    var(--bloom);
  --warning:      var(--terracotta);

  --line:         #d8c9a8;   /* hand-drawn line color, slightly darker than paper */
  --line-soft:    #e6d8b8;
  --line-strong:  #6b5337;   /* strong outline on illustrations */

  /* ---------- ELEVATION & SHAPE ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* hand-drawn-ish "wonky" radii — never perfectly even */
  --radius-organic-sm: 12px 16px 14px 18px;
  --radius-organic-md: 22px 28px 24px 30px;
  --radius-organic-lg: 36px 42px 38px 44px;

  /* shadows are warm and soft like sunlight on paper, never gray-blue */
  --shadow-xs: 0 1px 0 rgba(107, 83, 55, 0.10);
  --shadow-sm: 0 2px 0 rgba(107, 83, 55, 0.12), 0 4px 10px rgba(107, 83, 55, 0.06);
  --shadow-md: 0 3px 0 rgba(107, 83, 55, 0.14), 0 10px 24px rgba(107, 83, 55, 0.10);
  --shadow-lg: 0 5px 0 rgba(107, 83, 55, 0.16), 0 18px 40px rgba(107, 83, 55, 0.14);
  --shadow-press: 0 1px 0 rgba(107, 83, 55, 0.14), inset 0 2px 4px rgba(107, 83, 55, 0.10);

  /* inner glow / highlight on cards — like sun catching the top edge */
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- SPACING ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Fraunces", "Hoefler Text", Georgia, serif;       /* serif w/ optical sizing — warm + literary */
  --font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;   /* friendly rounded sans */
  --font-hand:    "Caveat", "Bradley Hand", cursive;                /* handwritten labels, notes, easter eggs */

  /* ---------- MOTION ---------- */
  --ease-soft:    cubic-bezier(0.22, 1, 0.36, 1);     /* default — settles in like leaves landing */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* playful pop, for "+1" deposits */
  --ease-grow:    cubic-bezier(0.16, 0.84, 0.3, 1);   /* slow blooming growth */
  --dur-quick:    180ms;
  --dur-base:     320ms;
  --dur-slow:     650ms;
  --dur-grow:     1400ms;
}

/* =====================================================================
   BASE TYPE SCALE — semantic helpers
   ===================================================================== */

html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
}

/* Display — for the "$12,480" big number, hero titles. Fraunces is variable
   and we lean into its optical-size axis so big = chunky, small = elegant. */
.display-xxl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 12vw, 96px);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 56px);
  font-variation-settings: "opsz" 96, "SOFT" 50;
  line-height: 1;
  letter-spacing: -0.02em;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  font-variation-settings: "opsz" 60, "SOFT" 40;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  font-variation-settings: "opsz" 48, "SOFT" 30;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  font-variation-settings: "opsz" 36, "SOFT" 20;
  line-height: 1.2;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  font-variation-settings: "opsz" 24;
  line-height: 1.25;
  margin: 0;
}

/* Body — Nunito, friendly and rounded */
p, .body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
.body-lg { font-size: 17px; line-height: 1.5; }
.body-sm { font-size: 13px; line-height: 1.5; }

/* Labels — uppercase tiny — but rare and gentle */
.label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}

/* Number — tabular for amounts */
.number {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 60;
}

/* Hand — Caveat, for sticky notes, margin scribbles, easter eggs */
.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1.1;
}
.hand-sm { font-family: var(--font-hand); font-size: 16px; color: var(--ink-mute); }

/* Caption */
.caption {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 500;
}