/* =============================================================================
   Hjalmarsson Forum — delade design-tokens
   Editorial baseline. Cream + ink ramp + två likvärdiga signatur-accenter.

   Arkitektur: denna fil definierar bara råtokens och persona-neutrala
   semantiska lager. Sajter som väljer in laddar denna först och deklarerar
   sedan sin egen `--accent` (per skapares signatur) i en site-fil.

   - Teal-signatur:  Anna Hjalmarssons sajter   (anna/, ryska_kurs/)
   - Blå-signatur:   Nicklas Hjalmarssons sajter (honungsburken/)
   - Plattformen (HF) bär ingen accent — bara ink + cream.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

:root {
  /* ── Palette: cream + ink ramp ─────────────────────────────────────── */
  --hf-cream:            #FFFDF7;  /* page bg */
  --hf-cream-soft:       #F7F5EF;  /* surfaces, cards on cream */
  --hf-cream-deep:       #F5EFE6;  /* warmer surface */
  --hf-ink:              #1A1A1A;  /* primary text, dark footer */
  --hf-ink-muted:        #4A4A4A;  /* body / secondary text */
  --hf-ink-faint:        #6E6964;  /* meta, eyebrows — WCAG AA on cream */

  /* ── Två likvärdiga signatur-accenter ─────────────────────────────────
     Color-named (inte person-named) så att tokens-API:t överlever
     personell förändring. Person-mappningen lever i kommentaren. */
  --hf-accent-teal:      #2F7D73;  /* Anna Hjalmarssons signatur */
  --hf-accent-teal-deep: #1F5C55;
  --hf-accent-teal-soft: rgba(47, 125, 115, 0.10);
  --hf-accent-teal-light:#8FC9C0;  /* accent mot mörk botten (foto/ink) */
  --hf-accent-teal-shadow: rgba(47, 125, 115, 0.32);
  --hf-accent-teal-select: rgba(47, 125, 115, 0.30); /* textmarkering */

  --hf-accent-blue:      #244463;  /* Nicklas Hjalmarssons signatur */
  --hf-accent-blue-deep: #193149;
  --hf-accent-blue-soft: rgba(36, 68, 99, 0.10);
  --hf-accent-blue-light:#8FB4D6;
  --hf-accent-blue-shadow: rgba(36, 68, 99, 0.32);
  --hf-accent-blue-select: rgba(36, 68, 99, 0.30);

  /* ── Night: filmisk mörk botten ────────────────────────────────────
     Bärare för .hero-cinematic — text ovanpå fotografi. Egen ram
     snarare än --hf-ink: bilderna är kalla, ink är neutralt svart. */
  --hf-night:            #0A1628;

  /* Cream-ramp mot mörk botten. Utan dessa tvingas varje sajt hårdkoda
     rgba(255,253,247,x) för dämpad text på foto — den vanligaste
     avdriftsorsaken i honungsburkens gamla sidkod. */
  --hf-cream-85:         rgba(255, 253, 247, 0.85);
  --hf-cream-75:         rgba(255, 253, 247, 0.75);
  --hf-cream-55:         rgba(255, 253, 247, 0.55);

  /* ── Hairlines ─────────────────────────────────────────────────────── */
  --hf-rule:             rgba(26, 26, 26, 0.10);
  --hf-rule-strong:      rgba(26, 26, 26, 0.18);
  --hf-rule-dark:        rgba(255, 253, 247, 0.12); /* on dark surfaces */

  /* ── Semantic ink layer — sajt-oberoende ───────────────────────────── */
  --fg-1:        var(--hf-ink);          /* headings, primary text */
  --fg-2:        var(--hf-ink-muted);    /* body */
  --fg-3:        var(--hf-ink-faint);    /* meta, eyebrows, captions */
  --fg-on-dark:  var(--hf-cream);
  --fg-on-accent:#FFFFFF;

  --bg-page:     var(--hf-cream);
  --bg-surface:  var(--hf-cream-soft);
  --bg-warm:     var(--hf-cream-deep);
  --bg-ink:      var(--hf-ink);
  --bg-night:    var(--hf-night);

  --fg-on-dark-muted: var(--hf-cream-85);
  --fg-on-dark-faint: var(--hf-cream-55);

  --border:        var(--hf-rule);
  --border-strong: var(--hf-rule-strong);
  --border-on-ink: var(--hf-rule-dark);

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-hero:      4rem;     /* 64 */
  --t-h1:        3rem;     /* 48 */
  --t-h2:        2.25rem;  /* 36 */
  --t-h3:        1.5rem;   /* 24 */
  --t-h4:        1.125rem; /* 18 — same as body, distinguished by family/weight */
  --t-body:      1.125rem; /* 18 */
  --t-small:     0.95rem;
  --t-meta:      0.85rem;
  --t-eyebrow:   0.7rem;

  --lh-display:  1.15;
  --lh-body:     1.6;
  --lh-tight:    1.2;

  --tracking-eyebrow: 0.18em;
  --tracking-badge:   0.12em;
  --tracking-display: -0.01em;
  --tracking-body:    0;

  --weight-display: 500;       /* EB Garamond optically full at 500 */
  --weight-body:    400;
  --weight-strong:  600;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.75rem;
  --space-md:  1.5rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 9999px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(26, 26, 26, 0.08);

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container:        880px;
  --container-wide:   1200px;
  --container-narrow: 720px;
  --measure-prose:    65ch;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-quick: 0.15s;
  --duration-base:  0.2s;

  /* ── Ornament ──────────────────────────────────────────────────────── */
  --hf-ornament: "\2766"; /* ❦ floral heart — kapitelbrott */

  /* ── Ikoner som CSS-masker ─────────────────────────────────────────
     Masker, inte färgade SVG:er: formen definieras en gång, färgen tas
     från --accent per sajt. Sätts som mask-image på ett tomt element. */
  --hf-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Accent-fallbacks om ingen site-tokens.css laddats. :where() ger
   specificity 0 så en site-override på :root alltid vinner — även när
   components.css re-importerar denna fil efter site-tokens.css. */
:where(:root) {
  --accent:         var(--hf-ink);
  --accent-deep:    var(--hf-ink-muted);
  --accent-soft:    transparent;
  --accent-on-dark: var(--hf-cream);
  --accent-shadow:  rgba(26, 26, 26, 0.18);
  --accent-select:  rgba(26, 26, 26, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-quick: 0.01ms;
    --duration-base:  0.01ms;
  }
}

/* ── Editorial typography helpers ─────────────────────────────────────
   Class-syntax-versioner av typ-skalan. Använd via element-class. */
.hf-type {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  letter-spacing: var(--tracking-body);
}

.hf-h1, .hf-h2, .hf-h3, .hf-h4, .hf-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--fg-1);
  line-height: var(--lh-display);
  margin: 0 0 var(--space-sm);
}
.hf-hero { font-size: var(--t-hero); letter-spacing: var(--tracking-display); }
.hf-h1   { font-size: var(--t-h1);   letter-spacing: var(--tracking-display); }
.hf-h2   { font-size: var(--t-h2); }
.hf-h2-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-display);
  font-size: var(--t-h2);
  color: var(--fg-1);
  line-height: var(--lh-display);
}
.hf-h3   { font-size: var(--t-h3); }
.hf-h4   { font-size: var(--t-h4); }

.hf-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.hf-meta {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  color: var(--fg-3);
}

.hf-blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--fg-2);
  border-left: 3px solid var(--accent, var(--fg-1));
  padding-left: 1rem;
  margin: var(--space-md) 0;
}

.hf-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}