/* ============================================================
   Klassplacering Design System — theme.css
   ============================================================
   Gemensamt designsystem för alla sidor på klassplacering.se.
   Importeras högst upp i varje HTML-fil med:
   <link rel="stylesheet" href="theme.css">

   Innehåller:
   - Färgpalett (forest green, coral, cream + accenter)
   - Typografi (PT Serif body/headlines, Inter UI)
   - Spacing, radii, shadows, motion
   - Grundläggande element-styles (body, h1-h4, p, a, kbd)
   - Återanvändbara komponentklasser (.kp-btn, .kp-container, etc.)
   ============================================================ */

/* PT Serif (body + rubriker) och Inter (UI) från Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ============ FÄRG — Forest green (primary) ============ */
  --kp-forest-50:  #eef3ec;
  --kp-forest-100: #dbe5d7;
  --kp-forest-200: #b6cbae;
  --kp-forest-300: #8ba884;
  --kp-forest-400: #5b7a55;
  --kp-forest-500: #3d4f3a;   /* primärknapp-bakgrund, rubrik-färg */
  --kp-forest-600: #2f3e2d;   /* hover */
  --kp-forest-700: #232e21;   /* press */
  --kp-forest-900: #131a12;

  /* ============ FÄRG — Coral peach (list-actions: Redigera/Ta bort) ============ */
  --kp-coral-100: #fde2d6;
  --kp-coral-300: #f8b08e;
  --kp-coral-400: #f59266;
  --kp-coral-500: #ea7e51;
  --kp-coral-700: #b45a32;

  /* ============ FÄRG — Cream / donate ============ */
  --kp-cream-100: #fdf6dc;
  --kp-cream-200: #fae9a3;   /* "Stötta arbetet"-pill bakgrund */
  --kp-cream-400: #efcf52;
  --kp-cream-700: #8a6d12;

  /* ============ FÄRG — Logo-accenter (taggar, info, status) ============ */
  --kp-blue-50:  #eaf4fb;
  --kp-blue-100: #d4e8f6;
  --kp-blue-200: #a9d2ec;
  --kp-blue-300: #6fb5e3;
  --kp-blue-400: #3f9bd6;    /* info-banner-accenter */
  --kp-blue-500: #2c87c4;
  --kp-blue-700: #16527d;
  --kp-blue-900: #0e2f4d;    /* logo navy */

  --kp-green-100: #d8efc4;
  --kp-green-400: #8cc63f;   /* logo green; tag-färg */
  --kp-green-500: #75ad2e;

  --kp-yellow-200: #fae39a;
  --kp-yellow-400: #f3c14a;  /* logo yellow */
  --kp-yellow-700: #8c6612;

  --kp-pink-300: #d96fb1;    /* "Tjej"-tagg */

  --kp-red-100: #fde0dc;
  --kp-red-400: #e35d4a;     /* "Återställ All Data"-knapp */
  --kp-red-600: #b03a29;

  /* ============ FÄRG — Neutraler ============ */
  --kp-ink:       #1c2418;   /* primär text — varm näst-svart med grön undertone */
  --kp-ink-2:     #3a4636;
  --kp-ink-3:     #6f7a68;   /* dämpad text */
  --kp-ink-4:     #a3ad9c;   /* placeholder */
  --kp-line:      #d6dcd2;   /* fin border */
  --kp-line-2:    #e7ebe3;
  --kp-surface:   #ffffff;
  --kp-surface-2: #eef3ec;   /* sidans bakgrund — mjuk mint */
  --kp-surface-3: #f5f8f3;   /* nedsänkt yta */

  /* ============ FÄRG — Semantisk ============ */
  --kp-fg:           var(--kp-ink);
  --kp-fg-muted:     var(--kp-ink-3);
  --kp-fg-on-brand:  #ffffff;
  --kp-bg:           var(--kp-surface-2);
  --kp-bg-card:      var(--kp-surface);
  --kp-border:       var(--kp-line);

  --kp-primary:      var(--kp-forest-500);
  --kp-primary-hover:var(--kp-forest-600);
  --kp-primary-press:var(--kp-forest-700);
  --kp-primary-bg:   var(--kp-forest-50);

  --kp-action:       var(--kp-coral-400);   /* coral list-action */
  --kp-action-hover: var(--kp-coral-500);

  --kp-info:         var(--kp-blue-400);
  --kp-info-bg:      var(--kp-blue-50);
  --kp-success:      var(--kp-green-500);
  --kp-success-bg:   #e8f4d8;
  --kp-warning:      var(--kp-cream-400);
  --kp-warning-bg:   var(--kp-cream-100);
  --kp-danger:       var(--kp-red-400);
  --kp-danger-bg:    var(--kp-red-100);

  /* ============ FÄRG — Elev-/bänk-taggar (i verktyget) ============ */
  --kp-tag-boy:    var(--kp-blue-400);
  --kp-tag-girl:   var(--kp-pink-300);
  --kp-tag-other:  var(--kp-ink-4);
  --kp-tag-placed: #b6dca0;
  --kp-tag-red:    #e35d4a;
  --kp-tag-blue:   var(--kp-blue-400);
  --kp-tag-green:  var(--kp-green-400);
  --kp-tag-yellow: var(--kp-yellow-400);
  --kp-tag-orange: var(--kp-coral-400);
  --kp-tag-purple: #a06bce;

  /* ============ TYPOGRAFI ============ */
  --kp-font-serif:   'PT Serif', Georgia, 'Times New Roman', serif;
  --kp-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --kp-font-display: var(--kp-font-serif);
  --kp-font-body:    var(--kp-font-serif);
  --kp-font-ui:      var(--kp-font-sans);
  --kp-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --kp-text-xs:   12px;
  --kp-text-sm:   14px;
  --kp-text-base: 16px;
  --kp-text-md:   18px;
  --kp-text-lg:   20px;
  --kp-text-xl:   24px;
  --kp-text-2xl:  30px;
  --kp-text-3xl:  38px;
  --kp-text-4xl:  48px;
  --kp-text-5xl:  56px;

  --kp-w-regular:  400;
  --kp-w-medium:   500;
  --kp-w-semibold: 600;
  --kp-w-bold:     700;

  /* ============ SPACING ============ */
  --kp-space-1:  4px;
  --kp-space-2:  8px;
  --kp-space-3:  12px;
  --kp-space-4:  16px;
  --kp-space-5:  20px;
  --kp-space-6:  24px;
  --kp-space-8:  32px;
  --kp-space-10: 40px;
  --kp-space-12: 48px;
  --kp-space-16: 64px;
  --kp-space-20: 80px;

  /* ============ RADII ============ */
  --kp-radius-xs:   4px;
  --kp-radius-sm:   6px;
  --kp-radius:      8px;
  --kp-radius-md:   12px;
  --kp-radius-lg:   14px;
  --kp-radius-xl:   20px;
  --kp-radius-full: 999px;

  /* ============ SHADOWS ============ */
  --kp-shadow-xs:    0 1px 2px rgba(28, 36, 24, 0.05);
  --kp-shadow-sm:    0 2px 6px rgba(28, 36, 24, 0.06);
  --kp-shadow:       0 4px 14px rgba(28, 36, 24, 0.07);
  --kp-shadow-md:    0 10px 28px rgba(28, 36, 24, 0.09);
  --kp-shadow-lg:    0 20px 50px rgba(28, 36, 24, 0.12);
  --kp-shadow-focus: 0 0 0 3px rgba(61, 79, 58, 0.25);

  /* ============ MOTION ============ */
  --kp-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --kp-dur-fast:  120ms;
  --kp-dur:       180ms;
  --kp-dur-slow:  280ms;
}

