/* =========================================================
   THEME  -  all colors / sizes live in :root
   Change a color here, whole site changes.
   ========================================================= */
:root {
  /* ---- Mint (sidebar, secondary) ---- */
  --mint:        #A8CFC0;
  --mint-dark:   #4F8A78;
  --mint-deep:   #3A6F5E;
  --mint-soft:   #DCEEE6;

  /* ---- Peach (CTA, cards) ---- */
  --peach:       #F7C5B0;
  --peach-mid:   #F4A484;
  --peach-dark:  #F08A64;
  --peach-soft:  #FCE6DB;

  /* ---- Yellow ---- */
  --yellow:      #FBE3A6;
  --yellow-dark: #D9A93A;
  --yellow-soft: #FDF2D2;

  /* ---- Soft blue ---- */
  --blue:        #C9D9E8;
  --blue-dark:   #6F93B5;
  --blue-soft:   #E6EEF6;

  /* ---- Lilac ---- */
  --lilac:       #E3D0E8;
  --lilac-dark:  #9B72A8;

  /* ---- Surfaces ---- */
  --cream:       #FBF1E4;
  --surface:     #FFF8EE;
  --surface-2:   #FFFCF7;
  --white:       #FFFFFF;
  --border:      #EBDCC8;

  /* ---- Text ---- */
  --text:        #4A3A2E;
  --text-soft:   #8A7767;
  --text-light:  #B8A898;

  /* ---- Status ---- */
  --success:     #4F8A78;
  --danger:      #E0675A;
  --danger-soft: #FBE0DC;
  --warning:     #D9A93A;
  --info:        #6F93B5;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg:          var(--cream);
  --primary:     var(--peach-dark);
  --primary-lt:  var(--peach-mid);
  --secondary:   var(--mint-dark);
  --accent:      var(--yellow);

  /* ---- RGB channels (for rgba shadows / overlays) ---- */
  --shadow-rgb:    74, 58, 46;
  --white-rgb:     255, 255, 255;
  --primary-rgb:   240, 138, 100;
  --secondary-rgb: 79, 138, 120;

  /* ---- Radius ---- */
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Shadows (soft clay look) ---- */
  --shadow-sm:  0 2px 6px rgba(var(--shadow-rgb), .08);
  --shadow-md:  0 8px 20px rgba(var(--shadow-rgb), .10);
  --shadow-lg:  0 16px 40px rgba(var(--shadow-rgb), .16);
  --shadow-clay:
      0 8px 18px rgba(var(--shadow-rgb), .10),
      inset 0 3px 4px rgba(var(--white-rgb), .90),
      inset 0 -3px 6px rgba(var(--shadow-rgb), .06);
  --shadow-clay-sm:
      0 4px 10px rgba(var(--shadow-rgb), .10),
      inset 0 2px 3px rgba(var(--white-rgb), .90),
      inset 0 -2px 4px rgba(var(--shadow-rgb), .06);
  --shadow-inset: inset 0 2px 6px rgba(var(--shadow-rgb), .10);
  --shadow-btn-primary:
      0 6px 14px rgba(var(--primary-rgb), .38),
      inset 0 2px 3px rgba(var(--white-rgb), .55),
      inset 0 -3px 5px rgba(var(--shadow-rgb), .12);
  --shadow-btn-mint:
      0 6px 14px rgba(var(--secondary-rgb), .32),
      inset 0 2px 3px rgba(var(--white-rgb), .45),
      inset 0 -3px 5px rgba(var(--shadow-rgb), .14);

  /* ---- Fonts ---- */
  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --container:     1200px;
  --gutter:        16px;
  --gap:           20px;
  --bottom-nav-h:  64px;

  /* ---- Motion ---- */
  --ease: .25s cubic-bezier(.4, 0, .2, 1);

  /* ---- Z-index ---- */
  --z-header:  100;
  --z-overlay: 200;
  --z-drawer:  210;
  --z-bottom:  150;
  --z-modal:   300;
  --z-toast:   400;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.05rem; }

:focus-visible {
  outline: 3px solid rgba(var(--secondary-rgb), .45);
  outline-offset: 2px;
}

::selection { background: var(--peach); color: var(--text); }

/* ---------- UTILITIES ---------- */
.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }

.section { padding: 48px 0; }
@media (max-width: 768px) { .section { padding: 32px 0; } }

.text-center { text-align: center; }
.text-soft   { color: var(--text-soft); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.fw-bold { font-weight: 800; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.wrap { flex-wrap: wrap; }

.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }  .mt-3 { margin-top: 24px; }  .mt-4 { margin-top: 40px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 40px; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 992px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .grid-4, .grid-3 { gap: 12px; } }

.hidden, [hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}