/* FlexCare Spil — fælles designsystem (Fase 1, Batch 1 · rapport T6).
   Ét sted for farver, typografi, spacing, radius og genbrugelige
   komponent-klasser + tilgængeligheds-laget (foldet ind fra a11y.css).

   Linkes EFTER hvert spils egen app.css, så tokens/overrides vinder.
   ADDITIVT: eksisterende spil-klasser røres ikke — nye fælles klasser er
   prefikset `fc-` og bruges gradvist (help.js / celebration.js bruger dem nu).
   Refaktorér spil-for-spil over til tokens/klasser senere. */

:root {
  /* --- Farver: teal-paletten fra spillene ------------------------------ */
  --fc-teal: #1f7a8c;          /* primær accent (knapper, ikoner)          */
  --fc-teal-dark: #155d6b;     /* hover / tekst på lys baggrund            */
  --fc-teal-tint: #e8f2f4;     /* svag flade / aktiv-tint                  */
  --fc-teal-tint-2: #cbe0e5;   /* border/kant på tint                      */

  --fc-ink: #1f2d35;           /* primær tekst                             */
  --fc-ink-muted: #5d6b75;     /* dæmpet tekst                             */
  --fc-line: #cdd8db;          /* neutral kant/streg                       */

  --fc-surface: #ffffff;       /* kort/panel-flade                         */
  --fc-surface-warm: #fcfbf8;  /* varm panel-flade (release-info-stil)     */
  --fc-scrim: rgba(15, 30, 37, 0.55);   /* overlay-baggrund               */

  --fc-success: #2f9f6b;       /* sejr / positiv                           */
  --fc-success-dark: #1f7e43;
  --fc-danger: #c0392b;        /* fejl / negativ                           */
  --fc-warn-tint: #fdece9;     /* svag fejl-/optage-flade                  */

  --fc-focus: #1f7a8c;         /* fokus-ring (mørk baggrund → skift nedenf.)*/
  --fc-focus-alt: #ffd760;     /* fokus-ring på farvede knapper            */

  /* --- Typografi ------------------------------------------------------- */
  --fc-font: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --fc-font-display: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;

  --fc-fs-sm: 1rem;
  --fc-fs-md: 1.05rem;
  --fc-fs-lg: 1.2rem;
  --fc-fs-xl: 1.7rem;
  --fc-fs-2xl: 2.1rem;

  /* --- Spacing (4px-skala) --------------------------------------------- */
  --fc-space-1: 4px;
  --fc-space-2: 8px;
  --fc-space-3: 12px;
  --fc-space-4: 16px;
  --fc-space-5: 22px;
  --fc-space-6: 28px;

  /* --- Radius ---------------------------------------------------------- */
  --fc-radius-sm: 12px;
  --fc-radius-md: 16px;
  --fc-radius-lg: 22px;
  --fc-radius-pill: 999px;

  /* --- Skygger --------------------------------------------------------- */
  --fc-shadow-panel: 0 30px 80px rgba(15, 30, 37, 0.35);
  --fc-shadow-btn: 0 18px 34px rgba(31, 126, 67, 0.3);

  /* --- Touch-mål (plejemiljø: store, rolige mål) ----------------------- */
  --fc-touch-min: 56px;
}

/* ====================================================================== */
/* Fælles komponent-klasser (fc-)                                          */
/* Bruges af shared/help.js og shared/celebration.js; spil kan opt-in.     */
/* ====================================================================== */

/* Knap-basis + varianter -------------------------------------------------*/
/* [hidden] skal vinde over vores display:inline-flex (author-CSS slår UA'ens
   [hidden]{display:none}). */
.fc-btn[hidden] { display: none !important; }

.fc-btn {
  font: inherit;
  font-weight: 800;
  font-size: var(--fc-fs-md);
  cursor: pointer;
  border-radius: var(--fc-radius-md);
  padding: 14px 22px;
  min-height: var(--fc-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  border: 2px solid transparent;
  transition: background-color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.fc-btn--primary {
  background: var(--fc-teal);
  color: #fff;
  border-color: var(--fc-teal);
}
.fc-btn--primary:hover,
.fc-btn--primary:focus-visible { background: var(--fc-teal-dark); }

.fc-btn--success {
  background: linear-gradient(180deg, #2fa95d, var(--fc-success-dark));
  color: #fff;
  box-shadow: var(--fc-shadow-btn);
}
.fc-btn--success:hover,
.fc-btn--success:focus-visible { filter: brightness(1.05); }

.fc-btn--ghost {
  background: var(--fc-surface);
  color: var(--fc-teal-dark);
  border-color: var(--fc-teal);
}
.fc-btn--ghost:hover,
.fc-btn--ghost:focus-visible { background: var(--fc-teal-tint); }

.fc-btn--danger {
  background: var(--fc-danger);
  color: #fff;
  border-color: var(--fc-danger);
}
.fc-btn--danger:hover,
.fc-btn--danger:focus-visible { filter: brightness(1.05); }

/* ====================================================================== */
/* Tilgængeligheds-lag (foldet ind fra a11y.css — Fase 0 #1/#3/#5)         */
/* ====================================================================== */

/* Synligt tastatur-/kontakt-fokus — overtrumfer spillenes outline:none. */
button:focus-visible,
a:focus-visible,
.cell:focus-visible,
.exit-link:focus-visible,
.fc-help-btn:focus-visible,
.fc-btn:focus-visible,
[role="button"]:focus-visible {
  outline: 4px solid var(--fc-focus) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}

/* Fokus-ring på farvede/mørke knapper → brug den lyse variant. */
.fc-btn--primary:focus-visible,
.fc-btn--success:focus-visible,
.fc-btn--danger:focus-visible {
  outline-color: var(--fc-focus-alt) !important;
}

/* Tydeligere primær statustekst (id-selector slår spillenes muted-farve). */
#status-message {
  color: var(--fc-ink);
  font-weight: 600;
}

/* Reduceret bevægelse: dæmp animationer/overgange for følsomme brugere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}