/* =====================================================================
   Stougaard Plan ApS — Master Brand Tokens
   Cool, stringent, near-invisible. Inter only. Eucalyptus sparingly.
   ===================================================================== */

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

:root {
  /* ---------- Color: primitives ---------- */
  --stpl-black:       #0F0F0F;  /* primary text, logo, lines (near-black) */
  --stpl-white:       #FFFFFF;  /* background */
  --stpl-grey-50:     #F2F2F2;  /* section backgrounds, table headers */
  --stpl-grey-100:    #D9D9D9;  /* lines, separators, table borders */
  --stpl-grey-500:    #6B6B6B;  /* secondary text, captions, metadata */
  --stpl-eucalyptus:  #4A6B5C;  /* accent — labels, section titles */
  --stpl-oxblood:     #7C2E27;  /* reserved — dilemma cards in long reports only */

  /* Eucalyptus tint for buffer/zone fills (10% opacity) */
  --stpl-eucalyptus-10: rgba(74, 107, 92, 0.10);

  /* ---------- Color: semantic ---------- */
  --fg-primary:       var(--stpl-black);
  --fg-secondary:     var(--stpl-grey-500);
  --fg-accent:        var(--stpl-eucalyptus);
  --fg-critical:      var(--stpl-oxblood);

  --bg-page:          var(--stpl-white);
  --bg-section:       var(--stpl-grey-50);
  --bg-dark:          var(--stpl-black);

  --line-hairline:    var(--stpl-grey-100);
  --line-accent:      var(--stpl-eucalyptus);

  /* ---------- Type: families ---------- */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Type: weights ---------- */
  --fw-light:    300;  /* logo / display / section markers only */
  --fw-regular:  400;  /* body text */
  --fw-medium:   500;  /* titles, labels — NEVER bold (700) in body */

  /* ---------- Type: scale (print-oriented, in pt) ---------- */
  --fs-display:    32pt;
  --fs-h1:         24pt;
  --fs-h2:         16pt;
  --fs-h3:         12pt;
  --fs-body:       11pt;
  --fs-small:      9pt;
  --fs-label:      7.5pt;  /* eucalyptus versal labels */

  /* ---------- Type: web scale (px, for UI kits & screens) ---------- */
  --fs-display-px: 64px;
  --fs-h1-px:      32px;
  --fs-h2-px:      22px;
  --fs-h3-px:      16px;
  --fs-body-px:    15px;
  --fs-small-px:   13px;
  --fs-label-px:   11px;

  /* ---------- Letter spacing ---------- */
  --ls-logo:       0.02em;  /* logo, display titles */
  --ls-h1:         0.06em;  /* document titles (print) */
  --ls-h2:         0.03em;  /* section headings */
  --ls-h3:         0.02em;  /* subsection */
  --ls-body:       normal;
  --ls-label:      0.15em;  /* eucalyptus versal labels */
  --ls-auth:       0.20em;  /* auth-tags, kicker versals */
  --ls-tight:      -0.02em; /* display numbers */
  --ls-marker:     -0.06em; /* section markers (italic numerals) */

  /* ---------- Line heights ---------- */
  --lh-tight:      1.1;
  --lh-heading:    1.25;
  --lh-body:       1.5;
  --lh-loose:      1.65;

  /* ---------- Spacing (4pt base) ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ---------- Lines & hairlines ---------- */
  --border-hairline:  0.5pt solid var(--line-hairline);
  --border-rule:      1px solid var(--line-hairline);
  --border-accent:    2px solid var(--line-accent);
  --border-marker:    3px solid var(--line-accent);

  /* ---------- Radii ---------- */
  /* Brand prefers no rounded corners. Kept small for UI only. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;

  /* ---------- Logo box ---------- */
  --logo-pad:     15px;       /* 14–16 px padding */
  --logo-bg:      var(--stpl-black);
  --logo-fg:      var(--stpl-white);
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-px);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Document title / display */
.stpl-display {
  font-weight: var(--fw-light);
  font-size: var(--fs-display-px);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}

h1, .stpl-h1 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1-px);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
  margin: 0;
}

h2, .stpl-h2 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2-px);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-heading);
  color: var(--fg-accent); /* section titles in eucalyptus */
  margin: 0;
}

h3, .stpl-h3 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3-px);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
  margin: 0;
}

p, .stpl-body {
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-px);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  margin: 0 0 var(--sp-4) 0;
}

.stpl-small, small, caption, figcaption {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small-px);
  color: var(--fg-secondary);
  line-height: var(--lh-body);
}

/* Eucalyptus label — versal, tight tracking, section marker style */
.stpl-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-label-px);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Auth-tag / kicker — slightly looser tracking, right-aligned by default */
.stpl-kicker {
  font-weight: var(--fw-medium);
  font-size: var(--fs-label-px);
  letter-spacing: var(--ls-auth);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Metadata value — paired with .stpl-label above it */
.stpl-meta-value {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small-px);
  color: var(--fg-primary);
}

/* Display number (editorial) */
.stpl-display-number {
  font-weight: var(--fw-light);
  font-size: 72px;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--fg-primary);
}
.stpl-display-number--accent { color: var(--fg-accent); }
.stpl-display-number--oxblood {
  color: var(--fg-critical);
  font-style: italic;
}

/* Pullquote */
.stpl-pullquote {
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: 28px;
  line-height: 1.35;
  color: var(--fg-primary);
  border-top: var(--border-accent);
  border-bottom: var(--border-accent);
  padding: var(--sp-6) 0;
  margin: var(--sp-8) 0;
}

/* Section marker (chapter opener) */
.stpl-section-marker {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border-marker);
  margin: var(--sp-12) 0 var(--sp-6);
}
.stpl-section-marker__num {
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: 64px;
  letter-spacing: var(--ls-marker);
  color: var(--fg-accent);
  line-height: 1;
}
.stpl-section-marker__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2-px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* Hairline */
.stpl-rule { border: 0; border-top: var(--border-rule); margin: var(--sp-6) 0; }

/* Links — minimal, underline on hover, never blue */
a { color: var(--fg-primary); text-decoration: none; border-bottom: 1px solid var(--line-hairline); }
a:hover { border-bottom-color: var(--fg-primary); }

/* Selection */
::selection { background: var(--stpl-eucalyptus-10); color: var(--fg-primary); }

/* Never bold in body text */
strong, b { font-weight: var(--fw-medium); }