/* ============================================================
   Grundläggande element-styles
   ============================================================ */

html, body {
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-base);
  line-height: 1.6;
  color: var(--kp-fg);
  background: var(--kp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .kp-h1 {
  font-family: var(--kp-font-display);
  font-size: var(--kp-text-4xl);
  line-height: 1.1;
  font-weight: var(--kp-w-bold);
  letter-spacing: -0.01em;
  color: var(--kp-forest-500);
  margin: 0 0 var(--kp-space-4);
  text-wrap: balance;
}

h2, .kp-h2 {
  font-family: var(--kp-font-display);
  font-size: var(--kp-text-2xl);
  line-height: 1.2;
  font-weight: var(--kp-w-bold);
  color: var(--kp-forest-500);
  margin: 0 0 var(--kp-space-3);
  text-wrap: balance;
}

h3, .kp-h3 {
  font-family: var(--kp-font-display);
  font-size: var(--kp-text-xl);
  line-height: 1.3;
  font-weight: var(--kp-w-bold);
  color: var(--kp-forest-500);
  margin: 0 0 var(--kp-space-2);
}

h4, .kp-h4 {
  font-family: var(--kp-font-ui);
  font-size: var(--kp-text-md);
  font-weight: var(--kp-w-semibold);
  color: var(--kp-ink);
  margin: 0 0 var(--kp-space-2);
}

p, .kp-body {
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-base);
  line-height: 1.65;
  color: var(--kp-ink-2);
  margin: 0 0 var(--kp-space-3);
  text-wrap: pretty;
}

