/* ==========================================================================
   HEG — Design tokens
   Single source of truth for colour, type, space and motion.
   Values derived from the supplied logo artwork.
   Nothing in this file draws anything. Change values here, not in components.
   ========================================================================== */

:root {

  /* --- Brand ------------------------------------------------------------ */
  --heg-navy:        #132D48;
  --heg-navy-deep:   #0D1F33;   /* footers, deepest ground */
  --heg-navy-mid:    #1B3C5E;   /* gradient partner to --heg-navy */
  --heg-navy-soft:   #2A5480;   /* dividers on dark, muted icons */

  --heg-gold:        #C09B4B;   /* the brand gold: fills, rules, frames, text on navy */
  --heg-gold-light:  #D4B271;   /* hover state */
  --heg-gold-deep:   #A5823A;   /* decorative dark gold: portrait frames, active states */

  /* Gold as *text* on a light ground is a separate value, and has to be.
     #A5823A on white is 3.6:1 and on cream 3.3:1, both below WCAG AA, and it
     carries every eyebrow, link and "learn more" on the site. #856828 is the
     same hue held down to 5.2:1 on white and 4.8:1 on cream. Use --heg-gold
     for anything drawn rather than read. */
  --heg-gold-ink:    #856828;

  --heg-cream:       #F8F3ED;
  --heg-cream-deep:  #EDE4D9;   /* alternating band, card edges */
  --heg-white:       #FFFFFF;

  /* --- Semantic --------------------------------------------------------- */
  --heg-bg:              var(--heg-white);
  --heg-bg-alt:          var(--heg-cream);
  --heg-bg-dark:         var(--heg-navy);

  /* Alphas are set by contrast, not by eye. Measured against both light
     grounds: muted 7.0:1 on white / 6.6:1 on cream, faint 4.8:1 / 4.6:1.
     The old 0.68 / 0.45 pair put every small label at 2.6:1. */
  --heg-ink:             var(--heg-navy);              /* body text on light */
  --heg-ink-muted:       rgba(19, 45, 72, 0.78);
  --heg-ink-faint:       rgba(19, 45, 72, 0.66);

  --heg-on-dark:         var(--heg-cream);             /* text on navy */
  --heg-on-dark-muted:   rgba(248, 243, 237, 0.72);
  --heg-on-dark-faint:   rgba(248, 243, 237, 0.56);   /* 5.0:1 on navy; 0.38 was 3.1:1 */

  --heg-border:          rgba(19, 45, 72, 0.12);
  --heg-border-gold:     rgba(192, 155, 75, 0.45);
  --heg-border-on-dark:  rgba(248, 243, 237, 0.16);

  --heg-focus:           var(--heg-gold);

  /* --- Type families ---------------------------------------------------- */
  --heg-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --heg-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Type scale (fluid) ----------------------------------------------- */
  --heg-fs-h1:      clamp(2.4rem, 5.6vw, 4rem);
  --heg-fs-h2:      clamp(1.85rem, 3.9vw, 2.95rem);
  --heg-fs-h3:      clamp(1.45rem, 2.6vw, 1.9rem);
  --heg-fs-h4:      clamp(1.1rem, 1.75vw, 1.3rem);
  --heg-fs-lead:    clamp(1.05rem, 1.9vw, 1.25rem);
  --heg-fs-body:    1rem;
  --heg-fs-sm:      0.9rem;
  --heg-fs-xs:      0.8rem;
  --heg-fs-eyebrow: 0.78rem;

  /* --- Type detail ------------------------------------------------------ */
  --heg-lh-tight:    1.15;
  --heg-lh-heading:  1.25;
  --heg-lh-body:     1.7;

  --heg-ls-display:  0.01em;
  --heg-ls-wordmark: 0.14em;   /* matches the logo lockup */
  --heg-ls-eyebrow:  0.22em;
  --heg-ls-button:   0.08em;

  /* Cormorant Garamond is delicate at 400. Headings default to 600 so they hold
     their own against Inter body copy. Do not drop below 500 on light grounds. */
  --heg-fw-display: 600;

  --heg-fw-light:  300;
  --heg-fw-normal: 400;
  --heg-fw-medium: 500;
  --heg-fw-semi:   600;

  /* --- Space ------------------------------------------------------------ */
  --heg-s-1:  0.25rem;
  --heg-s-2:  0.5rem;
  --heg-s-3:  0.75rem;
  --heg-s-4:  1rem;
  --heg-s-5:  1.5rem;
  --heg-s-6:  2rem;
  --heg-s-7:  3rem;
  --heg-s-8:  4rem;
  --heg-s-9:  6rem;

  --heg-space-section: clamp(4rem, 8vw, 7rem);   /* vertical rhythm between sections */
  --heg-space-block:   clamp(2rem, 4vw, 3rem);   /* between blocks inside a section */
  --heg-gutter:        clamp(1.25rem, 4vw, 2.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --heg-container:        1200px;
  --heg-container-narrow: 820px;
  --heg-measure:          68ch;   /* max line length for readable prose */

  /* --- Surface ---------------------------------------------------------- */
  --heg-radius:    2px;   /* the brand is classical — keep corners sharp */
  --heg-radius-lg: 4px;
  --heg-hairline:  1px;

  /* The one deliberate exception to sharp corners. A portrait is the only
     photographic element on the site; softening it separates the person from
     the documents around them. Nothing else may use this. */
  --heg-radius-portrait: clamp(12px, 1.7vw, 20px);
  --heg-frame:           2px;   /* the gold rule drawn tight to a portrait */
  --heg-frame-ring:      2px;   /* the second rule, held off it */

  /* Shadows are navy, never black. Black on a warm cream ground reads grey. */
  --heg-shadow-sm: 0 1px 2px rgba(19, 45, 72, 0.06);
  --heg-shadow-md: 0 8px 24px rgba(19, 45, 72, 0.08);
  --heg-shadow-lg: 0 18px 48px rgba(19, 45, 72, 0.12);
  --heg-shadow-header: 0 6px 24px rgba(6, 16, 28, 0.32);   /* header on navy */

  --heg-ring: 0 0 0 3px rgba(192, 155, 75, 0.20);   /* soft gold focus halo */

  /* --- Motion ----------------------------------------------------------- */
  --heg-dur:      0.3s;
  --heg-dur-slow: 0.55s;
  --heg-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Breakpoints -----------------------------------------------------------
   Custom properties cannot be used in media queries, so these are fixed and
   documented here. They match Elementor's defaults so native and custom
   sections break at identical widths.

     Desktop   >= 1025px
     Tablet    <= 1024px

   Exception: the site header collapses to its mobile nav at <= 1249px, because
   eight menu items plus the CTA do not fit beside the brand below that width.
     Mobile    <=  767px
     Small     <=  480px
   -------------------------------------------------------------------------- */