/* =========================================================
   TREC Advisory — Colors & Type
   ---------------------------------------------------------
   Brand: TREC Advisory (Hellerup, DK)
   Pillars: Treasury · Risk · Energy · Commodities
   Tagline: Strategic advice. Practical execution. Sustainable results.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap");

:root {
  /* ---------- Brand palette (verbatim from template) ---------- */
  --trec-ink:        #0F1E2E;  /* deep navy — text on light, optional dark surface */
  --trec-forest:     #1E3A35;  /* PRIMARY dark green — hero surfaces, headers */
  --trec-teal:       #3D6B6B;  /* mid teal — secondary accents, charts */
  --trec-gold:       #D4AF37;  /* gold — accent line, KPI numerals, arrow mark */
  --trec-fog:        #E6E8EA;  /* light neutral — page backgrounds, dividers */

  /* ---------- Extended neutrals (oklch derivations of --trec-fog) ---------- */
  --trec-paper:      #FFFFFF;
  --trec-paper-2:    #F5F6F7;  /* card background on light page */
  --trec-line:       #D9DCDF;  /* hairlines, dividers on light */
  --trec-line-2:     #B6BBC0;  /* stronger dividers, table rules */
  --trec-muted:      #6B7378;  /* secondary body text on light */

  /* ---------- Surface tokens (semantic) ---------- */
  --bg:              var(--trec-paper);
  --bg-alt:          var(--trec-fog);
  --bg-dark:         var(--trec-forest);
  --bg-deep:         var(--trec-ink);

  --fg:              var(--trec-ink);      /* primary text on light */
  --fg-muted:        var(--trec-muted);    /* secondary text on light */
  --fg-on-dark:      #FFFFFF;              /* primary text on dark surface */
  --fg-on-dark-muted:#B9C4C2;              /* secondary text on dark */

  --accent:          var(--trec-gold);     /* the one accent — use sparingly */
  --accent-ink:      #8C7220;              /* gold pressed/hover */

  --border:          var(--trec-line);
  --border-strong:   var(--trec-line-2);
  --border-on-dark:  rgba(255,255,255,0.14);

  /* ---------- Typography families ---------- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (slide / print friendly) ---------- */
  --fs-display:     56px;   /* hero — cover slide brand mark */
  --fs-h1:          40px;   /* slide titles, page H1 */
  --fs-h2:          28px;   /* section heads */
  --fs-h3:          20px;   /* card titles, pillar labels */
  --fs-eyebrow:     12px;   /* uppercase tracked labels (KONTAKT, AGENDA) */
  --fs-body:        17px;   /* primary body */
  --fs-body-sm:     15px;   /* dense body */
  --fs-caption:     13px;   /* captions, footnotes, slide numbers */
  --fs-numeral:     44px;   /* the big gold "01 02 03" agenda numerals */

  /* ---------- Line heights ---------- */
  --lh-tight:       1.12;
  --lh-snug:        1.28;
  --lh-normal:      1.5;
  --lh-loose:       1.7;

  /* ---------- Tracking ---------- */
  --tr-tight:       -0.01em;
  --tr-normal:      0;
  --tr-wide:        0.08em;     /* eyebrows, pillar labels */
  --tr-wider:       0.22em;     /* "TREASURY | RISK | ENERGY | COMMODITIES" */

  /* ---------- 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;

  /* ---------- Radii ---------- */
  --r-0: 0px;
  --r-1: 2px;     /* hairline buttons, micro */
  --r-2: 6px;     /* inputs, small cards */
  --r-3: 10px;   /* default card */
  --r-4: 16px;   /* large card */
  --r-pill: 999px;

  /* ---------- Elevation (light, conservative) ---------- */
  --shadow-1: 0 1px 2px rgba(15, 30, 46, 0.06), 0 1px 1px rgba(15, 30, 46, 0.04);
  --shadow-2: 0 6px 16px rgba(15, 30, 46, 0.08), 0 2px 4px rgba(15, 30, 46, 0.04);
  --shadow-3: 0 18px 40px rgba(15, 30, 46, 0.12), 0 6px 12px rgba(15, 30, 46, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(15, 30, 46, 0.06);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.2);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* =========================================================
   Semantic base styles
   ========================================================= */

html { color: var(--fg); background: var(--bg); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .display, .eyebrow {
  font-family: var(--font-display);
  font-weight: 600;        /* Poppins SemiBold per template */
  color: var(--fg);
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg);
}

/* Pillar string: "TREASURY | RISK | ENERGY | COMMODITIES" */
.pillars {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}

/* The big gold numerals (01 / 02 …) used on agenda + section dividers */
.numeral {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-numeral);
  color: var(--accent);
  line-height: 1;
  letter-spacing: var(--tr-tight);
}

p, li, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }

a { color: var(--trec-forest); text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }

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

/* The single gold accent rule used under section titles. */
.accent-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--accent);
  border: 0;
  margin: 12px 0 16px;
}

/* On-dark variants — use when surface is --bg-dark or --bg-deep */
.on-dark               { color: var(--fg-on-dark); }
.on-dark .eyebrow,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .display { color: var(--fg-on-dark); }
.on-dark p, .on-dark .body { color: var(--fg-on-dark); }
.on-dark .caption,
.on-dark .muted { color: var(--fg-on-dark-muted); }