/* ============================================================
   NLA Høgskolen — Design Tokens
   ============================================================ */

:root {
  /* ---- Brand Colors (from Farger.txt) ---- */
  --nla-green:       #5ca361;   /* Primary  — PMS 7738 U / 2264 C / CMYK 78 0 80 0 */
  --nla-forest:      #455d58;   /* Secondary — PMS 627 U / 4203 C */
  --nla-gray:        #686869;   /* Gray      — PMS 426 U / 447 U */

  /* ---- Tints & shades (derived) ---- */
  --nla-green-900:   #1f3b24;
  --nla-green-800:   #2f5a37;
  --nla-green-700:   #437c4b;
  --nla-green-600:   #5ca361;   /* = primary */
  --nla-green-500:   #7bb67f;
  --nla-green-400:   #a2cda4;
  --nla-green-300:   #c4dfc6;
  --nla-green-200:   #dcebdc;
  --nla-green-100:   #ecf3ec;
  --nla-green-50:    #f4f8f4;

  --nla-forest-900:  #1d2826;
  --nla-forest-800:  #2c3c38;
  --nla-forest-700:  #395049;
  --nla-forest-600:  #455d58;   /* = secondary */
  --nla-forest-500:  #5c7670;
  --nla-forest-400:  #85a09a;
  --nla-forest-300:  #b0c3bf;
  --nla-forest-200:  #d2dedc;
  --nla-forest-100:  #e8eeec;

  --nla-sand-50:     #faf7f1;   /* Warm off-white, pairs with greens */
  --nla-sand-100:    #f2ece0;
  --nla-sand-200:    #e5dcc6;

  /* ---- Komplementær Terracotta/Rust (for aksenter) ---- */
  --nla-terracotta:     #a87c54;   /* Primær terracotta — komplementær til grønn */
  --nla-rust-900:       #6b4535;
  --nla-rust-800:       #8b5839;
  --nla-rust-700:       #9d6b47;
  --nla-rust-600:       #a87c54;   /* = primær terracotta */
  --nla-rust-500:       #b88966;
  --nla-rust-400:       #c9996f;
  --nla-rust-300:       #d9a980;
  --nla-rust-200:       #e5bfaa;
  --nla-rust-100:       #f0d4c3;
  --nla-rust-50:        #f8e8dc;

  /* ---- Supplerende — Dusty Rose (softer, for perspektivendringer) ---- */
  --nla-rose:           #9b7a89;   /* Dusty rose */
  --nla-rose-100:       #f0e7ed;

  --nla-ink:         #1a1f1d;   /* Near-black for body text on light */
  --nla-paper:       #ffffff;
  --nla-line:        #e2e6e1;   /* Hairline rule */

  /* ---- Semantic ---- */
  --color-bg:            var(--nla-paper);
  --color-bg-muted:      var(--nla-green-50);
  --color-bg-warm:       var(--nla-sand-50);
  --color-bg-dark:       var(--nla-forest-700);
  --color-surface:       var(--nla-paper);
  --color-text:          var(--nla-ink);
  --color-text-muted:    var(--nla-gray);
  --color-text-inverse:  var(--nla-paper);
  --color-accent:        var(--nla-green);
  --color-accent-deep:   var(--nla-forest);
  --color-border:        var(--nla-line);

  /* ---- Type ---- */
  /* Primærfont: Avenir Next / Avenir (profilmateriell, markedsføring, web).
	 Støttefont / web fallback: Montserrat (Google Fonts).
	 Systemfont: Calibri / Arial (Word, PowerPoint — ansatte uten Avenir).
	 Display-overskrifter bruker Avenir Next Bold; brødtekst Regular/Medium. */
  --font-display: 'Avenir Next', 'Avenir', 'Montserrat', 'Calibri', 'Arial', system-ui, sans-serif;
  --font-sans:    'Avenir Next', 'Avenir', 'Montserrat', 'Calibri', 'Arial', system-ui, sans-serif;
  --font-serif:   'Avenir Next', 'Avenir', 'Montserrat', system-ui, sans-serif; /* legacy alias */
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — generous, editorial */
  --fs-hero:    clamp(3rem, 6vw, 5.5rem);    /* 48 → 88 */
  --fs-h1:      clamp(2.25rem, 4vw, 3.5rem); /* 36 → 56 */
  --fs-h2:      clamp(1.75rem, 2.8vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lede:    clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-caps:  0.14em;

  /* ---- Space (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;
  --s-10: 128px;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows (subtle — academic, not flashy) ---- */
  --shadow-sm: 0 1px 2px rgba(26,31,29,.06), 0 1px 1px rgba(26,31,29,.04);
  --shadow-md: 0 4px 12px rgba(26,31,29,.06), 0 2px 4px rgba(26,31,29,.04);
  --shadow-lg: 0 20px 40px -12px rgba(26,31,29,.12), 0 8px 16px -8px rgba(26,31,29,.08);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,.0,.2,1);
  --dur-fast: 160ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --reading-max: 68ch;

  /* ---- Extended Palette (for multi-page design system) ---- */
  /* Short-name aliases for common usage — mapped to NLA tokens where possible */
  --ink: var(--nla-ink);
  --muted: var(--nla-gray);
  --bg: var(--nla-paper);
  --border: var(--nla-line);
  --paper: var(--nla-paper);
  --card-bg: var(--nla-paper);
  --step-bg: var(--nla-sand-50);
  --accent: #c0392b;  /* Red/crimson — custom brand accent not in NLA */
  --accent-light: #e8d5d3;

  /* ---- Teaching/Pedagogical Colors ---- */
  /* Tool cards (work/productivity focus) — mapped to NLA green palette */
  --tool-bg: var(--nla-green-100);
  --tool-accent: var(--nla-green-800);

  /* Learn cards (educational focus) — terracotta instead of blue */
  --learn-bg: var(--nla-rust-100);
  --learn-accent: var(--nla-rust-800);

  /* Gold/Amber accents */
  --gold: #b8860b;  /* Goldenrod — custom pedagogical emphasis */
  --gold-light: var(--nla-sand-200);

  /* Prompt builder layer colors */
  --layer-role: var(--nla-rust-600);      /* Terracotta */
  --layer-context: var(--nla-green-700);   /* Green */
  --layer-steps: var(--nla-rust-800);     /* Dark rust */
  --layer-format: var(--nla-rose);        /* Dusty rose */
  --layer-persona: var(--nla-terracotta); /* Terracotta */

  /* Historical empathy theme */
  --history: #78350f;
  --history-bg: #fef9f0;
  --history-border: #f5d0a0;

  /* Legacy palette colors for specific page use */
  --cream: #f2ede4;
}