.kp-lead    { font-size: var(--kp-text-md); line-height: 1.55; color: var(--kp-ink-2); }
.kp-small   { font-size: var(--kp-text-sm); color: var(--kp-ink-3); }
.kp-eyebrow {
  font-family: var(--kp-font-ui);
  font-size: var(--kp-text-xs);
  font-weight: var(--kp-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kp-forest-400);
}

a, .kp-link {
  color: var(--kp-blue-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--kp-blue-200);
  transition: color var(--kp-dur) var(--kp-ease);
}
a:hover { color: var(--kp-blue-700); text-decoration-color: currentColor; }

code, .kp-code {
  font-family: var(--kp-font-mono);
  font-size: 0.92em;
  background: var(--kp-surface-3);
  padding: 1px 6px;
  border-radius: var(--kp-radius-xs);
  color: var(--kp-ink);
  border: 1px solid var(--kp-line);
}

kbd, .kp-kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--kp-surface-3);
  border: 1px solid var(--kp-line);
  border-bottom-width: 2px;
  border-radius: var(--kp-radius-xs);
  font-family: var(--kp-font-mono);
  font-size: 0.85em;
  color: var(--kp-ink);
  white-space: nowrap;
}

::selection { background: var(--kp-forest-100); color: var(--kp-ink); }

/* Fokus-stilen är medvetet synlig — tillgänglighet */
:focus-visible {
  outline: 2px solid var(--kp-forest-500);
  outline-offset: 2px;
  border-radius: var(--kp-radius-xs);
}

/* ============================================================
   Komponentklasser — återanvändbara byggblock
   ============================================================ */

/* Containrar */
.kp-container {
  max-width: 600px;
  margin: var(--kp-space-8) auto;
  padding: var(--kp-space-8);
  background: var(--kp-bg-card);
  border-radius: var(--kp-radius-md);
  box-shadow: var(--kp-shadow);
}

@media (max-width: 640px) {
  .kp-container {
    margin: var(--kp-space-4) var(--kp-space-3);
    padding: var(--kp-space-5);
  }
}

/* Knappar — tre nivåer: primary, secondary, ghost; plus action (coral) och danger (red) */
.kp-btn {
  font-family: var(--kp-font-ui);
  font-size: var(--kp-text-sm);
  font-weight: var(--kp-w-semibold);
  padding: 10px 20px;
  border-radius: var(--kp-radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kp-space-2);
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--kp-dur) var(--kp-ease),
              color var(--kp-dur) var(--kp-ease),
              border-color var(--kp-dur) var(--kp-ease),
              box-shadow var(--kp-dur) var(--kp-ease),
              transform var(--kp-dur-fast) var(--kp-ease);
}
.kp-btn:active:not(:disabled) { transform: translateY(1px); }
.kp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.kp-btn-primary {
  background: var(--kp-primary);
  color: var(--kp-fg-on-brand);
  border-color: var(--kp-primary);
}
.kp-btn-primary:hover:not(:disabled) {
  background: var(--kp-primary-hover);
  border-color: var(--kp-primary-hover);
  color: var(--kp-fg-on-brand);
}
.kp-btn-primary:active:not(:disabled) {
  background: var(--kp-primary-press);
  border-color: var(--kp-primary-press);
}

.kp-btn-secondary {
  background: var(--kp-surface);
  color: var(--kp-forest-500);
  border-color: var(--kp-line);
}
.kp-btn-secondary:hover:not(:disabled) {
  background: var(--kp-surface-3);
  border-color: var(--kp-forest-300);
  color: var(--kp-forest-600);
}

.kp-btn-ghost {
  background: transparent;
  color: var(--kp-forest-500);
  border-color: transparent;
}
.kp-btn-ghost:hover:not(:disabled) {
  background: var(--kp-surface-3);
  color: var(--kp-forest-600);
}

.kp-btn-action {
  background: var(--kp-action);
  color: var(--kp-fg-on-brand);
  border-color: var(--kp-action);
}
.kp-btn-action:hover:not(:disabled) {
  background: var(--kp-action-hover);
  border-color: var(--kp-action-hover);
  color: var(--kp-fg-on-brand);
}

