/* ==========================================================================
   Innervana Coaching — base.css
   Design tokens, reset, base typography.
   Single source of truth for colour, type, spacing, layout.
   ========================================================================== */

:root {
  /* ==========================================================================
     INNERVANA — WARM DAWN
     Derived from the logo: coral heart, peach rays, golden light.
     Sage leads on actions; forest grounds; coral and gold accent.
     Contrast-checked against WCAG AA — ratios noted per token.
     ========================================================================== */

  /* --- Backgrounds --- */
  --color-bg-primary:    #FBF8F4;   /* Warm cream, lightened 27 Sep 2026 (was #F8F2EA) */
  --color-bg-secondary:  #F6F0E8;   /* Peach linen, lightened 27 Sep 2026 (was #F3E7DB) */
  --color-bg-dark:       #4F6247;   /* Forest — footer + dark sections. Cream text 5.95:1 */
  --color-bg-sage:       #A8C4A4;   /* Light sage band. ONLY forest text passes here (5.02:1) */
  --color-bg-hero:       #FDF0E4;   /* Pale apricot, lightened. Forest text 8.49:1 */
  --color-bg-bar:        #FDFCFA;   /* Pale off-white. The nav bar only, paler than the page */

  /* --- Action (sage leads) --- */
  --color-cta:           #557A4F;   /* Primary buttons. 4.90:1 w/ white — passes AA */
  --color-cta-hover:     #46683F;   /* Hover. 6.34:1 w/ white */
  --color-sage:          #5E8A57;   /* Decorative sage — not for small text on light */
  --color-sage-light:    #8FAE8B;   /* Soft highlight, rules, dividers */

  /* --- Warm accents (straight from the logo) --- */
  --color-coral:         #E0685C;   /* Decorative coral — large shapes, washes */
  --color-coral-text:    #B23B30;   /* Coral for TEXT. 5.30:1 cream, 4.85:1 linen.
                                       #C04337 was 4.21:1 on linen and failed AA */
  --color-gold:          #F0C45A;   /* Golden light — highlights, tags */
  --color-peach:         #F6A984;   /* Connective peach — washes, gradients */

  /* --- Text --- */
  --color-text-primary:  #3A4A34;   /* Forest — headings. 8.55:1 on cream */
  --color-text-body:     #4A5548;   /* Body copy. 7.03:1 on cream */
  --color-text-muted:    #5C6C58;   /* Captions. 5.05:1 cream / 4.61:1 linen */
  --color-text-light:    #F8F2EA;   /* On forest. 8.55:1 */
  --color-accent-on-dark:#F6D98E;   /* Pale gold. 4.80:1 on #4F6247 — the full gold fails at 4.02 */

  /* --- Borders --- */
  --color-border:        #EFE9E1;   /* Subtle warm border, lifted with the grounds */
  --color-border-strong: #E9DFD6;   /* More visible border */

  /* --- Signature gradient (the logo, as a graphic device) --- */
  --gradient-dawn:       linear-gradient(90deg, #F0C45A 0%, #F6A984 50%, #E0685C 100%);
  --gradient-dawn-wash:  linear-gradient(160deg, #FBF3E8 0%, #F9EADC 55%, #F6DFD0 100%);

  /* --- Fonts --- */
  /* Lora for display, DM Sans for body. Two faces, no third.
     Parisienne was the accent face for the anchoring phrases from 15 to 27
     Sep 2026. It was retired because the script read as pasted on, and the
     anchor lines now sit in Lora italic like every other pull quote. The font
     is no longer requested on any page. To bring it back, restore
     --font-accent below, add &family=Parisienne to the Google Fonts link in
     all four pages, and give .pull-quote--anchor its own font-family. */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* --- Type scale --- */
  --text-xs:   0.75rem;    /* 12px — captions, labels */
  --text-sm:   0.875rem;   /* 14px — secondary body */
  --text-base: 1.0625rem;  /* 17px — primary body */
  --text-lg:   1.25rem;    /* 20px — lead paragraphs */
  /* The four display sizes below were trimmed about 13% when Lora replaced
     Cormorant Garamond. Lora's x-height is 0.500em against Cormorant's
     0.386em, so the same number renders far larger. These values hold the
     previous visual weight. Every one of them is display type only; the body
     sizes above are untouched. */
  --text-xl:   1.3125rem;  /* 21px — h3, small headings */
  --text-2xl:  1.75rem;    /* 28px — h2 */
  --text-3xl:  2.375rem;   /* 38px — h1 (desktop) */
  --text-hero: 3rem;       /* 48px — hero headlines (desktop) */

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --width-content:    72rem;   /* 1152px — max content width */
  --width-text:       44rem;   /*  704px — text column max width */
  --width-narrow:     36rem;   /*  576px — narrow/centred content */
  --border-radius:    0.5rem;  /*    8px — components */
  --border-radius-lg: 1rem;    /*   16px — cards, sections */
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--color-bg-primary);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height: auto matters. Every img on the site carries width and height
   attributes, which is right: they reserve the space and stop the page
   jumping as images load. But the attribute also sets a presentational
   height, so any rule that overrides width alone stretches the picture. That
   is exactly what happened to the portrait on the home page: 496px wide and
   still 1500px tall. Do not remove this. */
img,
picture,
svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

button { font: inherit; }

/* ==========================================================================
   Base typography
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { max-width: 68ch; }

@media (min-width: 1024px) {
  h1 { font-size: var(--text-hero); }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}

.section {
  padding-block: var(--space-24);
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-32); }
}

/* Accessibility: visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition: none !important; }
}