/* ============================================================
   Base
   ============================================================ */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }

/* Type utility classes */
.t-hero  { font-family: var(--font-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; text-wrap: balance; }
.t-h1    { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; text-wrap: balance; }
.t-h2    { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 700; text-wrap: balance; }
.t-h3    { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -0.01em; }
.t-lede  { font-family: var(--font-sans); font-size: var(--fs-lede); line-height: var(--lh-loose); font-weight: 500; color: var(--nla-forest); text-wrap: pretty; }
.t-body  { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-loose); text-wrap: pretty; }
.t-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-normal); }
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 600;
  color: var(--nla-green-700);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 14px 24px;
  font: 600 var(--fs-body)/1 var(--font-sans);
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
			  background var(--dur-fast) var(--ease-out),
			  color var(--dur-fast) var(--ease-out),
			  border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary   { background: var(--nla-forest); color: #fff; }
.btn-primary:hover { background: var(--nla-forest-700); }
.btn-secondary { background: var(--nla-green); color: #fff; }
.btn-secondary:hover { background: var(--nla-green-700); }
.btn-ghost    { background: transparent; color: var(--nla-forest); border-color: var(--nla-forest); }
.btn-ghost:hover { background: var(--nla-forest); color: #fff; }

/* Pill/tag */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--nla-green-100);
  color: var(--nla-green-800);
  font: 600 var(--fs-micro)/1 var(--font-sans);
  letter-spacing: 0.02em;
}
.pill--forest { background: var(--nla-forest-100); color: var(--nla-forest-700); }
.pill--sand   { background: var(--nla-sand-100); color: var(--nla-forest-700); }