/* ═══════════════════════════════════════════════════════════════════
   Norsklaben — Foundations
   Cleaner, more refined evolution of the in-repo styles.css tokens.
   Keeps brand DNA (forest green + warm parchment + serif display) but
   tightens scale, neutrals, and elevation for a more professional feel.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ───────── Brand core ───────── */
  --brand-forest:        #1A3D2B;   /* primary — sticky header, headlines */
  --brand-forest-mid:    #2E6B4F;   /* hover for forest, secondary green */
  --brand-forest-soft:   #E8F2EC;   /* tag bg, plight surfaces */
  --brand-forest-deep:   #0E2A1B;   /* footer/dark zones */
  --brand-gold:          #B5731F;   /* accent — cleaner / slightly deeper than legacy #C8832A */
  --brand-gold-soft:     #FDF4E0;   /* alight surfaces */
  --brand-gold-deep:     #7C4A0F;   /* gold text on alight */

  /* ───────── Surfaces ───────── */
  --surface-parchment:   #F7F3EE;   /* page bg, calm warm neutral */
  --surface-paper:       #FBF8F3;   /* slightly warmer secondary surface */
  --surface-card:        #FFFFFF;
  --surface-sunken:      #F1ECE4;   /* inputs, code blocks */

  /* ───────── Foreground / text ───────── */
  --fg-1:                #1C1C1C;   /* primary text */
  --fg-2:                #4A4840;   /* secondary text / labels */
  --fg-3:                #7A7670;   /* muted, captions */
  --fg-inverse:          #FFFFFF;
  --fg-on-forest:        rgba(255,255,255,.92);
  --fg-on-forest-muted:  rgba(255,255,255,.62);

  /* ───────── Borders ───────── */
  --border-1:            #E0DBD2;   /* default hairlines */
  --border-2:            #EDE8E0;   /* softer card border */
  --border-strong:       #C9C2B6;   /* hover/active emphasis */

  /* ───────── Semantic (status) ───────── */
  --info:                #2066B6;
  --info-soft:           #EEF5FC;
  --success:             #1A7A50;
  --success-soft:        #EDF8F2;
  --warning:             #B05A00;
  --warning-soft:        #FDF4E0;
  --danger:              #C0392B;
  --danger-soft:         #FDECEA;

  /* ───────── Pedagogical operation colours (from legacy --op-*) ───────── */
  --op-identifisere:     #1D6FD1;   /* identify */
  --op-korrigere:        #C0392B;   /* correct */
  --op-omskrive:         #7B2FBE;   /* rewrite */
  --op-byggje:           #4A7A3D;   /* build */
  --op-analysere:        #B05A00;   /* analyse */
  --op-rangere:          #0A7C8C;   /* rank */
  --op-fylloppgave:      #3A5A8C;   /* fill-in */

  /* ───────── Type families ───────── */
  --font-display:        'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:           'Inter', 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ───────── Type scale (compact, content-first) ───────── */
  --fs-display:          clamp(2.5rem, 4vw + 1rem, 4rem);   /* hero h1 */
  --fs-h1:               clamp(2rem, 2.4vw + 1rem, 2.8rem);
  --fs-h2:               clamp(1.5rem, 1.4vw + .9rem, 1.9rem);
  --fs-h3:               1.25rem;
  --fs-h4:               1.05rem;
  --fs-body:             1rem;
  --fs-body-sm:          .92rem;
  --fs-caption:          .82rem;
  --fs-eyebrow:          .72rem;     /* uppercase label */

  --lh-tight:            1.15;
  --lh-snug:             1.3;
  --lh-normal:           1.55;
  --lh-loose:            1.7;

  --tracking-tight:      -0.015em;
  --tracking-normal:     0;
  --tracking-wide:       .04em;
  --tracking-eyebrow:    .1em;       /* uppercase labels */

  /* ───────── Spacing (4px base) ───────── */
  --space-0:             0;
  --space-1:             .25rem;     /* 4 */
  --space-2:             .5rem;      /* 8 */
  --space-3:             .75rem;     /* 12 */
  --space-4:             1rem;       /* 16 */
  --space-5:             1.5rem;     /* 24 */
  --space-6:             2rem;       /* 32 */
  --space-7:             3rem;       /* 48 */
  --space-8:             4.5rem;     /* 72 */

  /* ───────── Radii ───────── */
  --radius-xs:           4px;
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-pill:         999px;

  /* ───────── Elevation ───────── */
  --shadow-1:            0 1px 2px rgba(26,61,43,.05), 0 1px 4px rgba(26,61,43,.04);
  --shadow-2:            0 1px 4px rgba(26,61,43,.06), 0 4px 16px rgba(26,61,43,.06);
  --shadow-3:            0 4px 16px rgba(26,61,43,.10), 0 8px 32px rgba(26,61,43,.08);
  --shadow-4:            0 18px 40px rgba(26,61,43,.16);
  --shadow-inset:        inset 0 1px 0 rgba(255,255,255,.6);

  /* ───────── Motion ───────── */
  --ease-out:            cubic-bezier(.2, .8, .2, 1);
  --ease-in-out:         cubic-bezier(.4, 0, .2, 1);
  --dur-fast:            120ms;
  --dur-med:             220ms;
  --dur-slow:            420ms;

  /* ───────── Layout ───────── */
  --max-content:         1100px;
  --max-narrow:          720px;
  --max-prose:           62ch;
}

/* ─────────────────────────────────────────────────────
   Semantic element styles — direct ready-to-use blocks
   ───────────────────────────────────────────────────── */

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

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--brand-forest);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 600;
}

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

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-forest);
}

p { line-height: var(--lh-normal); }
p + p { margin-top: var(--space-3); }

.lead {
  font-size: 1.1rem;
  color: var(--fg-2);
  line-height: var(--lh-normal);
  max-width: var(--max-prose);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-gold);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--surface-sunken);
  padding: .12em .35em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

a { color: var(--brand-forest-mid); text-decoration: none; }
a:hover { color: var(--brand-forest); text-decoration: underline; text-underline-offset: 3px; }

/* Logo wordmark — matches legacy "Norsk[laben]" treatment */
.nl-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: var(--brand-forest);
  white-space: nowrap;
}
.nl-wordmark em { font-style: normal; color: var(--brand-gold); }
.nl-wordmark.on-forest { color: #fff; }
.nl-wordmark.on-forest em { color: var(--brand-gold-soft); }