/* ============================================================
   MedEksamen — Design Tokens (canonical, v0.2 Claude-aligned)
   Source of truth. All surfaces consume from this file.
   ------------------------------------------------------------
   v0.2 (2026-05-14):
   - Dropped dark mode (light-only)
   - Switched to Claude/Anthropic palette base for max contrast
   - "Eksamen" now ink-900 (near-black), not teal — kontrast først
   - Typography: Poppins (display) + Lora (body)
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLOR — Claude-aligned, high-contrast
     ---------------------------------------------------------- */

  /* Paper / ink (Anthropic base) */
  --paper:        #faf9f5;   /* page background — warm cream */
  --paper-2:      #f3f1e8;   /* subtle fill */
  --paper-3:      #e8e6dc;   /* light gray fill */
  --line:         #d8d4c4;   /* hairline / divider */
  --line-strong:  #b0aea5;   /* stronger divider, mid gray */

  --ink-900:      #141413;   /* near-black — primary text + display */
  --ink-700:      #2c2c2a;
  --ink-500:      #5a5a55;   /* secondary text */
  --ink-400:      #6f7587;
  --ink-300:      #b0aea5;   /* muted */

  /* Accents */
  --orange-500:   #d97757;   /* Claude orange — primary action */
  --orange-600:   #c4623f;   /* hover */
  --orange-100:   #f5e1d6;
  --orange-50:    #fbf1ea;

  --blue-500:     #6a9bcc;   /* secondary accent */
  --blue-100:     #d6e3f0;
  --blue-50:      #eaf1f8;

  --green-500:    #788c5d;   /* tertiary / correct */
  --green-600:    #5c6e44;
  --green-100:    #dde3d0;
  --green-50:     #eef1e7;

  --crimson-500:  #b04848;   /* incorrect */
  --crimson-100:  #ecd0d0;
  --crimson-50:   #f8ebeb;

  --saffron-500:  #c9941d;   /* huskeregel */
  --saffron-300:  #e6b94a;
  --saffron-50:   #f9efd6;

  --teal-900:     #053a40;   /* "Eksamen" — dypeste teal, høy kontrast */
  --teal-700:     #08474d;
  --teal-500:     #1f7a82;
  --teal-100:     #cfe9eb;
  --teal-50:      #eaf6f7;

  /* --- Semantic mapping (USE THESE in components) --- */
  --c-bg:            var(--paper);
  --c-bg-elevated:   #ffffff;
  --c-bg-subtle:     var(--paper-2);
  --c-bg-fill:       var(--paper-3);
  --c-bg-deep:       var(--ink-900);    /* deep sections, footer */

  --c-text:          var(--ink-900);    /* body — high contrast */
  --c-text-strong:   var(--ink-900);
  --c-text-muted:    var(--ink-500);
  --c-text-on-deep:  var(--paper);
  --c-text-on-deep-muted: var(--ink-300);

  --c-line:          var(--line);
  --c-line-strong:   var(--line-strong);
  --c-line-focus:    var(--teal-500);

  --c-pill-bg:       var(--paper-3);
  --c-pill-text:     var(--ink-700);
  --c-pill-border:   var(--line);

  --c-brand:         var(--teal-900);   /* "Eksamen" word — deep teal */
  --c-accent:        var(--orange-500); /* "Med" word — Claude orange */

  --c-action:        var(--teal-700);   /* primary CTA — teal */
  --c-action-hover:  var(--teal-900);
  --c-action-text:   #ffffff;

  --c-action-2:      var(--ink-900);    /* secondary CTA = ink outline */
  --c-action-2-hover:var(--ink-700);

  --c-correct:       var(--green-500);
  --c-correct-bg:    var(--green-50);
  --c-incorrect:     var(--crimson-500);
  --c-incorrect-bg:  var(--crimson-50);
  --c-insight:       var(--saffron-300);
  --c-insight-bg:    var(--saffron-50);

  /* Data-mode — prediction meters, frequency bars */
  --c-data-track:    var(--paper-3);
  --c-data-fill:     var(--ink-900);
  --c-data-fill-hi:  var(--orange-500);
  --c-data-grid:     var(--line);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Claude-aligned
     ---------------------------------------------------------- */
  --font-display: 'Poppins', 'Arial', system-ui, sans-serif;
  --font-sans:    'Lora', Georgia, 'Times New Roman', serif;
  --font-ui:      'Poppins', 'Arial', system-ui, sans-serif; /* buttons, pills */
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 1.200 ratio from 16px */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.375rem;
  --fs-2xl:   1.75rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   3rem;
  --fs-5xl:   3.75rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   24px;
  --r-pill:  9999px;

  /* ----------------------------------------------------------
     ELEVATION
     ---------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-sm:  0 2px 6px rgba(20, 20, 19, 0.06);
  --shadow-md:  0 6px 18px rgba(20, 20, 19, 0.08);
  --shadow-lg:  0 16px 40px rgba(20, 20, 19, 0.10);
  --shadow-focus: 0 0 0 3px rgba(8, 71, 77, 0.25);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-snug);
  color: var(--c-text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn-primary {
  background: var(--c-action);
  color: var(--c-action-text);
}
.btn-primary:hover { background: var(--c-action-hover); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--c-action-2);
  border-color: var(--c-action-2);
}
.btn-secondary:hover { background: var(--c-action-2); color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--c-text);
  padding: var(--sp-2) var(--sp-3);
}
.btn-ghost:hover { color: var(--c-accent); }

/* Card */
.card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  background: var(--c-pill-bg);
  color: var(--c-pill-text);
  border: 1px solid var(--c-pill-border);
}

/* Input */
.input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-bg-elevated);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus { outline: none; border-color: var(--c-line-focus); box-shadow: var(--shadow-focus); }

/* Prediction meter — signature data-mode component */
.pred-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-700);
}
.pred-meter__track {
  width: 80px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-data-track);
  overflow: hidden;
}
.pred-meter__fill {
  height: 100%;
  background: var(--c-data-fill);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.pred-meter[data-level="high"] .pred-meter__fill { background: var(--c-data-fill-hi); }