/* ============================================================
   THE VIADUCT — Colours & Type
   Source of truth: The Viaduct Brand Guide v004
   Import alongside fonts/fonts.css
   ------------------------------------------------------------
   Tone of the system: calm, soft, never overstimulating.
   "We avoid bright, highly saturated colours or clashing
    combinations that might be overstimulating."
   ============================================================ */

@import url('fonts/fonts.css');

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --beige:            #F2F2E0;  /* The Viaduct Beige — calm, nature, the default canvas */
  --midnight-green:   #124F59;  /* Midnight Green — primary brand colour, body text, the wordmark */
  --moonstone-blue:   #73B0B8;  /* Moonstone Blue — calm, trust, stability */
  --wild-plum:        #8A455E;  /* Wild Plum — strength, perseverance */

  /* ---------- SECONDARY PALETTE (accents only — the dot, a bullet, an underline) ---------- */
  --saffron-mango:    #FFC04D;
  --light-orchid:     #E196D1;
  --bittersweet-red:  #FA6D5E;

  /* ---------- TINTS & SUPPORT (derived, for surfaces/borders/hovers) ---------- */
  --beige-deep:       #E7E7D0;  /* slightly deeper beige for section banding */
  --beige-warm:       #FAFAF0;  /* near-white warm surface for cards on beige */
  --green-900:        #0C3B43;  /* pressed / deepest green */
  --green-700:        #124F59;  /* = midnight green */
  --green-tint-12:    #E3ECED;  /* 12% green wash on beige-warm */
  --moonstone-tint:   #DCEBED;  /* pale moonstone fill */
  --plum-tint:        #EADDE2;  /* pale plum fill */
  --line-soft:        #D7D7C2;  /* hairline / keyline on beige */
  --line-on-white:    #E0E0CD;

  /* ---------- SEMANTIC COLOUR ROLES ---------- */
  --bg:               var(--beige);
  --bg-raised:        var(--beige-warm);
  --surface:          #FFFFFF;
  --fg1:              var(--midnight-green);   /* primary text */
  --fg2:              #3C6A72;                 /* secondary text — softened green */
  --fg3:              #6E9298;                 /* tertiary / captions */
  --fg-on-dark:       var(--beige);            /* text on midnight-green */
  --accent:           var(--moonstone-blue);
  --brand:            var(--midnight-green);
  --focus-ring:       #FFC04D;                 /* saffron focus ring — visible, warm */
  --border:           var(--line-soft);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: 'Inclusive Sans', Tahoma, 'Segoe UI', system-ui, sans-serif;
  --font-system: Tahoma, 'Segoe UI', system-ui, sans-serif; /* email / PPT fallback per guide */

  /* ---------- TYPE SCALE (rem, 1rem = 16px) ---------- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  3.75rem;   /* 60px */
  --text-5xl:  4.75rem;   /* 76px */

  /* ---------- WEIGHTS ---------- */
  --fw-regular: 400;   /* body, subheaders */
  --fw-medium:  500;
  --fw-bold:    700;   /* headers */

  /* ---------- TRACKING (brand spec: headers & body Tracking -40 = -0.04em) ---------- */
  --track-tight: -0.04em;   /* default per brand guide */
  --track-normal: 0;
  --track-wide: 0.08em;     /* small caps / eyebrow labels */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.6;   /* generous — readability is a brand value */

  /* ---------- RADII (soft, rounded — echoes the circular brand language) ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- SPACING (8px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- SHADOWS (soft, low-contrast — calm, never harsh) ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 79, 89, 0.06);
  --shadow-sm: 0 2px 8px rgba(18, 79, 89, 0.07);
  --shadow-md: 0 8px 24px rgba(18, 79, 89, 0.09);
  --shadow-lg: 0 18px 48px rgba(18, 79, 89, 0.12);

  /* ---------- MOTION (gentle, never bouncy) ---------- */
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Sentence case, tracking -40 (per brand guide). Headers = Bold,
   subheaders & body = Regular.
   ============================================================ */

.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}
.subhead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--fg2);
  text-wrap: pretty;
}
.body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  text-wrap: pretty;
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: 1.55;
  letter-spacing: var(--track-tight);
  color: var(--fg2);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--moonstone-blue);
}
.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--fg3);
}

/* Optional base reset hook */
.viaduct-base {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  letter-spacing: var(--track-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   LOGO — NEVER STRETCH
   The wordmark must keep its native aspect ratio at all times.
   Scale it freely, but never distort x or y.
   RULE: size a logo by ONE axis only (set height OR width, leave
   the other `auto`). Add class="viaduct-logo" to every logo <img>
   as a belt-and-braces safeguard — it forces aspect-ratio lock
   and object-fit: contain so even a fixed width AND height box
   will letterbox rather than distort.
   ============================================================ */
.viaduct-logo {
  width: auto;          /* derive width from height by default */
  object-fit: contain;  /* if both dims are forced, letterbox — never stretch */
  object-position: left center;
  aspect-ratio: auto;   /* honour intrinsic ratio */
  max-width: 100%;
  display: block;
}
.viaduct-logo[data-align="center"] { object-position: center; margin-inline: auto; }