/* =========================================================================
   Diploma designsystem för SCORM-kurser
   Källa: diploma-grafisk-profil-2026-01 via diploma-tokens.json
   Regler: aldrig gult · bara Mollen · inga omfärgade loggor · inga emojis
   Fontsökvägar utgår från att css:en ligger i assets/ och fonterna i
   assets/fonts/ — justera vid behov.
   ========================================================================= */

@font-face {
  font-family: 'Mollen';
  src: url('fonts/Mollen-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mollen';
  src: url('fonts/Mollen-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Mollen';
  src: url('fonts/Mollen-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mollen';
  src: url('fonts/Mollen-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mollen';
  src: url('fonts/Mollen-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mollen';
  src: url('fonts/Mollen-ExtraBold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* Primär & sekundär */
  --dip-blue: #4f54b3;        /* Diploma-blå — primär accent */
  --dip-morklila: #2b2551;    /* Mörklila — rubriker, mörk bakgrund */
  /* Accenter */
  --dip-lila: #a068f3;
  --dip-hallon: #df516e;
  --dip-turkos: #63c9a8;
  /* Neutraler */
  --dip-antracit: #2d2d2e;
  --dip-offwhite: #f8f7fb;
  --dip-lavendel: #e6e2fb;
  --dip-beige: #f3ebe2;
  --dip-white: #ffffff;
  /* Semantiskt — ljust tema (default) */
  --bg: var(--dip-offwhite);
  --surface: var(--dip-white);
  --surface-alt: var(--dip-lavendel);
  --text: var(--dip-antracit);
  --text-strong: var(--dip-morklila);
  --text-muted: #6b6b78;
  --heading: var(--dip-morklila);
  --accent: var(--dip-blue);
  --border: var(--dip-lavendel);
  /* Mörkt tema-värden (sätt class="theme-dark" på body) */
  --radius: 14px;
  --radius-pill: 999px;
  --shadow: 0 4px 24px rgba(43, 37, 81, 0.10);
}

.theme-dark {
  --bg: #2b2551;
  --surface: #332c63;
  --surface-alt: #3c3570;
  --text: #f8f7fb;
  --text-strong: #ffffff;
  --text-muted: #c9c5e6;
  --heading: #ffffff;
  --accent: #a068f3;
  --border: #4f54b3;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
}

body {
  font-family: 'Mollen', Arial, 'Liberation Sans', sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .dip-heading {
  font-weight: 800; /* Mollen ExtraBold — alltid för rubriker */
  color: var(--heading);
  line-height: 1.1;
}

.dip-kicker {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--accent);
}

.dip-subheading {
  font-style: italic;  /* Mollen Regular Italic för underrubriker */
  font-weight: 400;
  color: var(--text-muted);
}

/* ---- Knappar ---- */
.dip-btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8em 1.8em;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  background: var(--dip-blue);
  color: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.dip-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dip-btn:active { transform: translateY(0); }
.dip-btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.dip-btn--secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.dip-btn--ghost {
  background: var(--surface-alt);
  color: var(--text-strong);
}

/* ---- Kort ---- */
.dip-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem;
}

/* ---- Progressbar ---- */
.dip-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  overflow: hidden;
}
.dip-progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--dip-blue);
  transition: width 0.4s ease;
}

/* ---- Faktaruta / callout ---- */
.dip-callout {
  background: var(--surface-alt);
  border-left: 5px solid var(--dip-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
}
.dip-callout--turkos { border-left-color: var(--dip-turkos); }
.dip-callout--hallon { border-left-color: var(--dip-hallon); }

/* ---- Feedbackfärger (rätt/fel) — håll paletten: turkos = rätt, hallon = fel ---- */
.is-correct { background: var(--dip-turkos) !important; color: var(--dip-morklila) !important; }
.is-wrong   { background: var(--dip-hallon) !important; color: #fff !important; }

/* ---- Diskret Diploma-avsändare ---- */
.dip-brandbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dip-brandbar img { height: 26px; display: block; }

/* Attributet hidden ska alltid vinna over klassers display-regler */
[hidden] { display: none !important; }