/* Systemmanden Live — designkontrakt.
   Farver og skrifter er Systemmandens egne (taflow/flow/flow.css).
   Navne må tilføjes, aldrig omdøbes eller fjernes: alle sider bygger på dem. */

:root {
  /* Flader og tekst */
  --paper: #F7F4EC;
  --paper-2: #EFEADD;
  --white: #FFFFFF;
  --ink: #12131A;
  --ink-2: #454859;
  --ink-3: #6B6E80;
  --line: rgba(18, 19, 26, 0.10);
  --line-2: rgba(18, 19, 26, 0.18);

  /* Accenter */
  --orange: #FF6A2B;
  --cobalt: #3A5BFF;
  --mint: #17C3A0;
  --sun: #FFC83A;
  --pink: #FF7EB6;
  --orange-deep: #E04E12;
  --cobalt-deep: #2540D9;
  --mint-deep: #0E9C7E;
  --sun-deep: #E6A800;
  --pink-deep: #E85A9B;
  --orange-soft: #FFE3D4;
  --cobalt-soft: #DDE3FF;
  --mint-soft: #CFF4EB;
  --sun-soft: #FFF0C2;
  --pink-soft: #FFDDEC;

  /* Skrifter (indlæses af /skrifter.css) */
  --f-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --f-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Form og bevægelse */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 40px;
  --shadow-1: 0 1px 0 rgba(18, 19, 26, 0.04), 0 8px 24px -10px rgba(40, 32, 70, 0.18);
  --shadow-2: 0 2px 0 rgba(18, 19, 26, 0.04), 0 24px 48px -18px rgba(40, 32, 70, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Quiz: rigtigt/forkert */
  --rigtig: #0E9C7E;
  --rigtig-soft: #CFF4EB;
  --forkert: #C8372D;
  --forkert-soft: #FADAD6;

  /* Quiz: de fire svarmuligheder. Farve OG form, så farveblinde kan skelne dem.
     Orange og grøn er en tand mørkere end Flows, så hvid tekst når 4,5:1. */
  --svar-0-bg: #C9430D;
  --svar-0-fg: #FFFFFF;
  --svar-1-bg: var(--cobalt-deep);
  --svar-1-fg: #FFFFFF;
  --svar-2-bg: var(--sun);
  --svar-2-fg: var(--ink);
  --svar-3-bg: #0B7F67;
  --svar-3-fg: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
}

/* Svarmulighed N: sæt klassen på knappen/flisen. Brug --svar-bg og --svar-fg i egen CSS. */
.svar-0 { --svar-bg: var(--svar-0-bg); --svar-fg: var(--svar-0-fg); --form-clip: polygon(50% 4%, 96% 92%, 4% 92%); --form-radius: 0; }
.svar-1 { --svar-bg: var(--svar-1-bg); --svar-fg: var(--svar-1-fg); --form-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); --form-radius: 0; }
.svar-2 { --svar-bg: var(--svar-2-bg); --svar-fg: var(--svar-2-fg); --form-clip: none; --form-radius: 50%; }
.svar-3 { --svar-bg: var(--svar-3-bg); --svar-fg: var(--svar-3-fg); --form-clip: none; --form-radius: 8%; }

/* Formen (trekant, ruder, cirkel, firkant) som et tomt element: <span class="form" aria-hidden="true"></span>.
   Størrelsen sættes af siden med width/height. */
.form {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  clip-path: var(--form-clip, none);
  border-radius: var(--form-radius, 0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}