/* ============================================================
   Travel Path Media — Foundations
   Tokens for colour, typography, spacing, radius, shadows.
   Canada's premium travel media network.
   ============================================================ */

/* ------------------------------------------------------------
   Web fonts. Approved weights only: 300 / 400 / 500 / 700.
   Italic reserved for pull quotes.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("./fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Poppins-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Poppins-Italic.ttf") format("truetype");
}

:root {
  /* ----- Brand colour tokens (raw) ----- */
  --tpm-teal:       #002830;  /* Primary. Dominant. Surfaces, headers. */
  --tpm-gold:       #A87020;  /* Accent. CTA highlights, key stats. */
  --tpm-white:      #FFFFFF;
  --tpm-cream:      #F5F0EA;
  --tpm-black:      #0A0A0A;  /* Type contrast only. */

  /* Extended — data viz + UI states only. */
  --tpm-green:      #00564F;
  --tpm-yellow:     #F5E8C0;
  --tpm-grey:       #4C4C4C;
  --tpm-shadow:     #F0F0F0;

  /* Tints used for hover / press / borders. Derived, not part of core palette. */
  --tpm-teal-700:   #003a44;  /* Hover on teal surfaces */
  --tpm-teal-900:   #001b21;  /* Press / depth */
  --tpm-gold-600:   #c08533;  /* Hover on gold */
  --tpm-gold-800:   #8a5a14;  /* Press on gold */
  --tpm-cream-200:  #ebe4d9;  /* Border on cream surface */
  --tpm-stroke:     #D9D4CC;  /* Hairline divider on cream */
  --tpm-stroke-on-teal: rgba(245, 240, 234, 0.16);

  /* ----- Semantic colour roles ----- */
  --color-bg:           var(--tpm-white);
  --color-surface:      var(--tpm-cream);
  --color-surface-deep: var(--tpm-teal);
  --color-fg:           var(--tpm-black);
  --color-fg-muted:     var(--tpm-grey);
  --color-fg-on-teal:   var(--tpm-cream);
  --color-fg-on-teal-muted: rgba(245, 240, 234, 0.72);
  --color-accent:       var(--tpm-gold);
  --color-border:       var(--tpm-stroke);
  --color-border-strong:#cdc6bb;
  --color-focus:        var(--tpm-teal);

  /* ----- Typography ----- */
  --font-sans: "Poppins", Arial, Helvetica, sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Type scale — display from stat blocks (64-96px) and body 14-18px. */
  --fs-display-xl: 96px;   /* hero stat numerals */
  --fs-display-lg: 72px;   /* hero headings */
  --fs-display-md: 56px;   /* section headers */
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-eyebrow: 0.12em;  /* the only place caps are allowed */

  /* ----- 8px spacing scale ----- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;

  /* ----- Layout ----- */
  --container-max: 1280px;
  --container-narrow: 1200px;
  --section-pad-y-desktop: 96px;
  --section-pad-y-mobile:  48px;

  /* ----- Radii ----- */
  --radius-input: 4px;   /* form fields */
  --radius-card:  8px;   /* cards & buttons */
  --radius-pill:  999px; /* small badges */

  /* ----- Borders ----- */
  --bw-hairline: 1px;
  --bw-button:   1.5px;  /* secondary button stroke */

  /* ----- Shadows. Subtle only. Never heavy. ----- */
  --shadow-sm: 0 1px 2px rgba(0, 40, 48, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 40, 48, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 40, 48, 0.10);
  --shadow-focus: 0 0 0 3px rgba(0, 40, 48, 0.18);

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ------------------------------------------------------------
   Element baseline.
   Apply by importing this file at the top of any document.
   ------------------------------------------------------------ */
html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Text wrap niceties */
h1, h2, h3, h4 { text-wrap: balance; }
p, li          { text-wrap: pretty; }

/* Headings — left-aligned by default. Centre only for hero / cover / callout. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-fg);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }

p {
  margin: 0;
  max-width: 65ch;     /* keeps line length 50-75 chars */
  line-height: var(--lh-loose);
}

a {
  color: var(--tpm-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 40, 48, 0.35);
  transition: text-decoration-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
a:hover {
  text-decoration-color: var(--tpm-gold);
  color: var(--tpm-gold);
}

/* Pull quote — italic only here */
blockquote {
  margin: 0;
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--color-fg);
  border-left: var(--bw-button) solid var(--tpm-gold);
  padding-left: var(--space-3);
  max-width: 60ch;
}

/* The eyebrow — display-only ALL CAPS with letter-spacing. */
.tpm-eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--tpm-gold);
}

/* Stat block primitives. Numerals in Light or Bold. Caption Medium 14-16px. */
.tpm-stat-numeral {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--tpm-teal);
  font-variant-numeric: lining-nums tabular-nums;
}
.tpm-stat-caption {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-fg-muted);
  margin-top: var(--space-1);
}

/* Smart quotes by default. */
q       { quotes: "\201C" "\201D" "\2018" "\2019"; }
q::before { content: open-quote; }
q::after  { content: close-quote; }

/* Selection in brand teal. */
::selection { background: var(--tpm-gold); color: var(--tpm-white); }

/* Focus ring. Teal, accessible. */
:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-card);
}