/* ---------------------------------------------------------------------------
   3Degrees Design Tokens
   Pulled directly from the 3Degrees Brand Style Guide.
   Brand fonts: Arnhem Blond (display) + Montserrat (UI / body).
   Substitute fonts (per brand book): Lora (with Georgia as fallback) + Montserrat.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* Georgia — official brand fallback (per brand book: Georgia is backup to Lora).
   File supplied by the user; sits at the end of the serif stack. */
@font-face {
  font-family: "Georgia";
  src: url("../fonts/georgia.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand colors (from brand book) ------------------------------------ */
  --c-navy:        #08394B; /* Primary */
  --c-light-teal:  #62BBBB; /* Light Accent 3 — use with Navy */
  --c-goldenrod:   #FCB414; /* Light Accent — Primary CTA */
  --c-dark-teal:   #0D7A83; /* Dark Accent — use with Sand/White, Secondary CTA */
  --c-orange:      #FF9648; /* Light Accent 2 */
  --c-sand:        #F5F4EC; /* Light Neutral */
  --c-light-gray:  #C7C6C2; /* Medium Neutral */
  --c-dark-gray:   #5C5C61; /* Dark Neutral */
  --c-dark-sand:   #EEEDE7; /* Widescreen BG */
  --c-red:         #E03C31; /* Error */
  --c-white:       #FFFFFF;

  /* Tints (computed harmonics — for hover/press, dividers, surfaces) */
  --c-navy-90:    #1A4A5C;
  --c-navy-70:    #3D6979;
  --c-navy-30:    #B6C3CA;
  --c-navy-10:    #E6EBEE;
  --c-goldenrod-hover: #E9A40A;   /* darker on hover */
  --c-goldenrod-press: #C88A05;
  --c-dark-teal-hover: #0B6A72;
  --c-dark-teal-press: #095058;

  /* --- Semantic surfaces -------------------------------------------------- */
  --bg-page:        var(--c-white);
  --bg-widescreen:  var(--c-dark-sand);   /* wide hero / section bands */
  --bg-soft:        var(--c-sand);        /* cards, callouts on white */
  --bg-inverse:     var(--c-navy);        /* dark sections, footer */
  --bg-card:        var(--c-white);
  --border:         var(--c-light-gray);
  --border-soft:    rgba(8, 57, 75, 0.10);
  --divider:        rgba(8, 57, 75, 0.14);

  /* --- Semantic foreground ----------------------------------------------- */
  --fg-strong:      var(--c-navy);        /* headlines, primary text */
  --fg-default:     #20323B;              /* body text — a hair softer than navy */
  --fg-muted:       var(--c-dark-gray);   /* metadata, captions */
  --fg-on-inverse:  var(--c-white);
  --fg-on-inverse-muted: rgba(255,255,255,0.78);
  --fg-link:        var(--c-dark-teal);
  --fg-link-hover:  var(--c-dark-teal-hover);
  --fg-error:       var(--c-red);

  /* --- Accent semantics -------------------------------------------------- */
  --accent-primary:   var(--c-goldenrod); /* primary CTAs */
  --accent-secondary: var(--c-dark-teal); /* secondary CTAs on light */
  --accent-tertiary:  var(--c-light-teal);/* dark-bg accent */
  --accent-warm:      var(--c-orange);    /* highlights, tags */

  /* --- Type families ----------------------------------------------------- */
  /* Brand serif: Lora (web-licensed stand-in for the paid Arnhem Blond).
     Georgia is the official brand fallback per the brand book.            */
  --font-display: "Lora", "Georgia", "Times New Roman", serif;
  --font-serif:   "Lora", "Georgia", "Times New Roman", serif;
  --font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type scale (px — clamp where useful) ------------------------------ */
  --fs-display:  clamp(48px, 6vw, 80px);  /* hero */
  --fs-h1:       clamp(36px, 4.2vw, 56px);
  --fs-h2:       clamp(28px, 3.0vw, 40px);
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-eyebrow:  13px;   /* uppercase tag above sections */
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;

  /* Line heights */
  --lh-tight:   1.08;
  --lh-display: 1.12;
  --lh-heading: 1.22;
  --lh-body:    1.6;
  --lh-snug:    1.45;

  /* Tracking */
  --ls-eyebrow: 0.14em;
  --ls-button:  0.04em;
  --ls-display: -0.01em;

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

  /* --- Radii (from brand book) ------------------------------------------ */
  --r-button:  30px;   /* pill */
  --r-box:     0px;    /* boxes are sharp-cornered */
  --r-pill:    999px;
  --r-input:   2px;    /* very subtle */
  --r-card:    0px;    /* cards are square */

  /* --- Shadow (single brand shadow) ------------------------------------- */
  --shadow-brand: 0 0 25px 0 rgba(0, 0, 0, 0.08); /* per brand book */
  --shadow-card-hover: 0 6px 32px 0 rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(13, 122, 131, 0.35);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1280px;
  --gutter:        24px;
}

/* ---------------------------------------------------------------------------
   Element-level baselines (semantic styles).
   Use as `<h1>`, `<p>`, `.eyebrow`, etc — or compose with utility classes.
   --------------------------------------------------------------------------- */

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  background: var(--bg-page);
}

/* Display / hero — serif. Tight, confident, modern but classical. */
.display,
h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}

.hero-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}

h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

small, .caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-dark-teal);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}