/*
 * ═══════════════════════════════════════════════════════════════
 *  SWEDBANG TECHTRADE — TYPOGRAPHY SYSTEM v1.0
 *  Fonts : Inter (body) · Merriweather (headings)
 *  Theme : Dark luxury (#0D1528 base, light text)
 *  Layer : Foundation — loads BEFORE all other CSS
 *  Safe  : No !important overrides on layout/hero/canvas/video
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── 1. DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --sb-font-sans  : 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
  --sb-font-serif : 'Merriweather', Georgia, 'Times New Roman', serif;

  --sb-color-text         : #C8DCEF;
  --sb-color-text-strong  : #EBF4FF;
  --sb-color-text-muted   : #7A92B4;
  --sb-color-link         : #38BDF8;
  --sb-color-link-visited : #A78BFF;
  --sb-color-link-hover   : #7DD3FC;
  --sb-color-border       : rgba(255,255,255,0.08);
  --sb-color-blockquote-bg: rgba(0,210,255,0.05);
  --sb-color-blockquote-bd: #00D4FF;

  --sb-fs-base    : 16px;
  --sb-lh-base    : 1.75;
  --sb-lh-heading : 1.12;
}

/* ─── 2. BASE RESET & RENDERING ─────────────────────────────────── */
html {
  font-family              : var(--sb-font-sans);
  font-size                : var(--sb-fs-base);
  line-height              : var(--sb-lh-base);
  -webkit-font-smoothing   : antialiased;
  -moz-osx-font-smoothing  : grayscale;
  text-rendering           : optimizeLegibility;
  font-feature-settings    : "kern" 1, "liga" 1, "calt" 1;
  -webkit-text-size-adjust : 100%;
  text-size-adjust         : 100%;
}

body {
  font-family : var(--sb-font-sans);
  font-size   : var(--sb-fs-base);
  line-height : var(--sb-lh-base);
  color       : var(--sb-color-text);
  margin      : 0;
  padding     : 0;
}

/* ─── 3. HEADING SCALE (Merriweather) ────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family             : var(--sb-font-serif);
  color                   : var(--sb-color-text-strong);
  line-height             : var(--sb-lh-heading);
  font-weight             : 700;
  margin-top              : 0;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  text-rendering          : geometricPrecision;
}

h1 {
  font-size     : clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  font-weight   : 900;
  line-height   : 1.08;
  letter-spacing: -0.03em;
  margin-bottom : 0.35em;
}
h2 {
  font-size     : clamp(1.625rem, 1rem + 1.8vw, 2.75rem);
  font-weight   : 700;
  line-height   : 1.14;
  letter-spacing: -0.025em;
  margin-bottom : 0.4em;
}
h3 {
  font-size     : clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  font-weight   : 700;
  line-height   : 1.22;
  letter-spacing: -0.018em;
  margin-bottom : 0.4em;
}
h4 {
  font-size     : clamp(1.0625rem, 0.85rem + 0.7vw, 1.5rem);
  font-weight   : 700;
  letter-spacing: -0.012em;
  line-height   : 1.3;
  margin-bottom : 0.3em;
}
h5 {
  font-size     : clamp(0.9375rem, 0.82rem + 0.4vw, 1.25rem);
  font-weight   : 700;
  letter-spacing: -0.008em;
  line-height   : 1.35;
  margin-bottom : 0.3em;
}
h6 {
  font-size     : clamp(0.875rem, 0.8rem + 0.25vw, 1.0625rem);
  font-weight   : 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height   : 1.4;
  margin-bottom : 0.25em;
}

@media (min-width: 1200px) {
  h1 { letter-spacing: -0.035em; }
  h2 { letter-spacing: -0.028em; }
  h3 { letter-spacing: -0.02em;  }
}

/* ─── 4. BODY COPY (Inter) ───────────────────────────────────────── */
p {
  font-family : var(--sb-font-sans);
  font-size   : clamp(0.9375rem, 0.82rem + 0.5vw, 1.0625rem);
  line-height : 1.8;
  color       : var(--sb-color-text);
  margin      : 0 0 1em;
  max-width   : 72ch;
}

