/* ============================================================
   HIPO Design System — Foundations
   Colors, gradients, typography, spacing, radii, shadows
   Source of truth: assets/hipo_brand_reference.pdf
   ============================================================ */

/* Fonts: Playfair Display (display/headline) + Inter (body/UI).
   Loaded from Google Fonts. If embedding offline, drop matching
   .woff2 files into fonts/ and switch to @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- Canonical Hipo tokens (these match the live site) ---------- */
  --white:                #FDF9F6;  /* warmest white */
  --cream:                #FAF8F5;  /* MAIN page background */
  --offwhite:             #F4F1EC;  /* cards, panels */
  --border:               #E4DFD8;  /* dividers, hairlines */
  --charcoal:             #1E1C1A;  /* primary text */
  --grey-mid:             #6B6560;  /* body text */
  --grey-light:           #A8A29C;  /* captions, meta */

  --slate:                #57150F;  /* gradient start · darkest */
  --mauve:                #8C2708;  /* gradient mid · 45% */
  --terra:                #C23A00;  /* gradient end · primary accent */
  --terra-light:          #E2725B;  /* lighter terra (tags, on-dark accents) */
  --terra-dark:           #A84535;  /* darker terra */

  /* Primary gradient — reserved for high-impact moments only
     (hero headers, primary CTAs, accent bars). Never body bg. */
  --brand-gradient:       linear-gradient(120deg, #57150F 0%, #8C2708 45%, #C23A00 100%);

  /* ---------- Aliases (prefixed) — kept for any code that referenced them ---------- */
  --hipo-burgundy:        var(--slate);
  --hipo-burnt:           var(--mauve);
  --hipo-orange:          var(--terra);
  --hipo-warm-white:      var(--white);
  --hipo-cream:           var(--cream);
  --hipo-off-white:       var(--offwhite);
  --hipo-charcoal:        var(--charcoal);
  --hipo-grey-mid:        var(--grey-mid);
  --hipo-grey-light:      var(--grey-light);
  --hipo-border:          var(--border);
  --hipo-gradient:        var(--brand-gradient);
  --hipo-gradient-soft:   linear-gradient(120deg, rgba(87,21,15,0.08) 0%, rgba(140,39,8,0.08) 45%, rgba(194,58,0,0.10) 100%);

  /* ---------- Semantic tokens ---------- */
  --bg:                   var(--cream);
  --bg-elevated:          var(--white);
  --bg-card:              var(--offwhite);
  --fg:                   var(--charcoal);
  --fg-1:                 var(--charcoal);
  --fg-2:                 var(--grey-mid);
  --fg-3:                 var(--grey-light);
  --accent:               var(--terra);
  --accent-deep:          var(--mauve);
  --accent-darkest:       var(--slate);

  /* ---------- Type families ---------- */
  --font-display:         'Playfair Display', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --font-body:            'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:            'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (px) — derived from brand ref ----------
     Brand ref is print-scaled (32/22/16/11/9/7pt); web scale here. */
  --fs-display:           clamp(2.75rem, 5.5vw, 4.5rem); /* 44–72px hero */
  --fs-h1:                2rem;     /* 32px */
  --fs-h2:                1.5rem;   /* 24px */
  --fs-h3:                1.125rem; /* 18px — Playfair Bold Italic */
  --fs-body-lg:           1.0625rem;/* 17px */
  --fs-body:              1rem;     /* 16px */
  --fs-body-sm:           0.9375rem;/* 15px */
  --fs-caption:           0.8125rem;/* 13px */
  --fs-micro:             0.6875rem;/* 11px — labels/eyebrows */

  /* Line heights */
  --lh-tight:             1.08;
  --lh-snug:              1.2;
  --lh-normal:            1.5;
  --lh-loose:             1.7;

  /* Letter spacing */
  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.04em;
  --tracking-eyebrow:     0.18em;  /* uppercase micro labels */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0:              0;
  --space-1:              0.25rem;  /*  4 */
  --space-2:              0.5rem;   /*  8 */
  --space-3:              0.75rem;  /* 12 */
  --space-4:              1rem;     /* 16 */
  --space-5:              1.5rem;   /* 24 */
  --space-6:              2rem;     /* 32 */
  --space-7:              3rem;     /* 48 */
  --space-8:              4rem;     /* 64 */
  --space-9:              6rem;     /* 96 */
  --space-10:             8rem;     /* 128 */

  /* ---------- Radii — Hipo is gently rounded, never pill on cards ---------- */
  --radius-xs:            4px;
  --radius-sm:            6px;
  --radius-md:            10px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-pill:          999px;

  /* ---------- Borders ---------- */
  --border-hairline:      1px solid var(--hipo-border);
  --border-strong:        1.5px solid var(--hipo-charcoal);

  /* ---------- Shadows — soft, warm, low ---------- */
  --shadow-xs:            0 1px 1px rgba(30,28,26,0.04);
  --shadow-sm:            0 2px 6px rgba(30,28,26,0.06);
  --shadow-md:            0 8px 24px rgba(30,28,26,0.08);
  --shadow-lg:            0 18px 48px rgba(30,28,26,0.12);
  --shadow-cta:           0 10px 26px rgba(194,58,0,0.28);

  /* ---------- 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:             140ms;
  --dur-base:             220ms;
  --dur-slow:             420ms;

  /* ---------- Layout ---------- */
  --container-max:        1000px;  /* matches live site .container width */
  --container-wide:       1180px;
  --container-narrow:     740px;
  --gutter:               clamp(1rem, 4vw, 1.75rem);
}

/* ============================================================
   Base reset & semantic element styles
   ============================================================ */

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — Playfair Display, tight, charcoal */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 800;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

/* H3 — Playfair Bold (NOT italic by default on the live site).
   Per the brand ref PDF, the H3 *Subheading* style is Playfair Bold Italic;
   apply that variant with .h3-quote or by adding font-style: italic where
   the content is a pull quote. Plain h3 stays upright to match site usage. */
h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--fg-1);
}

/* Italic-terra variant — for em inside headlines and pull-quote H3s */
em, i, .accent-italic {
  font-style: italic;
  color: var(--terra);
}

/* Body */
p {
  margin: 0 0 var(--space-4);
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

p.lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-1);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

/* Eyebrows — uppercase micro labels above headlines.
   Matches the live site .section-eyebrow class: grey-mid, 0.22em tracking. */
.eyebrow,
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;          /* ~11.2px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--grey-mid);
}

/* Links */
a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); }

/* Inline emphasis */
strong, b { color: var(--fg-1); font-weight: 700; }

/* Code */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--hipo-off-white);
  padding: 0.12em 0.42em;
  border-radius: var(--radius-xs);
  color: var(--accent-deep);
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-6) 0;
}

/* ============================================================
   Utility helpers used across the system
   ============================================================ */

.hipo-gradient-text {
  background: var(--hipo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hipo-gradient-bg {
  background: var(--hipo-gradient);
  color: var(--hipo-warm-white);
}

/* Subtle 0.018-opacity noise overlay over gradient areas — brand spec */
.hipo-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.018;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}