/* ============================================================
   ZENi Design System — Colors & Type
   Source: ZENi Brand Elements.pdf
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS (from Brand Elements PDF) ---------- */
  --zeni-primary:        #455942;  /* deep sage — wordmark, primary surfaces */
  --zeni-supporting:     #a2b88d;  /* soft sage — accents, secondary surfaces */
  --zeni-highlight:      #b3212f;  /* clay red — used sparingly for emphasis */

  /* ---------- DERIVED / TONAL SCALE ---------- */
  --zeni-primary-900:    #2c3a2a;
  --zeni-primary-800:    #364632;
  --zeni-primary-700:    #3d4f3a;
  --zeni-primary-600:    #455942;  /* = primary */
  --zeni-primary-500:    #5a7256;
  --zeni-primary-400:    #7b9176;
  --zeni-primary-300:    --zeni-supporting;
  --zeni-primary-200:    #c3d3b3;
  --zeni-primary-100:    #dde7d2;
  --zeni-primary-50:     #eef3e8;

  --zeni-highlight-700:  #8a1922;
  --zeni-highlight-500:  #b3212f;
  --zeni-highlight-300:  #d76773;

  /* ---------- NEUTRALS (warm off-white → charcoal) ---------- */
  --zeni-paper:          #f7f4ed;  /* canvas / page background */
  --zeni-cream:          #efebe0;  /* surface tint */
  --zeni-stone-50:       #fafaf7;
  --zeni-stone-100:      #ececea;
  --zeni-stone-200:      #d9d9d4;
  --zeni-stone-300:      #bcbcb5;
  --zeni-stone-400:      #8e8e87;
  --zeni-stone-500:      #6e6e68;
  --zeni-stone-700:      #3f3f3b;
  --zeni-ink:            #1c1d1a;  /* near-black body text */

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:                  var(--zeni-paper);
  --bg-surface:          #ffffff;
  --bg-muted:            var(--zeni-cream);
  --bg-inverse:          var(--zeni-primary);

  --fg:                  var(--zeni-ink);
  --fg-muted:            var(--zeni-stone-500);
  --fg-subtle:           var(--zeni-stone-400);
  --fg-inverse:          var(--zeni-paper);
  --fg-brand:            var(--zeni-primary);
  --fg-accent:           var(--zeni-highlight);

  --border:              var(--zeni-stone-200);
  --border-strong:       var(--zeni-stone-300);
  --border-brand:        var(--zeni-primary);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE  (H1:P = 1.8:1) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;   /* body */
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;   /* display */
  --fs-5xl:   88px;

  /* Headline = body * 1.8 ≈ 28.8px → rounded to 29px in semantic h1 below */

  /* ---------- LINE HEIGHTS & TRACKING ---------- */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;   /* eyebrows / micro-caps */

  /* ---------- SPACING (4px grid) ---------- */
  --sp-0:  0;
  --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;
  --sp-10: 128px;

  /* ---------- RADII (minimalist — small & honest) ---------- */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   6px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* ---------- SHADOWS (whisper-soft, single layer) ---------- */
  --shadow-xs: 0 1px 2px rgba(28, 29, 26, 0.04);
  --shadow-sm: 0 2px 6px rgba(28, 29, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 29, 26, 0.08);
  --shadow-lg: 0 20px 48px rgba(28, 29, 26, 0.12);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE — drop a class to get correct hierarchy.
   ============================================================ */

.zeni-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

.zeni-h1, h1.zeni {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 88px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.zeni-h2, h2.zeni {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.zeni-h3, h3.zeni {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.zeni-h4, h4.zeni {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.zeni-p, p.zeni {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.zeni-p-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.zeni-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.zeni-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  text-transform: uppercase;
}

.zeni-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
}