/* Happy Yogi Design System — single bundled stylesheet (tokens + components).
   Flattened from tokens/*.css + components/components.css so the whole style
   arrives in one request: no @import chain, no unstyled flash on navigation. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400;1,6..12,600&family=Caveat:wght@400;500;600&display=swap');

/* ===== tokens/fonts.css ===== */
/* Happy Yogi — Webfonts
   Direction A + C "Studio Calm, grounded & soft":
   - Display: Cormorant Garamond — calm, chique, editorial (uit richting A)
   - Text:    Nunito Sans — grounded, soft, ronde vormen (uit richting C)
   - Accent:  Lebanon — het handschrift uit het Happy Yogi-logo.
              Lokaal bestand vereist: plaats Lebanon.ttf (of .otf → pas src aan)
              in /assets/fonts/. Tot die tijd valt het terug op Caveat.
              Spaarzaam gebruiken: 1 woord of korte zin, nooit voor lopende tekst.
   Cormorant/Nunito/Caveat loaded from Google Fonts. */

@font-face {
  font-family: 'Lebanon';
  src: url('./assets/fonts/Lebanon.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
  /* Family tokens */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Lebanon', 'Caveat', 'Bradley Hand', cursive;
  --font-mono: 'SFMono-Regular', ui-monospace, 'Menlo', monospace;
}

/* ===== tokens/colors.css ===== */
/* Happy Yogi — Color tokens
   Brand: friendly green Buddha. Calm, airy, warm-neutral.
   Primary green sampled from the logo = #5E9333 (leaf). */

:root {
  /* ---- Brand green scale ---- */
  --leaf-50:  #EEF3E5;
  --leaf-100: #DDE7C9;
  --leaf-200: #C2D4A4;
  --leaf-300: #9DBA74;
  --leaf-400: #7BA34C;
  --leaf-500: #5E9333;  /* PRIMARY — Happy Yogi green */
  --leaf-600: #4F7E2A;  /* hover */
  --leaf-700: #3E6B22;  /* pressed / deep */
  --forest-800: #34521C;
  --forest-900: #243A13;

  /* ---- Warm neutrals ---- */
  --ink-900: #1F2317;  /* near-black, warm — primary text */
  --ink-800: #2E3324;
  --ink-700: #44473B;  /* body text */
  --ink-500: #6B6B5C;  /* secondary text */
  --ink-400: #8D8676;  /* muted / captions */
  --ink-300: #B3AC9C;  /* disabled / hairline labels */

  --sand-100: #F2EDE2;
  --sand-200: #ECE5D8;
  --sand-300: #E2DACB;  /* borders on cream */
  --cream:    #F7F4EC;  /* page background */
  --white:    #FFFFFF;

  /* ---- Support / status (muted to fit the calm palette) ---- */
  --terracotta: #A95130;  /* error / important */
  --sand-accent: #C8AA5D;  /* warning / highlight */
  --sky:     #4E7E8C;  /* info / cool accent */

  /* ---- Semantic aliases ---- */
  --bg-page:      var(--cream);
  --bg-surface:   var(--white);
  --bg-subtle:    var(--sand-100);
  --bg-sunken:    var(--sand-200);
  --bg-tint:      var(--leaf-50);   /* faint green wash */
  --bg-inverse:   var(--forest-900);

  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-400);
  --text-on-dark: var(--cream);
  --text-on-green:var(--white);
  --text-link:    var(--leaf-600);

  --border:        var(--sand-300);
  --border-strong: var(--ink-300);
  --border-green:  var(--leaf-200);

  --accent:        var(--leaf-500);
  --accent-hover:  var(--leaf-600);
  --accent-press:  var(--leaf-700);

  --focus-ring:   color-mix(in oklab, var(--leaf-500) 55%, white);
}

/* ===== tokens/typography.css ===== */
/* Happy Yogi — Typography tokens
   Display = Cormorant Garamond (airy, editorial). Text = Nunito Sans (soft, grounded).
   Accent = Caveat (playful script · var(--font-accent)) — spaarzaam, 1 woord per blok.
   Display sizes lean large & light with tight leading; text is calm & roomy. */

:root {
  /* ---- Type scale (display uses rem; tuned for big airy headings) ---- */
  --fs-display:   clamp(3rem, 6vw, 4.75rem);   /* hero */
  --fs-h1:        clamp(2.4rem, 4vw, 3.4rem);
  --fs-h2:        clamp(1.9rem, 3vw, 2.5rem);
  --fs-h3:        1.6rem;
  --fs-h4:        1.3rem;
  --fs-lead:      1.25rem;   /* intro paragraph */
  --fs-body:      1rem;      /* 16px */
  --fs-sm:        0.875rem;
  --fs-xs:        0.75rem;
  --fs-eyebrow:   0.6875rem; /* uppercase label */

  /* ---- Weights ---- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---- Line heights ---- */
  --lh-tight:     1.04;  /* display */
  --lh-snug:      1.18;  /* headings */
  --lh-normal:    1.5;
  --lh-relaxed:   1.72;  /* body copy */

  /* ---- Letter spacing ---- */
  --ls-display:  -0.012em;
  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-eyebrow:   0.16em;  /* uppercase eyebrows */
  --ls-button:    0.04em;
}

