/* ============================================================
   Sanctuary Coaching — Colors & Type Foundations
   A premium yet deeply human coaching brand
   ============================================================ */

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

:root {
  /* ---------- Color: Brand ---------- */
  --color-petrol:           #315B5C;  /* Primary — Deep Petrol */
  --color-petrol-deep:      #234445;  /* Hover / press */
  --color-petrol-soft:      #4A7475;  /* Subtle variant */

  --color-sage:             #A8B5A2;  /* Secondary — Sage */
  --color-sage-soft:        #C8D0C2;  /* Soft sage backgrounds */
  --color-sage-deep:        #8A9885;  /* Sage hover */

  --color-beige:            #D8CBBE;  /* Accent — warm sand */
  --color-beige-soft:       #ECE4D9;  /* Whisper beige */

  /* ---------- Color: Surface ---------- */
  --color-bg:               #F7F5F1;  /* Warm off-white — base page */
  --color-bg-elevated:      #FBFAF6;  /* Cards, raised surfaces */
  --color-bg-tint:          #EFEBE3;  /* Section dividers, hover */

  /* ---------- Color: Ink (text) ---------- */
  --color-ink:              #2B2B2B;  /* Primary text */
  --color-ink-muted:        #5E5E5E;  /* Secondary text */
  --color-ink-soft:         #8A8682;  /* Tertiary — captions, eyebrows */
  --color-ink-on-dark:      #F7F5F1;  /* Text on petrol */

  /* ---------- Color: Borders ---------- */
  --color-border:           #E4DED3;  /* Default hairline */
  --color-border-soft:      #EDE8DE;  /* Lightest divider */
  --color-border-strong:    #C9C1B3;  /* Emphasis borders */

  /* ---------- Color: Semantic ---------- */
  --color-focus:            #315B5C;  /* Focus ring */
  --color-link:             #315B5C;
  --color-link-hover:       #234445;

  /* ---------- Type: Families ---------- */
  --font-display:           'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:              'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type: Scale (fluid, generous) ---------- */
  --fs-hero:                clamp(3.5rem, 6.5vw, 6rem);     /* 56–96 */
  --fs-display:             clamp(2.75rem, 4.5vw, 4.25rem); /* 44–68 */
  --fs-h1:                  clamp(2.25rem, 3.6vw, 3.25rem); /* 36–52 */
  --fs-h2:                  clamp(1.75rem, 2.6vw, 2.25rem); /* 28–36 */
  --fs-h3:                  1.5rem;     /* 24 */
  --fs-h4:                  1.25rem;    /* 20 */
  --fs-lead:                1.25rem;    /* 20 — opening paragraphs */
  --fs-body:                1.0625rem;  /* 17 — comfortable reading */
  --fs-body-sm:             0.9375rem;  /* 15 */
  --fs-caption:             0.8125rem;  /* 13 */
  --fs-eyebrow:             0.75rem;    /* 12 — small caps eyebrow */

  /* ---------- Type: Weights ---------- */
  --fw-display-light:       300;
  --fw-display-regular:     400;
  --fw-display-medium:      500;
  --fw-body-regular:        400;
  --fw-body-medium:         500;
  --fw-body-semibold:       600;

  /* ---------- Type: Line + Tracking ---------- */
  --lh-display:             1.08;
  --lh-heading:             1.18;
  --lh-body:                1.65;
  --lh-tight:               1.3;
  --tracking-display:       -0.015em;
  --tracking-body:          0;
  --tracking-eyebrow:       0.18em;

  /* ---------- Spacing (8pt-ish, breathable) ---------- */
  --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:                4.5rem;    /* 72 */
  --space-9:                6.5rem;    /* 104 */
  --space-10:               9rem;      /* 144 — section gutters */

  /* ---------- Radii (soft) ---------- */
  --radius-xs:              4px;
  --radius-sm:              8px;
  --radius-md:              14px;
  --radius-lg:              22px;
  --radius-xl:              32px;
  --radius-pill:            999px;

  /* ---------- Shadow (whisper-soft, never harsh) ---------- */
  --shadow-xs:              0 1px 2px rgba(43, 43, 43, 0.04);
  --shadow-sm:              0 4px 14px rgba(43, 43, 43, 0.05);
  --shadow-md:              0 12px 32px rgba(43, 43, 43, 0.06);
  --shadow-lg:              0 24px 60px rgba(43, 43, 43, 0.08);

  /* ---------- Motion (slow, calm) ---------- */
  --ease-soft:              cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-quart:         cubic-bezier(0.25, 1, 0.5, 1);
  --dur-quick:              180ms;
  --dur-base:               320ms;
  --dur-slow:               560ms;
  --dur-section:            900ms;

  /* ---------- Layout ---------- */
  --content-narrow:         42rem;     /* ~672 — prose width */
  --content-base:           64rem;     /* ~1024 */
  --content-wide:           80rem;     /* ~1280 */
  --gutter:                 clamp(1.25rem, 5vw, 4rem);
}

/* ============================================================
   Semantic elements
   ============================================================ */

html, body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display, .hero {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: var(--fw-display-regular);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: pretty;
}

.hero        { font-size: var(--fs-hero);    line-height: var(--lh-display); font-weight: var(--fw-display-light); }
.display     { font-size: var(--fs-display); line-height: var(--lh-display); }
h1           { font-size: var(--fs-h1);      line-height: var(--lh-heading); }
h2           { font-size: var(--fs-h2);      line-height: var(--lh-heading); }
h3           { font-size: var(--fs-h3);      line-height: var(--lh-tight); font-family: var(--font-body); font-weight: var(--fw-body-semibold); letter-spacing: 0; }
h4           { font-size: var(--fs-h4);      line-height: var(--lh-tight); font-family: var(--font-body); font-weight: var(--fw-body-semibold); letter-spacing: 0; }

p, li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-ink-muted);
  font-weight: var(--fw-body-regular);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-soft);
  font-weight: var(--fw-body-medium);
}

em, .editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display-regular);
}

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(49, 91, 92, 0.25);
  transition: color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
}
a:hover {
  color: var(--color-link-hover);
  border-bottom-color: var(--color-link-hover);
}

::selection {
  background: rgba(49, 91, 92, 0.15);
  color: var(--color-ink);
}