/* ============================================================
   EVINY — Colors & Type foundations
   Source: Eviny Brand Guidelines (Frontify) — Fargepalett & Typografi
   ------------------------------------------------------------
   FONT SUBSTITUTION NOTE
   The real brand fonts are commercial and not bundled here:
     • Atyp (Suitcase Type) — geometric display/text family, logo wordmark
     • IvyPresto Display Light Italic (Adobe Fonts) — elegant serif accent
   Font status:
     • IvyPresto Display — REAL font, served via the brand's Adobe Typekit kit
       (family "ivypresto-display"; Light Italic = weight 300, style italic).
     • Atyp (Suitcase Type) — still substituted with Space Grotesk until the
       licensed .woff2 files are provided (closest free geometric grotesque).
   ============================================================ */

@import url('https://use.typekit.net/zdf8nrz.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,300;1,400&display=swap');

:root {
  /* ---------- PRIMARY · Eviny Greens ---------- */
  --eviny-green-1: #76E691;   /* light spring green   · PMS 346 C */
  --eviny-green-2: #55B077;   /* mid green            · PMS 7723 C */
  --eviny-green-3: #337A5C;   /* deep green           · PMS 555 C */
  --eviny-green-4: #124442;   /* darkest green / ink  · PMS 3435 C */

  /* ---------- BACKGROUNDS ---------- */
  --bg-light: #FAFDFA;        /* light background */
  --bg-dark:  #1B5B59;        /* dark background  · PMS 7722 C */

  /* ---------- SECONDARY · Cold ---------- */
  --eviny-cold-1: #E1C3FF;    /* lilac      · PMS 4120 C */
  --eviny-cold-2: #554CFD;    /* indigo     · PMS 2726 C */
  --eviny-cold-3: #2519FF;    /* electric blue · PMS 2126 C */
  --eviny-cold-4: #2C3D5A;    /* navy slate · PMS 534 C */

  /* ---------- SECONDARY · Warm ---------- */
  --eviny-warm-1: #FCD300;    /* yellow  · PMS 109 C */
  --eviny-warm-2: #FCA50D;    /* amber   · PMS 137 C */
  --eviny-warm-3: #FC6D19;    /* orange  · PMS 166 C */
  --eviny-warm-4: #ED3F26;    /* red     · PMS 1795 C */

  /* ---------- SEMANTIC ---------- */
  --color-bg:            var(--bg-light);
  --color-bg-inverse:    var(--bg-dark);
  --color-surface:       #FFFFFF;
  --color-ink:           var(--eviny-green-4);   /* primary text on light */
  --color-ink-muted:     #4B6B62;                /* muted green-grey text */
  --color-ink-inverse:   var(--bg-light);        /* text on dark */
  --color-primary:       var(--eviny-green-3);   /* primary action */
  --color-primary-hover: var(--eviny-green-4);
  --color-accent:        var(--eviny-green-1);   /* highlight / fills */
  --color-line:          #DCE8E2;                /* hairline borders on light */
  --color-line-dark:     #2C6A66;                /* hairline on dark */
  --color-focus:         var(--eviny-cold-3);    /* focus ring */

  /* ---------- TYPE FAMILIES ---------- */
  /* Atyp is live in the Adobe kit as the variable font "atyp-bl-variable"
     (weight axis 280–700, upright). IvyPresto serves the Light Italic (300).
     Space Grotesk remains as a graceful fallback only. */
  --font-display: "atyp-bl-variable", "Space Grotesk", system-ui, sans-serif;
  --font-text:    "atyp-bl-variable", "Space Grotesk", system-ui, sans-serif;
  --font-accent:  "ivypresto-display", "Cormorant Garamond", Georgia, serif; /* IvyPresto — italic accent */

  /* ---------- TYPE SCALE (clamped, fluid) ---------- */
  --fs-display: clamp(2.75rem, 1.6rem + 5.5vw, 5.5rem);   /* hero */
  --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* ---------- WEIGHTS ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- LINE HEIGHTS / TRACKING ---------- */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.55;
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-caps: 0.08em;

  /* ---------- SPACING (8pt base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  /* Brand uses rounded image frames & full circles. Corners are soft. */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- SHADOWS (subtle, soft, green-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(18,68,66,0.06), 0 1px 3px rgba(18,68,66,0.08);
  --shadow-md: 0 4px 12px rgba(18,68,66,0.08), 0 2px 4px rgba(18,68,66,0.06);
  --shadow-lg: 0 16px 40px rgba(18,68,66,0.12), 0 4px 12px rgba(18,68,66,0.06);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  /* Brand grid: x-margin = 8% of shortest side; gutter = 25% of x-margin */
  --layout-margin: 8%;
  --layout-gutter: 2%;
  --maxw-content: 1200px;
}

/* ============================================================
   SEMANTIC TYPE — apply to real elements
   ============================================================ */
.eviny-display,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
h4, .h4 {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
p, .body {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-ink-muted);
}
small, .caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
}

/* Elegant serif accent — used to emphasise ONE word in a heading */
.accent-serif,
em.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
}

/* Eyebrow / overline label — note the leading dot motif */
.eyebrow {
  font-family: var(--font-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
/* The signature "prikk" (dot) that introduces headlines */
.eyebrow::before,
.dot-lead::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--eviny-green-1);
  flex: none;
}