/* =========================================================================
   Soulful by Shef — Colors & Type tokens
   Editorial wellness. Earthy, soulful, credentialed.
   ========================================================================= */

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

:root {
  /* ---- Brand color: terracotta (sampled from logo) ---------------------- */
  --terracotta-900: #6E2E22;
  --terracotta-800: #843628;
  --terracotta-700: #A0463A;   /* PRIMARY brand, logo color */
  --terracotta-600: #B5594B;
  --terracotta-500: #C77565;
  --terracotta-400: #D99A8E;
  --terracotta-300: #E9BEB5;
  --terracotta-200: #F2D7D1;
  --terracotta-100: #F8E8E4;
  --terracotta-50:  #FBF2EF;

  /* ---- Sage accent (echoes leaf in logo, fertility/cycle cue) ----------- */
  --sage-900: #4F5B43;
  --sage-800: #677555;
  --sage-700: #8A9A7B;        /* PRIMARY sage */
  --sage-600: #A3B197;
  --sage-500: #BDC8B3;
  --sage-300: #D7DECF;
  --sage-100: #ECEFE5;
  --sage-50:  #F5F7F1;

  /* ---- Earthy neutrals: cream, ivory, sand ------------------------------ */
  --ivory:    #FBF8F3;        /* page background — warmest */
  --cream:    #F5EFE6;        /* card / section background */
  --sand:     #E8DFD1;        /* borders, dividers */
  --sand-dark:#C9BCA6;        /* deeper sand for emphasis borders */
  --stone:    #8A7E6B;        /* muted body, captions */
  --ink:      #2C241D;        /* primary text — warm near-black */
  --ink-soft: #5B4F44;        /* secondary text */

  /* ---- Pure neutrals (use sparingly) ------------------------------------ */
  --white: #FFFFFF;
  --black: #1A1410;

  /* ---- Semantic ---------------------------------------------------------- */
  --bg:        var(--ivory);
  --bg-alt:    var(--cream);
  --bg-deep:   var(--terracotta-900);

  --fg-1:      var(--ink);          /* headlines, primary body */
  --fg-2:      var(--ink-soft);     /* secondary body, lede */
  --fg-3:      var(--stone);        /* captions, meta */
  --fg-on-dark:#F5EFE6;             /* on terracotta-900 background */

  --accent:        var(--terracotta-700);  /* italic emphasis, links, CTA */
  --accent-hover:  var(--terracotta-800);
  --accent-soft:   var(--sage-700);        /* secondary accent */

  --border:        var(--sand);
  --border-strong: var(--sand-dark);

  /* feedback */
  --success: #6F8C5C;
  --warning: #C2864A;
  --error:   #B23A2B;

  /* ---- Type families ---------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---- Type scale (editorial: large, generous) -------------------------- */
  --fs-display: clamp(3.5rem, 7vw, 6rem);   /* hero */
  --fs-h1:      clamp(2.5rem, 4.5vw, 4rem); /* page H1 */
  --fs-h2:      clamp(2rem, 3.2vw, 2.75rem);
  --fs-h3:      clamp(1.5rem, 2.2vw, 1.875rem);
  --fs-h4:      1.25rem;
  --fs-lede:    clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body:    1rem;          /* 16px */
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;       /* tracking-wide uppercase */

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

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;   /* eyebrows */

  /* ---- Spacing (8pt grid, generous editorial whitespace) ---------------- */
  --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 — section padding */

  /* ---- Radii (sharp-edge, editorial) ------------------------------------ */
  --radius-xs: 2px;     /* buttons, inputs */
  --radius-sm: 4px;     /* small cards */
  --radius-md: 8px;
  --radius-arch-top: 200px 200px 4px 4px;  /* arched portrait */
  --radius-pill: 999px;

  /* ---- Borders ---------------------------------------------------------- */
  --border-hair: 1px solid var(--border);     /* default card border */
  --border-thin: 1px solid var(--border-strong);
  --border-accent: 1px solid var(--terracotta-700);

  /* ---- Shadows (whisper only — editorial = no drop shadows) ------------- */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(44, 36, 29, 0.04);
  --shadow-lift: 0 6px 24px -8px rgba(110, 46, 34, 0.12);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-soft:   cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-editorial: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   560ms;   /* fades on scroll */

  /* ---- Layout ----------------------------------------------------------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1280px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);
}

/* ---- Element defaults --------------------------------------------------- */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  font-weight: 400;
}
h1 { font-size: var(--fs-h1); font-weight: 400; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-snug);
}

/* Italic emphasis — the brand's signature "pulled" word */
.em-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  font-weight: 300;
  text-wrap: pretty;
}

p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

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

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

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

::selection { background: var(--terracotta-200); color: var(--ink); }