/* =========================================================
   BoligKlar — Chat-flow tokens (koncept)
   ---------------------------------------------------------
   Palette + type til chatflow.css. Værdier matcher
   css/concept-tokens.css / concept/tokens.ts (Athiti,
   Space Mono, cream–ink–sage). Variabelnavne --bk-* beholdes
   så chatflow.css kan genbruge dem uden logik-ændringer.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Athiti:wght@200;300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- Core palette (koncept) ---------- */
  --bk-black:        #141412;   /* ink — CTA / user bubble */
  --bk-ink:          #141412;
  --bk-cream:        #FBFAF7;
  --bk-white:        #FFFFFF;   /* kort / bobler */
  --bk-grey-50:      #FBFAF7;
  --bk-grey-100:     #F2F0EA;   /* light-section */
  --bk-grey-200:     #E3E1DB;   /* border */
  --bk-grey-300:     #D4D1C8;
  --bk-grey-500:     #8A8880;
  --bk-grey-700:     #57564F;   /* grey */
  --bk-grey-900:     #212A1D;

  /* ---------- Accent ---------- */
  --bk-green:        #5E6B4F;   /* nature green — aktiv / positiv */
  --bk-green-soft:   #E8ECE1;
  --bk-green-soft-2: #DDE3D4;
  --bk-green-deep:   #4A553F;   /* hover på grøn flade */
  --bk-label:        #9C5B36;   /* terracotta — eyebrows / links */
  --bk-label-soft:   #F0E4DA;
  --bk-tan:          #EAD3AC;
  --bk-sage:         #8C9A7B;

  /* ---------- Semantic ---------- */
  --bk-bg:           var(--bk-cream);
  --bk-bg-alt:       var(--bk-grey-100);
  --bk-fg:           var(--bk-ink);
  --bk-fg-muted:     var(--bk-grey-700);
  --bk-fg-subtle:    var(--bk-grey-500);
  --bk-border:       var(--bk-grey-200);
  --bk-border-strong:var(--bk-grey-300);
  --bk-accent:       var(--bk-green);
  --bk-accent-fg:    var(--bk-cream);

  /* ---------- Type families ---------- */
  /* Konceptet har ingen serif — display = Athiti light */
  --bk-font-serif:   Athiti, system-ui, -apple-system, sans-serif;
  --bk-font-sans:    Athiti, system-ui, -apple-system, sans-serif;
  --bk-font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bk-font-serif-weight: 300;
  --bk-font-serif-weight-display: 300;
  --bk-label-tracking: 0.14em;

  /* ---------- Type scale ---------- */
  --bk-text-xs:   12px;
  --bk-text-sm:   14px;
  --bk-text-base: 16px;
  --bk-text-md:   18px;
  --bk-text-lg:   22px;
  --bk-text-xl:   28px;
  --bk-text-2xl:  36px;
  --bk-text-3xl:  48px;
  --bk-text-4xl:  64px;
  --bk-text-5xl:  88px;

  /* ---------- Spacing (4px base) ---------- */
  --bk-space-1:  4px;
  --bk-space-2:  8px;
  --bk-space-3:  12px;
  --bk-space-4:  16px;
  --bk-space-5:  24px;
  --bk-space-6:  32px;
  --bk-space-7:  48px;
  --bk-space-8:  64px;
  --bk-space-9:  96px;

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

  /* ---------- Shadow ---------- */
  --bk-shadow-xs: 0 1px 2px rgba(20, 20, 18, 0.04);
  --bk-shadow-sm: 0 2px 6px rgba(20, 20, 18, 0.06);
  --bk-shadow-md: 0 8px 20px rgba(20, 20, 18, 0.08);
  --bk-shadow-lg: 0 20px 48px rgba(20, 20, 18, 0.10);

  /* ---------- Motion ---------- */
  --bk-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --bk-dur-fast:  140ms;
  --bk-dur-base:  220ms;
  --bk-dur-slow:  420ms;
}

/* =========================================================
   Semantic text styles
   ========================================================= */

.bk-eyebrow {
  font-family: var(--bk-font-mono);
  font-weight: 400;
  font-size: var(--bk-text-xs);
  letter-spacing: var(--bk-label-tracking);
  text-transform: uppercase;
  color: var(--bk-label);
}

.bk-display,
.bk-h1 {
  font-family: var(--bk-font-serif);
  font-weight: var(--bk-font-serif-weight);
  font-size: var(--bk-text-4xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bk-fg);
}

.bk-h2 {
  font-family: var(--bk-font-serif);
  font-weight: var(--bk-font-serif-weight);
  font-size: var(--bk-text-3xl);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--bk-fg);
}

.bk-h3 {
  font-family: var(--bk-font-serif);
  font-weight: var(--bk-font-serif-weight);
  font-size: var(--bk-text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bk-fg);
}

/* Grøn kursiv kun på bevidste accentord — aldrig hele overskriften */
.bk-serif-italic {
  font-family: var(--bk-font-serif);
  font-style: italic;
  font-weight: inherit;
  color: var(--bk-green);
}

.bk-lead {
  font-family: var(--bk-font-sans);
  font-weight: 400;
  font-size: var(--bk-text-md);
  line-height: 1.55;
  color: var(--bk-fg);
}

.bk-p,
p.bk {
  font-family: var(--bk-font-sans);
  font-weight: 400;
  font-size: var(--bk-text-base);
  line-height: 1.6;
  color: var(--bk-fg);
}

.bk-small {
  font-family: var(--bk-font-sans);
  font-weight: 400;
  font-size: var(--bk-text-sm);
  line-height: 1.5;
  color: var(--bk-fg-muted);
}

.bk-label {
  font-family: var(--bk-font-sans);
  font-weight: 500;
  font-size: var(--bk-text-sm);
  letter-spacing: 0.02em;
  color: var(--bk-fg);
}

.bk-button {
  font-family: var(--bk-font-sans);
  font-weight: 400;
  font-size: var(--bk-text-sm);
  letter-spacing: 0.01em;
}