/* ============================================================
   ZĒNS WELLNESS — Colors & Type foundations
   Wellness | Rituals | Lifestyle  ·  "Wellness with Attitude"
   ------------------------------------------------------------
   FONT NOTE: The brand fonts are commercial and NOT bundled here:
     · Eyesome   (logo / display)   → substituted with "Cormorant"
     · Brillions (secondary serif)  → substituted with "Cormorant Garamond"
     · Larken Thin (body text)      → substituted with "EB Garamond"
   Drop the real .woff2/.ttf files into /fonts and swap the
   @font-face below to go pixel-perfect. See README.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ---- Brand palette (from Brand Book 2025) ---- */
  --zns-maroon:    #4C1D1D;  /* primary · deep bordeaux  */
  --zns-cream:     #F1ECE5;  /* canvas · warm off-white  */
  --zns-white:     #FFFFFF;  /* pure white               */
  --zns-gold:      #B0894C;  /* accent · antique gold (harmonises maroon ↔ cream) */
  --zns-red:       var(--zns-gold);  /* accent shifted from the punchy pattern red to a warm gold */
  --zns-taupe:     #D2BEAA;  /* warm sand / pattern neutral */
  --zns-alert:     #C0392B;  /* semantic only · error / cancelled */

  /* ---- Extended (derived, harmonised in oklch) ---- */
  --zns-maroon-90: #5A2727;  /* hover / raised maroon    */
  --zns-maroon-70: oklch(32% 0.07 25 / 0.84); /* muted ink on cream */
  --zns-maroon-45: oklch(32% 0.07 25 / 0.6); /* captions / hairlines */
  --zns-cream-dim: #E7E0D6;  /* sunk cream / card on cream */
  --zns-mushroom:  #B9A593;  /* tertiary text on cream   */
  --zns-gold-deep: #8C6A33;  /* pressed accent (deep gold) */
  --zns-red-deep:  var(--zns-gold-deep);  /* pressed accent           */
  --zns-line:      oklch(34% 0.07 25 / 0.16); /* hairline border on cream */
  --zns-line-dark: oklch(92% 0.01 80 / 0.18); /* hairline on maroon */

  /* ---- Semantic surfaces ---- */
  --bg-canvas:     var(--zns-cream);
  --bg-dark:       var(--zns-maroon);
  --bg-white:      var(--zns-white);
  --bg-card:       var(--zns-white);

  /* ---- Semantic foreground ---- */
  --fg:            var(--zns-maroon);     /* default ink on cream/white */
  --fg-muted:      var(--zns-maroon-70);
  --fg-faint:      var(--zns-maroon-45);
  --fg-on-dark:    var(--zns-cream);      /* text on maroon */
  --fg-on-dark-muted: oklch(93% 0.01 80 / 0.82);
  --accent:        var(--zns-red);

  /* ---- Type families — unified to Cormorant Garamond (by request) ---- */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-body:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ---- Type scale (editorial, generous) — +2px bump for legibility ---- */
  --step-hero:  clamp(3.75rem, 8vw, 7.25rem); /* display hero          */
  --step-h1:    clamp(2.625rem, 5vw, 4.125rem);
  --step-h2:    clamp(2.125rem, 3.4vw, 2.875rem);
  --step-h3:    1.9375rem;  /* 31px */
  --step-h4:    1.5625rem;  /* 25px */
  --step-body:  1.375rem;   /* 22px base body */
  --step-sm:    1.25rem;    /* 20px */
  --step-xs:    1.0625rem;  /* 17px */
  --overline:   1rem;       /* 16px */

  /* ---- Radii (soft, organic) ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Spacing rhythm (8pt) ---- */
  --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;

  /* ---- Elevation (warm, low-contrast) ---- */
  --shadow-sm: 0 1px 2px oklch(34% 0.07 25 / 0.06), 0 2px 6px oklch(34% 0.07 25 / 0.05);
  --shadow-md: 0 4px 14px oklch(34% 0.07 25 / 0.08), 0 2px 4px oklch(34% 0.07 25 / 0.05);
  --shadow-lg: 0 18px 48px oklch(34% 0.07 25 / 0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.45s;
}

/* ============================================================
   Base / semantic element styles
   ============================================================ */
.zns {
  background: var(--bg-canvas);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / headings ---------------------------------------- */
.zns h1, .zns-h1 {
  font-family: var(--font-display);
  font-size: var(--step-h1);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
.zns-hero {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.zns h2, .zns-h2 {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
}
.zns h3, .zns-h3 {
  font-family: var(--font-serif);
  font-size: var(--step-h3);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}
.zns h4, .zns-h4 {
  font-family: var(--font-serif);
  font-size: var(--step-h4);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

/* Body -------------------------------------------------------- */
.zns p, .zns-body {
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.65;
  margin: 0 0 1em;
  text-wrap: pretty;
}
.zns-lead {
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
.zns-caption {
  font-family: var(--font-body);
  font-size: var(--step-xs);
  color: var(--fg-faint);
  line-height: 1.5;
}

/* Overline / label — spaced caps, the brand's signature ------ */
.zns-overline {
  font-family: var(--font-serif);
  font-size: var(--overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--fg-muted);
}

/* Tagline lockup style: "Wellness l Rituals l Lifestyle" ----- */
.zns-tagline {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.22em;
}

a.zns-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur) var(--ease);
}
a.zns-link:hover { opacity: 0.62; }