/* ==========================================================================
   Schwarzer Falke e.V. — Designsystem-Token
   Etappe 4 · Übergabe · Stand Juli 2026

   Einzige Quelle der Wahrheit für Farbe, Typografie, Abstand und Form.
   Kein Wert in einer Komponente wird hart geschrieben — alles referenziert
   hier hinein. Wer einen Wert ändern will, ändert ihn genau an dieser Stelle.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     FARBE — Rohpalette
     Namen bezeichnen die Farbe, nicht ihren Zweck. Nie direkt in
     Komponenten verwenden — dafür sind die semantischen Token darunter da.
     --------------------------------------------------------------------- */

  /* Tinte (Navy) — Neukalibrierung des CI-Tons #002233 */
  --sf-ink-900: #04141C;
  --sf-ink-800: #0A2130;   /* Leitfarbe Flächen */
  --sf-ink-700: #10303F;
  --sf-ink-600: #1C4157;
  --sf-ink-500: #3E5D70;
  --sf-ink-400: #547C92;
  --sf-ink-300: #8AA6B6;   /* AA auf ink-800 */
  --sf-ink-200: #B9CBD6;
  --sf-ink-100: #DCE6EC;
  --sf-ink-050: #EAF1F5;

  /* Signal (Rot) — Neukalibrierung des CI-Tons #700121 */
  --sf-signal-900: #4A1019;
  --sf-signal-800: #5E1522;
  --sf-signal-700: #73192A;
  --sf-signal-600: #8A2033;   /* Leitfarbe Handlung — 7,4:1 auf Papier */
  --sf-signal-300: #E8A0AC;
  --sf-signal-200: #F0DCDF;
  --sf-signal-100: #FCF4F5;

  /* Neutral (warm) — trägt Flächen und Text */
  --sf-neutral-900: #101B22;
  --sf-neutral-700: #3A4A55;
  --sf-neutral-600: #5E6E79;
  --sf-neutral-500: #6E675E;
  --sf-neutral-400: #BFBAB0;
  --sf-neutral-300: #CFCAC1;
  --sf-neutral-200: #DDD9D1;
  --sf-neutral-150: #EBE8E2;
  --sf-neutral-100: #F5F3EF;
  --sf-neutral-050: #FBFAF8;   /* Seitengrund */
  --sf-white: #FFFFFF;

  /* Status — sparsam, nie dekorativ */
  --sf-success-700: #1E6B47;
  --sf-success-200: #C8E0D2;
  --sf-success-100: #EDF6F0;
  --sf-warning-700: #8A5A00;
  --sf-warning-200: #EBD9AE;
  --sf-warning-150: #F5E9CE;
  --sf-warning-100: #FBF3E2;


  /* ---------------------------------------------------------------------
     FARBE — Semantische Zuweisung
     Diese Token verwenden Komponenten. Ein Themenwechsel oder eine
     CI-Korrektur ändert nur die Zuweisung, nie die Komponente.
     --------------------------------------------------------------------- */

  --sf-color-page:              var(--sf-neutral-050);
  --sf-color-surface:           var(--sf-white);
  --sf-color-surface-sunken:    var(--sf-neutral-100);
  --sf-color-surface-inverse:   var(--sf-ink-800);
  --sf-color-surface-inverse-2: var(--sf-ink-900);

  --sf-color-text:              var(--sf-neutral-900);
  --sf-color-text-muted:        var(--sf-neutral-700);
  --sf-color-text-subtle:       var(--sf-neutral-600);
  --sf-color-text-on-inverse:   var(--sf-white);
  --sf-color-text-on-inverse-muted: var(--sf-ink-200);
  --sf-color-text-on-inverse-subtle: var(--sf-ink-300);

  --sf-color-heading:           var(--sf-ink-800);
  --sf-color-eyebrow:           var(--sf-signal-600);
  --sf-color-eyebrow-inverse:   var(--sf-signal-300);

  --sf-color-border:            var(--sf-neutral-200);
  --sf-color-border-strong:     var(--sf-neutral-400);
  --sf-color-border-inverse:    var(--sf-ink-600);
  --sf-color-rule:              var(--sf-neutral-150);

  --sf-color-action:            var(--sf-signal-600);
  --sf-color-action-hover:      var(--sf-signal-700);
  --sf-color-action-active:     var(--sf-signal-800);
  --sf-color-action-text:       var(--sf-white);

  --sf-color-link:              var(--sf-signal-600);
  --sf-color-link-hover:        var(--sf-signal-800);
  --sf-color-focus:             var(--sf-signal-600);

  --sf-color-icon:              var(--sf-ink-600);
  --sf-color-selection:         var(--sf-signal-200);


  /* ---------------------------------------------------------------------
     TYPOGRAFIE
     Zwei Familien plus Monospace. Serif trägt Überschriften und Fließtext
     langer Texte, Sans trägt Bedienoberfläche, Mono trägt Daten.
     --------------------------------------------------------------------- */

  --sf-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sf-font-sans:  "Libre Franklin", system-ui, -apple-system, sans-serif;
  --sf-font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Fließende Skala — Grundwert 17px mobil, 18px ab 1024px */
  --sf-text-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);   /* H1 Startseite */
  --sf-text-h1:      clamp(2rem, 1.55rem + 2.1vw, 3.25rem);
  --sf-text-h2:      clamp(1.625rem, 1.35rem + 1.35vw, 2.375rem);
  --sf-text-h3:      clamp(1.25rem, 1.15rem + 0.6vw, 1.625rem);
  --sf-text-h4:      1.3125rem;   /* 21px */
  --sf-text-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  --sf-text-body:    1.09375rem;  /* 17.5px — Serif-Fließtext */
  --sf-text-ui:      0.9375rem;   /* 15px — Sans-Bedienoberfläche */
  --sf-text-small:   0.875rem;    /* 14px */
  --sf-text-meta:    0.78125rem;  /* 12.5px — Mono-Metadaten */
  --sf-text-micro:   0.6875rem;   /* 11px — Eyebrow, Versalien */

  --sf-leading-tight:   1.06;   /* Display */
  --sf-leading-heading: 1.18;
  --sf-leading-snug:    1.4;
  --sf-leading-normal:  1.6;
  --sf-leading-relaxed: 1.72;   /* Serif-Fließtext */

  --sf-tracking-display: -0.022em;
  --sf-tracking-heading: -0.014em;
  --sf-tracking-normal:  0;
  --sf-tracking-eyebrow: 0.14em;
  --sf-tracking-mono:    0.08em;

  --sf-weight-regular:  400;
  --sf-weight-medium:   500;
  --sf-weight-semibold: 600;

  /* Zeilenlänge — harte Obergrenze für Lesbarkeit */
  --sf-measure-prose: 68ch;
  --sf-measure-lead:  58ch;
  --sf-measure-head:  22ch;


  /* ---------------------------------------------------------------------
     ABSTAND — 4px-Basis
     Jeder Abstand im System ist ein Vielfaches von 4. Keine Ausnahmen.
     --------------------------------------------------------------------- */

  --sf-space-1:  0.25rem;   /*  4px */
  --sf-space-2:  0.5rem;    /*  8px */
  --sf-space-3:  0.75rem;   /* 12px */
  --sf-space-4:  1rem;      /* 16px */
  --sf-space-5:  1.25rem;   /* 20px */
  --sf-space-6:  1.5rem;    /* 24px */
  --sf-space-8:  2rem;      /* 32px */
  --sf-space-10: 2.5rem;    /* 40px */
  --sf-space-12: 3rem;      /* 48px */
  --sf-space-16: 4rem;      /* 64px */
  --sf-space-20: 5rem;      /* 80px */
  --sf-space-24: 6rem;      /* 96px */

  /* Fließende Abschnittsabstände */
  --sf-section-y:      clamp(3rem, 7vw, 6rem);
  --sf-section-y-tight: clamp(2.25rem, 5vw, 4rem);
  --sf-gutter:         clamp(1rem, 4vw, 2.5rem);
  --sf-gap-grid:       clamp(1.5rem, 3vw, 3rem);


  /* ---------------------------------------------------------------------
     RASTER
     --------------------------------------------------------------------- */

  --sf-container-max:     1320px;
  --sf-container-text:    840px;   /* Angebots-, Textseiten */
  --sf-container-reading: 680px;   /* Fließtextspalte */
  --sf-columns: 12;


  /* ---------------------------------------------------------------------
     FORM
     Fast rechtwinklig. 2px Radius als einzige Weichzeichnung —
     Rundungen darüber wirken bei institutionellen Auftritten beliebig.
     --------------------------------------------------------------------- */

  --sf-radius-none: 0;
  --sf-radius-sm:   2px;
  --sf-border-hairline: 1px;
  --sf-border-accent:   3px;

  --sf-shadow-header: 0 1px 2px rgba(10,33,48,.06), 0 2px 8px rgba(10,33,48,.04);
  --sf-shadow-panel:  0 4px 16px rgba(10,33,48,.08);
  --sf-shadow-drawer: 0 16px 48px rgba(10,33,48,.16);
  --sf-shadow-sticky: 0 -4px 16px rgba(10,33,48,.08);


  /* ---------------------------------------------------------------------
     BEWEGUNG
     Kurz und funktional. Nie dekorativ, nie über 200ms.
     --------------------------------------------------------------------- */

  --sf-duration-fast: 120ms;
  --sf-duration-base: 180ms;
  --sf-ease: cubic-bezier(.2, 0, 0, 1);


  /* ---------------------------------------------------------------------
     TREFFERFLÄCHEN — WCAG 2.2 AA
     44px ist die Untergrenze, nicht der Zielwert.
     --------------------------------------------------------------------- */

  --sf-target-min:    44px;
  --sf-target-comfort: 48px;
  --sf-target-primary: 56px;

  --sf-focus-width:  2px;
  --sf-focus-offset: 2px;
}


