/* ============================================================
   Little Wishes — Design System tokens
   Brand: warm beige storybook canvas, ink-black hand-drawn feel,
   confetti-bright accents. Sigher (display) + Quicksand (body).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "Sigher";
  src: url("fonts/Sigher.otf") format("opentype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* ---- Brand palette (from brand deck) ---- */
  --ink:    #2c2c34;   /* black */
  --cream:  #f2f4e8;   /* beige */
  --blue:   #9ab0ec;
  --red:    #c85a49;
  --yellow: #f3cf4d;
  --green:  #5ba456;
  --pink:   #e6b6be;
  --orange: #ff9858;

  /* ---- Tints / surfaces ---- */
  --cream-deep: #e9ebdb;
  --paper:      #fbfcf6;   /* lifted card surface */
  --paper-warm: #fdf6ea;
  --ink-70:  rgba(44,44,52,.72);
  --ink-60:  rgba(44,44,52,.62);
  --ink-45:  rgba(44,44,52,.45);
  --ink-12:  rgba(44,44,52,.12);
  --ink-08:  rgba(44,44,52,.08);

  /* soft pastel washes for section blocks */
  --wash-blue:   #e6ecfb;
  --wash-pink:   #f8ebee;
  --wash-yellow: #fcf3d4;
  --wash-green:  #e4f0e2;
  --wash-orange: #ffece0;

  /* ---- Status colors ---- */
  --status-available: var(--green);
  --status-pending:   var(--orange);
  --status-funded:    var(--blue);
  --status-taken:     var(--ink-45);

  /* ---- Type ---- */
  --font-display: "Sigher", "Quicksand", system-ui, sans-serif;
  --font-body: "Quicksand", system-ui, -apple-system, sans-serif;

  /* ---- Geometry ---- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* hand-drawn ink border */
  --line: 2px solid var(--ink);
  --line-thin: 1.5px solid var(--ink);

  --shadow-sm: 0 2px 0 var(--ink);
  --shadow-md: 0 4px 0 var(--ink);
  --shadow-lg: 0 6px 0 var(--ink);
  --shadow-soft: 0 18px 40px -22px rgba(44,44,52,.45);

  --maxw: 1200px;
  --nav-h: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button { font-family: var(--font-body); cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--yellow); color: var(--ink); }

/* utility */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
.center { text-align: center; }
.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;
}

/* gentle float for scattered doodles */
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%     { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}