/* ===== tokens/spacing.css ===== */
/* Happy Yogi — Spacing, radii, shadows, motion
   Soft, generous, airy. 8px base rhythm. */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */
  --sp-10: 8rem;     /* 128 — generous section breathing room */

  /* ---- Radii (soft, friendly) ---- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;   /* cards */
  --r-xl:   28px;   /* feature panels */
  --r-pill: 999px;  /* buttons, chips */

  /* ---- Borders ---- */
  --bw: 1px;
  --bw-strong: 1.5px;

  /* ---- Shadows (low, warm, diffuse — never harsh) ---- */
  --shadow-xs: 0 1px 2px rgba(31, 35, 23, 0.05);
  --shadow-sm: 0 2px 8px rgba(31, 35, 23, 0.06);
  --shadow-md: 0 10px 30px rgba(31, 35, 23, 0.08);
  --shadow-lg: 0 24px 60px rgba(31, 35, 23, 0.10);
  --shadow-green: 0 12px 28px rgba(62, 107, 34, 0.22);

  /* ---- Motion (calm, gentle ease — no bounce) ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
}

/* ===== tokens/base.css ===== */
/* Happy Yogi — Base element styles & shared utilities.
   Imported last so it can use all tokens. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Display + lead helpers ---- */
.hy-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0;
}
.hy-display em, .hy-accent-italic {
  font-style: italic;
  color: var(--accent);
  font-weight: var(--fw-medium);
}
.hy-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--ink-500);
  font-weight: var(--fw-regular);
}

/* ---- Eyebrow / kicker ---- */
.hy-eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.hy-eyebrow--muted { color: var(--text-muted); }

/* ---- Layout helpers ---- */
.hy-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.hy-container--narrow { max-width: var(--container-narrow); }

/* ---- Decorative divider (small leaf dot) ---- */
.hy-dot-rule {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--border-strong);
}
.hy-dot-rule::before, .hy-dot-rule::after {
  content: ""; height: 1px; flex: 1; background: var(--border);
}
.hy-dot-rule > span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
}

/* ===== components/components.css ===== */
/* Happy Yogi — Component classes.
   Paired with the React components in /components. Both the design-system
   cards and the UI kits render these classes. */

/* ---------------- Button ---------------- */
.hy-btn {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-button);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: var(--bw-strong) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.hy-btn:hover { text-decoration: none; }
.hy-btn:active { transform: translateY(1px); }
.hy-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.hy-btn--primary { background: var(--accent); color: var(--white); box-shadow: var(--shadow-green); }
.hy-btn--primary:hover { background: var(--accent-hover); }
.hy-btn--primary:active { background: var(--accent-press); }

.hy-btn--secondary { background: transparent; color: var(--forest-800); border-color: var(--border-strong); }
.hy-btn--secondary:hover { background: var(--bg-subtle); border-color: var(--ink-400); }

.hy-btn--ghost { background: transparent; color: var(--forest-800); padding-inline: var(--sp-3); }
.hy-btn--ghost:hover { background: var(--bg-tint); }

.hy-btn--on-dark { background: var(--white); color: var(--forest-900); box-shadow: none; }
.hy-btn--on-dark:hover { background: var(--cream); }

.hy-btn--sm { padding: 10px 18px; font-size: var(--fs-xs); }
.hy-btn--lg { padding: 17px 34px; font-size: var(--fs-body); }
.hy-btn--block { display: flex; width: 100%; }
.hy-btn[disabled], .hy-btn--disabled { opacity: .45; pointer-events: none; box-shadow: none; }

/* ---------------- Tag / Chip ---------------- */
.hy-tag {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--forest-800);
  border: 1px solid var(--border-green);
}
.hy-tag--solid { background: var(--accent); color: var(--white); border-color: transparent; }
.hy-tag--neutral { background: var(--bg-subtle); color: var(--ink-700); border-color: var(--border); }
.hy-tag--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; opacity:.7; }

/* level dots */
.hy-level { display:inline-flex; gap:4px; align-items:center; }
.hy-level i { width:7px; height:7px; border-radius:50%; background: var(--border-strong); display:block; }
.hy-level i.on { background: var(--accent); }

/* ---------------- Card ---------------- */
.hy-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hy-card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.hy-card__media { aspect-ratio: 3 / 2; background: var(--bg-sunken); object-fit: cover; width: 100%; display:block; }
.hy-card__body { padding: var(--sp-5); }
.hy-card__title { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-strong); margin: 0 0 var(--sp-2); font-weight: var(--fw-semibold); }
.hy-card__text { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }

/* ---------------- Form fields ---------------- */
.hy-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.hy-label { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.hy-input, .hy-select, .hy-textarea {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--bg-surface);
  border: var(--bw-strong) solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 15px;
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hy-input::placeholder, .hy-textarea::placeholder { color: var(--ink-300); }
.hy-input:focus, .hy-select:focus, .hy-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.hy-textarea { resize: vertical; min-height: 96px; line-height: var(--lh-normal); }
.hy-help { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------- Section heading helper ---------------- */
.hy-section-head { display:flex; flex-direction:column; gap: var(--sp-3); align-items:center; text-align:center; }
.hy-section-head .hy-eyebrow { display:block; }