/**
 * Tierfreundeskreis.de – TFK Foundation
 *
 * Dauerhafte projektweite Grundlage für:
 * - semantische Design-Tokens,
 * - Light- und Dark-Mode-Kompatibilität,
 * - sichtbaren Tastaturfokus,
 * - Reduced Motion,
 * - spätere Search-, Account-, Cart- und Drawer-Komponenten.
 *
 * CSS-Schichten:
 * 1. TheMAG-Basis
 * 2. diese TFK-Foundation
 * 3. bestehende Übergangsregeln in custom.css
 * 4. spätere komponentenspezifische Libraries
 *
 * Zugeordnete Maßnahmen:
 * FIX-09 – CSS-Schichten konsolidieren
 * FIX-16 – Dark Mode und semantische Tokens
 *
 * TheMAG und Charm bleiben unverändert.
 */


/* ==========================================================
   1. Kompatibilitäts-Aliasse für bestätigte TheMAG-Tokenfehler
   ========================================================== */

:root {
  /*
   * TheMAG definiert versehentlich
   * --mag-navigation-color-acive,
   * verwendet später jedoch --mag-navigation-color-active.
   */
  --mag-navigation-color-active:
    var(--mag-navigation-color-acive);

  /*
   * TheMAG definiert --mag-bg-grey,
   * verwendet an einzelnen Stellen jedoch --mag-bg-gray.
   */
  --mag-bg-gray:
    var(--mag-bg-grey);
}


/* ==========================================================
   2. Semantische TFK-Tokens
   ========================================================== */

:root {
  /* Seiten- und Oberflächenfarben. */
  --tfk-color-page:
    var(--mag-bg-default);

  --tfk-color-surface:
    var(--mag-bg-default);

  --tfk-color-surface-raised:
    var(--mag-bg-default);

  --tfk-color-surface-muted:
    var(--mag-bg-grey);

  --tfk-color-surface-subtle:
    var(--mag-bg-grey-light);

  /* Textfarben. */
  --tfk-color-text:
    var(--mag-text-primary);

  --tfk-color-text-muted:
    var(--mag-text-secondary);

  --tfk-color-text-hint:
    var(--mag-text-hint);

  --tfk-color-heading:
    var(--mag-headline);

  /* Linien und Abgrenzungen. */
  --tfk-color-border:
    var(--mag-border);

  --tfk-color-divider:
    var(--mag-divider);

  /* Semantische Statusfarben. */
  --tfk-color-info:
    var(--mag-info);

  --tfk-color-success:
    var(--mag-success);

  --tfk-color-warning:
    var(--mag-warning);

  --tfk-color-error:
    var(--mag-error);

  /*
   * Backdrop hinter späteren Dialogen und Drawern.
   * Nicht mit einer Panel-Oberfläche verwechseln.
   */
  --tfk-color-backdrop:
    rgba(38, 50, 56, 0.48);

  /* Fokusdarstellung. */
  --tfk-focus-color:
    #1565c0;

  --tfk-focus-width:
    3px;

  --tfk-focus-offset:
    2px;

  /* Schatten für angehobene Oberflächen und Overlays. */
  --tfk-shadow-raised:
    0 0.25rem 1rem rgba(38, 50, 56, 0.16);

  --tfk-shadow-overlay:
    0 0.75rem 2.5rem rgba(38, 50, 56, 0.24);

  /* Kleine, bewusst begrenzte Radius-Skala. */
  --tfk-radius-sm:
    0.25rem;

  --tfk-radius-md:
    0.625rem;

  --tfk-radius-pill:
    999px;

  /* Bewegungstokens für spätere TFK-Komponenten. */
  --tfk-duration-fast:
    150ms;

  --tfk-duration-standard:
    200ms;

  --tfk-duration-panel:
    250ms;

  --tfk-ease-standard:
    ease;
}


/* ==========================================================
   3. Datenschutzfreundliche Systemtypografie
   ========================================================== */