.kp-btn-danger {
  background: var(--kp-danger);
  color: var(--kp-fg-on-brand);
  border-color: var(--kp-danger);
}
.kp-btn-danger:hover:not(:disabled) {
  background: var(--kp-red-600);
  border-color: var(--kp-red-600);
  color: var(--kp-fg-on-brand);
}

.kp-btn-cream {
  background: var(--kp-cream-200);
  color: var(--kp-cream-700);
  border-color: var(--kp-cream-200);
}
.kp-btn-cream:hover:not(:disabled) {
  background: var(--kp-cream-400);
  border-color: var(--kp-cream-400);
  color: var(--kp-ink);
}

/* Storlekar */
.kp-btn-sm { font-size: var(--kp-text-xs); padding: 6px 12px; }
.kp-btn-lg { font-size: var(--kp-text-md); padding: 14px 28px; }

/* Banners — info, success, warning, danger */
.kp-banner {
  padding: var(--kp-space-4) var(--kp-space-5);
  border-radius: var(--kp-radius);
  border: 1px solid transparent;
  margin-bottom: var(--kp-space-4);
}
.kp-banner h2, .kp-banner h3 {
  font-size: var(--kp-text-md);
  margin-bottom: var(--kp-space-2);
}
.kp-banner p { margin-bottom: 0; }

.kp-banner-info {
  background: var(--kp-info-bg);
  border-color: var(--kp-blue-200);
  color: var(--kp-blue-900);
}
.kp-banner-info h2, .kp-banner-info h3 { color: var(--kp-blue-900); }

.kp-banner-warning {
  background: var(--kp-warning-bg);
  border-color: var(--kp-cream-400);
  color: var(--kp-cream-700);
}
.kp-banner-warning h2, .kp-banner-warning h3 { color: var(--kp-cream-700); }

.kp-banner-success {
  background: var(--kp-success-bg);
  border-color: var(--kp-green-400);
  color: var(--kp-forest-700);
}
.kp-banner-success h2, .kp-banner-success h3 { color: var(--kp-forest-500); }

.kp-banner-danger {
  background: var(--kp-danger-bg);
  border-color: var(--kp-red-400);
  color: var(--kp-red-600);
}
.kp-banner-danger h2, .kp-banner-danger h3 { color: var(--kp-red-600); }

/* Stegvisning (för guide-sidor) */
.kp-step {
  margin-top: var(--kp-space-6);
  padding-left: var(--kp-space-6);
  position: relative;
  border-left: 2px solid var(--kp-line-2);
}
.kp-step:last-child { border-left-color: transparent; }
.kp-step-number {
  position: absolute;
  left: -0.85rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--kp-radius-full);
  background: var(--kp-primary);
  color: var(--kp-fg-on-brand);
  font-family: var(--kp-font-ui);
  font-weight: var(--kp-w-semibold);
  font-size: var(--kp-text-sm);
}

/* Tabell för tangentbordsgenvägar */
.kp-shortcut-row {
  display: flex;
  gap: var(--kp-space-4);
  padding: var(--kp-space-2) 0;
  border-bottom: 1px solid var(--kp-line-2);
  font-family: var(--kp-font-ui);
  font-size: var(--kp-text-sm);
}
.kp-shortcut-row:last-child { border-bottom: none; }
.kp-shortcut-key { min-width: 9rem; }

/* Modal */
.kp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 36, 24, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: var(--kp-space-4);
}
.kp-modal-content {
  background: var(--kp-bg-card);
  padding: var(--kp-space-6);
  border-radius: var(--kp-radius-md);
  box-shadow: var(--kp-shadow-lg);
  width: 100%;
  max-width: 500px;
  position: relative;
}
.kp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--kp-space-4);
  padding-bottom: var(--kp-space-2);
  border-bottom: 1px solid var(--kp-line);
}
.kp-modal-header h2 {
  font-size: var(--kp-text-xl);
  margin: 0;
}
.kp-modal-close-btn {
  background: none;
  border: none;
  font-size: var(--kp-text-xl);
  line-height: 1;
  cursor: pointer;
  color: var(--kp-ink-3);
  padding: var(--kp-space-1) var(--kp-space-2);
  border-radius: var(--kp-radius-xs);
  transition: background var(--kp-dur) var(--kp-ease);
}
.kp-modal-close-btn:hover { background: var(--kp-surface-3); color: var(--kp-ink); }

/* Hidden-utility */
.kp-hidden { display: none !important; }