/* ===========================================================
   Ambady Pebbles Garden — design tokens
   =========================================================== */

:root {
  /* Palette — earthy/botanical */
  --ink: #18211c;
  --ink-2: #2a352d;
  --muted: #6b7468;
  --line: rgba(24, 33, 28, 0.10);
  --line-strong: rgba(24, 33, 28, 0.22);

  --forest: #2f4a1f;          /* primary — Ambady deep green */
  --forest-2: #3c5e29;
  --moss: #5a7340;
  --sage: #b7c39a;
  --sage-2: #d7dfc4;

  --cream: #f1ead9;           /* warm background */
  --paper: #f8f3e7;           /* slightly lighter */
  --paper-2: #f4eddc;
  --shell: #fdfbf4;           /* near-white card */

  --terra: #9c2f22;           /* AMBADY maroon — primary accent */
  --terra-dark: #7a2419;
  --gold: #b08a3c;
  --rose: #e4d3c4;

  --success: #3f7c4f;
  --danger: #b54534;

  /* Typography */
  --serif: "Instrument Serif", "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (fluid-ish) */
  --fs-hero: clamp(2.8rem, 6.5vw, 5.6rem);
  --fs-display: clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h1: clamp(1.75rem, 3vw, 2.4rem);
  --fs-h2: clamp(1.3rem, 2vw, 1.6rem);
  --fs-h3: 1.15rem;
  --fs-body: 0.975rem;
  --fs-sm: 0.85rem;
  --fs-xs: 0.74rem;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(24, 33, 28, 0.04), 0 1px 1px rgba(24, 33, 28, 0.03);
  --shadow-2: 0 6px 24px rgba(24, 33, 28, 0.08), 0 2px 6px rgba(24, 33, 28, 0.04);
  --shadow-3: 0 18px 60px rgba(24, 33, 28, 0.14), 0 4px 16px rgba(24, 33, 28, 0.06);

  /* Layout */
  --container: 1320px;
  --container-narrow: 980px;
  --header-h: 116px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --d-fast: 160ms;
  --d-med: 280ms;
  --d-slow: 520ms;
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* serif headings */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--moss);
}

.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;
}