/* ============================================================
   Zaigo Design System — Foundations
   Colors + Type tokens, plus semantic element styles.
   ============================================================ */

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

:root {
  /* ---------- COLOR: Foundation ---------- */
  --canvas:        #F2F0EB;   /* Default page background */
  --ink:           #1A1A1A;   /* Primary text, nav, buttons, dark panels */
  --ink-muted:     #A8A39C;   /* Secondary headlines, supporting copy */
  --ink-inverse:   #FFFFFF;   /* Text on dark panels */

  /* ---------- COLOR: Accent (exactly one) ---------- */
  --accent:        #E94E3B;   /* Coral — highlight phrase + small labels only */

  /* ---------- COLOR: Pastel cards (rotate in order) ---------- */
  --card-blush:        #F2DCDC;
  --card-sage:         #DCE6DC;
  --card-lilac:        #E0DCEB;
  --card-butter:       #E8E6C8;
  --card-periwinkle:   #D8DCEB;

  /* ---------- Semantic mapping ---------- */
  --fg-1:          var(--ink);
  --fg-2:          var(--ink-muted);
  --fg-inverse:    var(--ink-inverse);
  --bg-1:          var(--canvas);
  --bg-dark:       var(--ink);

  /* ---------- RADIUS (three values only) ---------- */
  --radius-card:   24px;
  --radius-image:  32px;
  --radius-pill:   999px;

  /* ---------- SPACING ---------- */
  --section-gap-desktop: 140px;  /* 120–160 range, middle */
  --section-gap-mobile:  88px;
  --hero-top:            112px;
  --card-pad:            32px;
  --btn-pad-y:           14px;
  --btn-pad-x:           28px;

  /* ---------- TYPE ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Display (Hero, section openers) */
  --display-size:        clamp(56px, 6vw, 88px);
  --display-weight:      600;
  --display-tracking:    -0.02em;
  --display-leading:     1.05;

  /* H2 (Sub-section heads) */
  --h2-size:             clamp(32px, 3.2vw, 40px);
  --h2-weight:           600;
  --h2-tracking:         -0.01em;
  --h2-leading:          1.15;

  /* H3 (Card titles) */
  --h3-size:             clamp(22px, 1.8vw, 26px);
  --h3-weight:           600;
  --h3-tracking:         -0.01em;
  --h3-leading:          1.25;

  /* Body large (supporting paragraphs) */
  --body-lg-size:        clamp(18px, 1.3vw, 20px);
  --body-lg-weight:      400;
  --body-lg-leading:     1.5;

  /* Body (default) */
  --body-size:           16px;
  --body-weight:         400;
  --body-leading:        1.55;

  /* Label (metadata, em-dash prefix on dark) */
  --label-size:          13px;
  --label-weight:        500;
  --label-tracking:      0.04em;
  --label-leading:       1.4;
}

@media (max-width: 480px) {
  :root {
    --h2-size: clamp(26px, 7vw, 32px);
    --body-lg-size: clamp(16px, 4.2vw, 18px);
  }
}

/* ============================================================
   Element resets + semantic mapping
   ============================================================ */

html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + headings */
.zg-display, h1.zg-display {
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  margin: 0;
}

.zg-display-muted {
  display: block;
  color: var(--ink-muted);
}

h2, .zg-h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  color: var(--ink);
  margin: 0;
}

h3, .zg-h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-leading);
  color: var(--ink);
  margin: 0;
}

/* Dark image / founder cards — global h3 ink color must not apply here */
.zg-image-feat-content h3,
h3.zg-image-feat-title,
.zg-founder-content h3 {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.zg-body-lg, p.zg-body-lg {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-leading);
  color: var(--ink-muted);
  margin: 0;
}

p, .zg-body {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--ink);
  margin: 0;
}

.zg-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  line-height: var(--label-leading);
  color: var(--ink-muted);
  text-transform: none;
}

/* The signature: coral highlight phrase inside a display */
.zg-highlight {
  background: var(--accent);
  color: #fff;
  padding: 0.05em 0.25em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Em-dash–prefixed label, used on dark panels and image features */
.zg-meta-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  color: var(--accent);
}
.zg-meta-label::before {
  content: "— ";
}

/* Primary button */
.zg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--ink-inverse);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  border: 0;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.zg-btn:hover { background: #2a2a2a; }
.zg-btn:active { transform: scale(0.985); }
.zg-btn .plus {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  font-size: 14px;
  line-height: 1;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.zg-btn:hover .plus {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .zg-btn:hover .plus {
    transform: none;
  }
}

/* Pastel card */
.zg-card {
  background: var(--card-blush);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  position: relative;
  overflow: hidden;
}
.zg-card[data-tone="sage"]       { background: var(--card-sage); }
.zg-card[data-tone="lilac"]      { background: var(--card-lilac); }
.zg-card[data-tone="butter"]     { background: var(--card-butter); }
.zg-card[data-tone="periwinkle"] { background: var(--card-periwinkle); }
.zg-card .monogram {
  position: absolute;
  right: 18px; bottom: 14px;
  font-size: 56px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.10;
  letter-spacing: -0.04em;
}