/*
 * FIX-17:
 * TheMAGs externe Google-Fonts-Library ist im Subtheme deaktiviert.
 *
 * TFK verwendet stattdessen eine lokale Systemschrift-Strategie:
 * - keine Font-Dateien von Drittanbietern,
 * - keine zusätzlichen Font-Downloads,
 * - kein FOIT/FOUT durch nachgeladene Webfonts,
 * - keine font-display-Regel erforderlich,
 * - stabile Darstellung ab dem ersten Rendern.
 *
 * Die getrennten Tokens erlauben später eine kontrollierte lokale
 * Schriftumstellung, ohne Komponenten erneut anfassen zu müssen.
 */

:root {
  --tfk-font-body:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --tfk-font-heading:
    "Plus Jakarta Sans",
    var(--tfk-font-body);
}

body {
  font-family:
    var(--tfk-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family:
    var(--tfk-font-heading);
}

/*
 * Einzelne TheMAG-Komponenten setzen Roboto oder Roboto Condensed
 * außerhalb der globalen Body-/Heading-Regeln erneut fest.
 */
.block__title,
.shariff[data-css="min"] ul li,
.shariff[data-css="complete"] ul li {
  font-family:
    var(--tfk-font-body);
}

.poll__choice__percent,
.paragraph--type--text p.dropcaps:first-letter,
body.cke_editable p.dropcaps:first-letter {
  font-family:
    var(--tfk-font-heading);
}


/* ==========================================================
   4. Eigene TFK-Werte im Dark Mode
   ========================================================== */

/*
 * Neutrale TFK-Tokens wie Hintergrund, Text und Border folgen
 * automatisch den bereits vorhandenen --mag-*-Dark-Mode-Werten.
 *
 * Nur eigenständige TFK-Werte werden hier überschrieben.
 */

:root.themag-dark {
  --tfk-color-backdrop:
    rgba(0, 0, 0, 0.72);

  --tfk-focus-color:
    #bbdefb;

  --tfk-shadow-raised:
    0 0.25rem 1.25rem rgba(0, 0, 0, 0.48);

  --tfk-shadow-overlay:
    0 1rem 3rem rgba(0, 0, 0, 0.64);
}


/* ==========================================================
   5. Projektweite Tastatur-Fokusdarstellung
   ========================================================== */

/*
 * TheMAG entfernt global die Browser-Outline.
 * Diese Regel stellt für echte Interaktionselemente einen
 * sichtbaren Tastaturfokus über :focus-visible wieder her.
 *
 * Die erhöhte Spezifität ist bewusst gewählt, damit auch
 * vorhandene TheMAG-Regeln wie input.form-text:focus mit
 * outline: 0 updatefest überstimmt werden.
 */

:root :is(
  a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline:
    var(--tfk-focus-width)
    solid
    var(--tfk-focus-color);

  outline-offset:
    var(--tfk-focus-offset);
}


/* ==========================================================
   6. Reduced Motion
   ========================================================== */

/*
 * Es werden ausschließlich die TFK-eigenen Bewegungstokens
 * reduziert. Bestehende TheMAG-, Sidr-, Galerie- und
 * WE-Mega-Menu-Animationen werden hier nicht global verändert.
 *
 * Ein minimaler Wert statt 0ms hält spätere transitionend-
 * Abläufe technisch nutzbar.
 */

@media (prefers-reduced-motion: reduce) {
  :root {
    --tfk-duration-fast:
      1ms;

    --tfk-duration-standard:
      1ms;

    --tfk-duration-panel:
      1ms;
  }
}


/* ==========================================================
   7. Zustandskonvention für spätere TFK-Komponenten
   ========================================================== */

/*
 * Verbindliche Konvention:
 *
 * - Auslöser verwenden aria-expanded und aria-controls.
 * - Wirklich verborgene Panels verwenden das hidden-Attribut.
 * - Optional kann data-state="open|closed" verwendet werden.
 * - Projektklassen erhalten immer das Präfix .tfk-.
 *
 * In dieser Foundation werden bewusst keine globalen Regeln
 * für .active, .open oder .is-open definiert, weil diese
 * Zustände bereits von TheMAG, Sidr und weiteren Komponenten
 * verwendet werden.
 */