p.lead, .sb-lead {
  font-size  : clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.7;
  color      : #D0E6FF;
  font-weight: 400;
}

/* ─── 5. LINKS ───────────────────────────────────────────────────── */
a {
  color                : var(--sb-color-link);
  text-decoration      : none;
  text-underline-offset: 3px;
  transition           : color 0.18s ease;
}
a:visited { color: var(--sb-color-link-visited); }
a:hover, a:focus-visible {
  color          : var(--sb-color-link-hover);
  text-decoration: underline;
  outline        : none;
}
a:focus-visible {
  outline       : 2px solid var(--sb-color-link);
  outline-offset: 3px;
  border-radius : 2px;
}

/* ─── 6. LISTS ───────────────────────────────────────────────────── */
ul, ol {
  font-family: var(--sb-font-sans);
  font-size  : clamp(0.9375rem, 0.82rem + 0.5vw, 1.0625rem);
  line-height: 1.75;
  color      : var(--sb-color-text);
  margin     : 0.5em 0 1em 1.4em;
  padding    : 0;
}
li { margin-bottom: 0.35em; }

/* ─── 7. BLOCKQUOTES ─────────────────────────────────────────────── */
blockquote {
  margin       : 1.5em 0;
  padding      : 1rem 1.25rem;
  border-left  : 3px solid var(--sb-color-blockquote-bd);
  background   : var(--sb-color-blockquote-bg);
  border-radius: 0 8px 8px 0;
  color        : #A8C4E0;
  font-style   : italic;
  font-size    : clamp(0.9375rem, 0.82rem + 0.5vw, 1.0625rem);
  line-height  : 1.75;
}
blockquote cite {
  display       : block;
  margin-top    : 0.6em;
  font-style    : normal;
  font-size     : 0.8125rem;
  color         : var(--sb-color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── 8. CODE ────────────────────────────────────────────────────── */
code, kbd, samp {
  font-family  : "Consolas", monospace;
  font-size    : 0.875em;
  background   : rgba(0,210,255,0.08);
  border       : 1px solid rgba(0,210,255,0.15);
  border-radius: 4px;
  padding      : 0.1em 0.4em;
  color        : #7AE3FF;
}
pre {
  font-family  : "Consolas", monospace;
  font-size    : 0.875rem;
  background   : rgba(0,0,0,0.35);
  border       : 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding      : 1.25rem 1.5rem;
  overflow-x   : auto;
  line-height  : 1.65;
  color        : #C8E6FF;
}
pre code { background: none; border: none; padding: 0; font-size: 1em; }

/* ─── 9. MUTED / META ────────────────────────────────────────────── */
small, .text-muted, .sb-muted {
  font-size  : 0.8125rem;
  color      : var(--sb-color-text-muted);
  line-height: 1.6;
}
strong, b {
  font-weight: 700;
  color      : var(--sb-color-text-strong);
}

/* ─── 10. HR ─────────────────────────────────────────────────────── */
hr {
  border    : none;
  border-top: 1px solid var(--sb-color-border);
  margin    : 2rem 0;
}

/* ─── 11. SELECTION ──────────────────────────────────────────────── */
::selection {
  background: rgba(0, 210, 255, 0.22);
  color     : #EBF4FF;
}

/* ─── 12. MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  p, ul, ol { line-height: 1.7; }
  h1 { line-height: 1.1; }
}

/* ─── 13. FONT OVERRIDE GUARD ────────────────────────────────────── */
button, [role="button"],
.sb-header, .ent-header, nav,
.sb-btn, .sbhp-cta-btn, .ent-link,
input, textarea, select {
  font-family: var(--sb-font-sans);
}