/* =========================================================================
   Vision Expansion — Foundations
   Color tokens + type system
   ========================================================================= */

/* ---- Fonts (Google Fonts — flagged substitution) -------------------------
   Display: Cormorant Garamond (editorial serif)
   Body:    Inter Tight (clean humanist sans)
   Mono:    JetBrains Mono (used sparingly for detail text / micro-labels)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =======================================================================
     COLOR — Base palette
     ======================================================================= */

  /* Paper / surface */
  --paper:        #F6F2EA;   /* primary bg — warm off-white */
  --paper-2:      #EFE9DD;   /* subtle section break */
  --paper-3:      #E5DDCB;   /* deeper hairline band */

  /* Ink (near-blacks with green undertone) */
  --ink:          #14201C;   /* deepest — headlines, primary text */
  --ink-2:        #2A3731;   /* body */
  --ink-3:        #556259;   /* secondary text */
  --ink-4:        #8A9188;   /* tertiary / meta */
  --ink-5:        #B8BCB4;   /* hairlines, disabled */

  /* Forest — primary brand */
  --forest:       #2C4A3E;   /* primary CTA, brand mark */
  --forest-deep:  #1E332B;
  --forest-soft:  #506A5E;
  --forest-wash:  #D9E0DA;   /* tint used for subtle fills */

  /* Warm accent — terracotta */
  --accent:       #C67D4A;
  --accent-deep:  #A8623A;
  --accent-soft:  #E4B896;
  --accent-wash:  #F1DFCD;

  /* Semantic */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-muted:     var(--ink-4);
  --fg-hairline:  var(--ink-5);

  --bg-1:         var(--paper);
  --bg-2:         var(--paper-2);
  --bg-3:         var(--paper-3);

  --brand:        var(--forest);
  --brand-hover:  var(--forest-deep);
  --brand-on:     var(--paper);

  --link:         var(--forest);
  --link-hover:   var(--accent-deep);

  /* =======================================================================
     TYPE
     ======================================================================= */
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — editorial, generous leading */
  --fs-display:   clamp(3.25rem, 6.5vw, 6.25rem);   /* hero headline */
  --fs-h1:        clamp(2.5rem, 4.5vw, 4rem);
  --fs-h2:        clamp(1.875rem, 3vw, 2.75rem);
  --fs-h3:        1.5rem;
  --fs-lead:      1.25rem;     /* subheadlines / intro paragraph */
  --fs-body:      1.0625rem;   /* 17px */
  --fs-small:     0.9375rem;
  --fs-micro:     0.75rem;     /* eyebrow / labels */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-body:      1.65;
  --lh-loose:     1.8;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.015em;

  /* =======================================================================
     SPACING / RADII / BORDERS / SHADOWS
     ======================================================================= */
  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --hairline:  1px solid var(--ink-5);
  --hairline-soft: 1px solid rgba(20,32,28,0.10);

  /* Shadows — soft & low, editorial feel */
  --shadow-1: 0 1px 2px rgba(20,32,28,0.04), 0 2px 8px rgba(20,32,28,0.04);
  --shadow-2: 0 2px 4px rgba(20,32,28,0.05), 0 12px 24px -8px rgba(20,32,28,0.10);
  --shadow-3: 0 8px 16px -4px rgba(20,32,28,0.08), 0 24px 48px -16px rgba(20,32,28,0.14);

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-med:     280ms;
  --dur-slow:    520ms;

  /* Layout */
  --maxw-prose:    38rem;   /* reading column */
  --maxw-content:  64rem;
  --maxw-wide:     80rem;
}

/* =======================================================================
   Base element styles
   ======================================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings — serif */
.display, .h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--fg-1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); font-weight: 500; line-height: 1.02; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 {
  font-size: var(--fs-h3);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Lead paragraph */
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

/* Eyebrow — small uppercase label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

/* Serif italic utility — for editorial pull-quotes */
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Body copy */
p { text-wrap: pretty; color: var(--fg-2); }
p.small { font-size: var(--fs-small); color: var(--fg-3); }

/* Links */
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); }

/* Hairline rule */
.rule { border: 0; border-top: var(--hairline-soft); }