/* ==========================================================================
   Globale Grundlagen
   Basis-Farben und -Typografie kommen aus theme.json (styles + elements),
   damit die WordPress-Farb-Utility-Klassen (:where-basiert) korrekt greifen.
   Hier nur strukturelle/ergänzende Regeln.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: var(--sf-focus-width) solid var(--sf-color-focus);
  outline-offset: var(--sf-focus-offset);
}

::selection { background: var(--sf-color-selection); }

/* Bewegungsreduktion respektieren — Pflicht, nicht Kür */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Sprungmarke zum Inhalt */
.sf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--sf-color-surface-inverse);
  color: var(--sf-color-text-on-inverse);
  padding: 14px 20px;
  font: var(--sf-weight-semibold) var(--sf-text-small) var(--sf-font-sans);
}
.sf-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Alias für Überschriften-Größen (h1–h3)
   WordPress wandelt Preset-Slugs mit Ziffern in Kebab-Case um: aus „h1“ wird
   --wp--preset--font-size--h-1 bzw. .has-h-1-font-size. Gespeicherte Inhalte,
   Templates und die Element-Stile in theme.json verweisen aber auf „h1“
   (--…--h1 / .has-h1-font-size) – ohne Alias blieben diese Überschriften auf
   Minigröße (11–15 px). Beide Schreibweisen funktionieren damit.
   -------------------------------------------------------------------------- */
:root,
.editor-styles-wrapper {
  --wp--preset--font-size--h1: var(--wp--preset--font-size--h-1);
  --wp--preset--font-size--h2: var(--wp--preset--font-size--h-2);
  --wp--preset--font-size--h3: var(--wp--preset--font-size--h-3);
}
.has-h1-font-size { font-size: var(--wp--preset--font-size--h-1) !important; }
.has-h2-font-size { font-size: var(--wp--preset--font-size--h-2) !important; }
.has-h3-font-size { font-size: var(--wp--preset--font-size--h-3) !important; }