/* ============================================================
   TRUE SIGNAL COACHING — DESIGN VARIABLES
   ------------------------------------------------------------
   This is the file you edit to change how the site LOOKS.
   Every colour, font and size below was taken directly from
   the original site — nothing here is new.

   Change a value once here and it updates on all five pages.
   ============================================================ */

:root {

  /* ---------- COLOURS ---------- */

  /* Main brand colours */
  --color-teal:        #3BA8B8;  /* hero background, third accent */
  --color-teal-dark:   #2E92A2;  /* navigation link text */
  --color-deep:        #1A3A42;  /* main text + dark footer background */
  --color-deep-button: #1A5C6E;  /* dark buttons */

  /* Accent colours */
  --accent-emerald:    #10C9A0;  /* eyebrows, "Signal" green */
  --accent-rose:       #E8527A;  /* italic highlights, pink */
  --accent-gold:       #FFD966;  /* Step 4 / Graduation card */
  --accent-gold-text:  #D4A500;  /* Step 4 label text */
  --accent-slate:      #738A95;  /* "If nothing changes" bar */

  /* Text */
  --text-primary:      #1A3A42;
  --text-muted:        #4A7880;

  /* Backgrounds */
  --bg-white:          #FFFFFF;
  --bg-cream:          #FAF3E8;  /* warm cream cards */
  --bg-pale:           #FAFEFF;  /* pale blue section background */
  --bg-offwhite:       #FCFBF7;  /* stakes / consequence panels */
  --bg-photo:          #A8D8E4;  /* placeholder behind the photo */
  --border-soft:       #EAE0D0;  /* card borders */

  /* Transparent tints (used for card fills) */
  --tint-emerald:      rgba(16,201,160,0.12);
  --tint-rose:         rgba(232,82,122,0.12);
  --tint-teal:         rgba(58,168,184,0.12);
  --tint-mint:         rgba(169,228,210,0.08);  /* testimonial snippet bubbles */
  --tint-emerald-soft: rgba(16,201,160,0.08);
  --tint-rose-soft:    rgba(232,82,122,0.08);
  --tint-teal-soft:    rgba(58,168,184,0.08);


  /* ---------- FONTS ---------- */

  --font-display: 'Cormorant Garamond', serif;  /* headings */
  --font-body:    'DM Sans', sans-serif;        /* everything else */


  /* ---------- FONT SIZES ---------- */
  /* clamp(smallest, scales-with-screen, largest) */

  --size-h1:       clamp(2.8rem, 6vw, 4.2rem);
  --size-h2:       clamp(2.2rem, 4.5vw, 3rem);
  --size-h3:       1.4rem;
  --size-lede:     clamp(1.3rem, 3vw, 1.6rem);

  /* --- Section text sizes you're most likely to tweak --- */
  /* "Cut through the noise. Find your signal." in the hero */
  --size-hero-tagline: clamp(1.9rem, 4.5vw, 2.8rem);
  /* "Technical excellence got you here..." below it */
  --size-hero-close:   clamp(1.3rem, 3vw, 1.6rem);
  /* The three "What Becomes Possible" cards */
  --size-possible:     var(--size-body);
  /* The "If Nothing Changes" panel */
  --size-stakes:       var(--size-body);
  /* FAQ question and answer */
  --size-faq-q:        1.05rem;
  --size-faq-a:        var(--size-body);
  /* Testimonial quote bubbles (serif italic — needs to run larger to match) */
  --size-snippet:      1.15rem;
  /* Sub-page hero sub-heading (coaching / about / organisations / testimonials) */
  --size-page-lede:    1.25rem;
  --size-body:     0.95rem;   /* standard body text everywhere */
  --size-body-lg:  0.95rem;   /* was 1.1rem — now matched to body text */
  --size-eyebrow:  0.85rem;
  --size-small:    0.85rem;


  /* ---------- SPACING ---------- */

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;   /* standard section padding (top/bottom) */
  --space-2xl: 5rem;   /* roomy section padding */

  --section-gap: 3rem; /* space between sections */


  /* ---------- SHAPE & DEPTH ---------- */

  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 24px;

  --shadow-card:  0 2px 8px rgba(26,58,66,0.08);
  --shadow-hero:  0 8px 24px rgba(0,0,0,0.15);
  --shadow-btn:   0 4px 12px rgba(0,0,0,0.15);


  /* ---------- LAYOUT WIDTHS ---------- */

  --width-narrow:  720px;
  --width-text:    880px;
  --width-content: 920px;
  --width-wide:    1000px;
}