/* ===========================================================
   Camp Made Easy — Colors & Typography
   Bright, friendly, outdoorsy. Sunny yellow + sky blue + pine.
   =========================================================== */

/* ---------- Fonts ---------- */
/* Primary: Nunito (friendly rounded sans) — body + UI
   Display: Fredoka (rounded chunky display) — headlines, badges
   Substitution flag: both loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ===== Brand Color Tokens ===== */
  /* Primary — Sunshine Yellow (the "happy camp" hero color) */
  --cme-yellow-50:  #FFFBEB;
  --cme-yellow-100: #FEF3C7;
  --cme-yellow-200: #FDE68A;
  --cme-yellow-300: #FCD34D;
  --cme-yellow-400: #FBBF24;
  --cme-yellow-500: #F59E0B;  /* primary */
  --cme-yellow-600: #D97706;
  --cme-yellow-700: #B45309;

  /* Sky Blue — secondary, used for trust + CTA accents */
  --cme-sky-50:  #F0F9FF;
  --cme-sky-100: #E0F2FE;
  --cme-sky-200: #BAE6FD;
  --cme-sky-300: #7DD3FC;
  --cme-sky-400: #38BDF8;
  --cme-sky-500: #0EA5E9;  /* secondary */
  --cme-sky-600: #0284C7;
  --cme-sky-700: #0369A1;

  /* Pine Green — outdoor / nature accent */
  --cme-pine-50:  #F0FDF4;
  --cme-pine-100: #DCFCE7;
  --cme-pine-300: #86EFAC;
  --cme-pine-500: #22C55E;
  --cme-pine-600: #16A34A;
  --cme-pine-700: #15803D;

  /* Campfire Orange — energy, "hot deals", CTA */
  --cme-fire-100: #FFEDD5;
  --cme-fire-300: #FDBA74;
  --cme-fire-500: #F97316;  /* CTA accent */
  --cme-fire-600: #EA580C;
  --cme-fire-700: #C2410C;

  /* Earth / kraft — warm neutrals (wood, picnic table) */
  --cme-earth-100: #FAF6F0;
  --cme-earth-200: #F0E6D2;
  --cme-earth-400: #C8A878;
  --cme-earth-600: #8B6F47;
  --cme-earth-800: #4A3826;

  /* Neutral grays — slightly warm */
  --cme-neutral-0:   #FFFFFF;
  --cme-neutral-50:  #FAFAF7;
  --cme-neutral-100: #F4F3EE;
  --cme-neutral-200: #E7E5DD;
  --cme-neutral-300: #D1CFC4;
  --cme-neutral-400: #A8A599;
  --cme-neutral-500: #78766B;
  --cme-neutral-600: #565449;
  --cme-neutral-700: #3D3B33;
  --cme-neutral-800: #26241F;
  --cme-neutral-900: #14130F;

  /* ===== Semantic ===== */
  --bg:        var(--cme-neutral-50);
  --bg-elev:   var(--cme-neutral-0);
  --bg-warm:   var(--cme-yellow-50);
  --bg-sunny:  var(--cme-yellow-100);

  --fg-1:      var(--cme-neutral-900);   /* primary text */
  --fg-2:      var(--cme-neutral-700);   /* secondary text */
  --fg-3:      var(--cme-neutral-500);   /* tertiary / meta */
  --fg-inv:    var(--cme-neutral-0);

  --border:    var(--cme-neutral-200);
  --border-strong: var(--cme-neutral-300);
  --border-ink: var(--cme-neutral-900);   /* sticker/cartoon outline */

  --accent:        var(--cme-yellow-500);
  --accent-hover:  var(--cme-yellow-600);
  --accent-soft:   var(--cme-yellow-100);

  --link:          var(--cme-sky-600);
  --link-hover:    var(--cme-sky-700);

  --cta:           var(--cme-fire-500);
  --cta-hover:     var(--cme-fire-600);

  --success: var(--cme-pine-600);
  --warning: var(--cme-yellow-500);
  --danger:  #DC2626;
  --info:    var(--cme-sky-500);

  /* ===== Typography Scale ===== */
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — generous, friendly */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  72px;

  --lh-tight:   1.15;  /* @kind font */
  --lh-snug:    1.3;   /* @kind font */
  --lh-normal:  1.5;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semi:    600;   /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-black:   800;   /* @kind font */

  /* ===== Spacing (4px grid) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ===== Radii — generous, friendly ===== */
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    20px;
  --r-2xl:   28px;
  --r-pill:  9999px;

  /* ===== Shadows — soft, sunny, slight warm tint ===== */
  --shadow-sm:  0 1px 2px rgba(38, 36, 31, 0.06);
  --shadow-md:  0 4px 12px rgba(38, 36, 31, 0.08), 0 2px 4px rgba(38, 36, 31, 0.04);
  --shadow-lg:  0 12px 28px rgba(38, 36, 31, 0.10), 0 4px 8px rgba(38, 36, 31, 0.05);
  --shadow-xl:  0 24px 48px rgba(38, 36, 31, 0.14), 0 8px 16px rgba(38, 36, 31, 0.06);
  /* Sticker shadow — for "cartoon" cards and badges */
  --shadow-sticker: 0 4px 0 rgba(38, 36, 31, 0.12);
  --shadow-sticker-lg: 0 6px 0 rgba(38, 36, 31, 0.15);
  /* Sunny glow — for hero CTAs */
  --shadow-glow: 0 8px 24px rgba(245, 158, 11, 0.35);

  /* ===== Motion ===== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   150ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   400ms;  /* @kind other */
}

/* ===== Semantic element styles =====
   Use these as base — override per-component as needed. */

body {
  font-family: var(--font-body);
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(36px, 5vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(28px, 3.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cme-fire-600);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cme-neutral-100);
  padding: 2px 6px;
  border-radius: 6px;
}