/**
 * tokens.css — die EINZIGE Quelle für Designwerte (Regel R4).
 *
 * Jeder Farb-, Schriftgrössen- und Abstandswert des Projekts steht hier.
 * Kein Hex-Wert, kein rgb(), kein px-Abstand ist ausserhalb dieser Datei
 * zulässig; scripts/lint-tokens.mjs erzwingt das (TC-DS-01).
 *
 * HERKUNFT DER FARBWERTE
 * Anders als in Kapitel 3 der Spezifikation angenommen lagen die Marken-
 * Assets vor. Alle Farben sind daher aus den echten Dateien gemessen, nicht
 * geschätzt — es gibt keine Interimswerte:
 *   - essence consulting_Logo-einzeilig-RGB.png  → Marken-Orange, Logo-Grau
 *   - style.avif (Key-Visual)                    → Ember-Verlauf, Aktionsfarbe
 * Die vollständige Herleitung samt Kontrasttabelle: docs/ASSET-SWAP.md
 *
 * WICHTIGSTE REGEL
 * --ec-color-brand (#FF834F) erreicht auf Weiss nur 2,44:1 und verfehlt AA
 * für Text UND für UI-Elemente. Es ist Signet-, Deko- und Dunkelflächen-
 * farbe — niemals Textfarbe auf heller Fläche. Der Linter prüft das als
 * Regel `brand-orange-scope`.
 */

:root {
  /* ---------------------------------------------------------------- Farbe */

  /* Marke — aus dem Logo gemessen. Nur dekorativ, siehe Kopfkommentar. */
  --ec-color-brand: #ff834f;

  /* Aktion — aus dem Key-Visual gesampelt, damit markenecht UND barrierefrei.
     5,22:1 auf surface, 4,90:1 auf surface-alt, 5,22:1 für Weiss darauf. */
  --ec-color-primary: #b84a08;
  --ec-color-primary-hover: #963608;

  /* Logo-Grau der Wortmarke. 8,45:1 auf surface. */
  --ec-color-secondary: #4d4d4d;

  /* Akzent ist bewusst identisch mit der Marke: es gibt nur ein Orange. */
  --ec-color-accent: var(--ec-color-brand);

  --ec-color-ink: #1a1a1a;
  --ec-color-ink-muted: #5a5a5a;
  --ec-color-ink-invert: #fff;
  --ec-color-ink-muted-invert: #e8ded8;

  --ec-color-surface: #fff;
  --ec-color-surface-alt: #faf7f5;
  --ec-color-surface-invert: #1c0e08;

  /* border ist dekorativ (1,50:1) und braucht keinen Mindestkontrast.
     border-strong (3,86:1) trägt sichtbare UI-Grenzen und erfüllt 3:1. */
  --ec-color-border: #d8d2ce;
  --ec-color-border-strong: #8a8078;

  --ec-color-success: #1f6b3b;
  --ec-color-error: #a4161a;

  --ec-color-focus: var(--ec-color-ink);
  --ec-color-focus-invert: var(--ec-color-ink-invert);

  /* Ember-Verlauf des Key-Visuals, für dekorative Flächen. */
  --ec-color-ember-300: #dd530a;
  --ec-color-ember-500: #ac3f09;
  --ec-color-ember-700: #672605;
  --ec-color-ember-900: #2a0f04;

  /*
   * Fläche des Abschluss-Blocks. Bewusst ein Verlauf und nicht das flache
   * surface-invert der Fusszeile: der Block soll sich von ihr unterscheiden,
   * nicht mit ihr verschmelzen. Weiss erreicht auf ember-700 11,25:1, das
   * Marken-Orange 4,61:1 — beide Enden tragen Text und Bedienelemente.
   */
  --ec-gradient-cta: linear-gradient(
    135deg,
    var(--ec-color-ember-700),
    var(--ec-color-ember-900)
  );

  /* ----------------------------------------------------------- Typografie */

  /* Vorschlag, freigabepflichtig (Blocker B-5): style.avif ist eine Textur,
     keine Layoutvorlage — eine Hausschrift ist daraus nicht ableitbar.
     Beide Familien werden selbst gehostet (R3), Dateien folgen in T-03. */
  --ec-font-heading: "Outfit", "Outfit Fallback", system-ui, sans-serif;
  --ec-font-body: "Inter", "Inter Fallback", system-ui, sans-serif;

  /*
   * Grösser als jede Überschrift und deshalb kein Überschriftengrad: die
   * Stufe trägt ausschliesslich dekorative Ziffern (Ordnungszahlen der
   * Schwerpunktkarten). Sie ist bewusst fliessend — die Karten sind zwischen
   * 17rem und 21rem breit, eine feste Grösse würde bei 360 px den Titel
   * verdrängen.
   */
  --ec-fs-display: clamp(2.75rem, 7vw, 5rem);

  --ec-fs-h1: clamp(2.25rem, 5vw, 3.5rem);
  --ec-fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --ec-fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --ec-fs-body: 1.0625rem;
  --ec-fs-small: 0.875rem;

  --ec-lh-tight: 1.15;
  --ec-lh-base: 1.6;

  --ec-fw-regular: 400;
  --ec-fw-medium: 500;
  --ec-fw-bold: 700;

  --ec-measure: 68ch;

  /* Laufweite für Kapitälchen-artige Auszeichner (Eyebrow-Zeilen). */
  --ec-tracking-wide: 0.06em;

  /* Verschiebung aus dem Sichtfeld — für Elemente, die sichtbar bleiben
     müssen, aber niemand sehen soll (Honigtopf im Kontaktformular). */
  --ec-offscreen: -9999px;

  /* -------------------------------------------------------------- Abstand */
  /* 8-px-Raster nach Anhang B: 4/8/12/16/24/32/48/64/96 */

  --ec-space-3xs: 0.25rem;
  --ec-space-2xs: 0.5rem;
  --ec-space-xs: 0.75rem;
  --ec-space-sm: 1rem;
  --ec-space-md: 1.5rem;
  --ec-space-lg: 2rem;
  --ec-space-xl: 3rem;
  --ec-space-2xl: 4rem;
  --ec-space-3xl: 6rem;

  /* --------------------------------------------------------------- Layout */

  --ec-container-max: 80rem;
  --ec-container-pad: 1.25rem;

  /*
   * Sektionsrhythmus in drei Stufen. Ein einziger Wert für alle elf
   * Sektionen erzeugte einen Gleichtakt, in dem nichts ausser dem Hero
   * Vorrang hatte. Alle drei Stufen bleiben auf dem 8-px-Raster (Anhang B):
   * 24/56 · 48/112 · 64/144. Welche Sektion welche Stufe bekommt, entscheidet
   * $sectionRhythm in index.php — hier stehen nur die Werte.
   */
  --ec-section-py-tight: clamp(1.5rem, 4vw, 3.5rem);
  --ec-section-py: clamp(3rem, 8vw, 7rem);
  --ec-section-py-loose: clamp(4rem, 10vw, 9rem);

  /* Klebender Header: Grund- und Kompakthöhe. Die Kompakthöhe muss unter
     64 px bleiben (TC-NAV-01). */
  --ec-header-height: 5rem;
  --ec-header-height-compact: 3.5rem;

  /* Höhe der Wortmarke. Als Obergrenze gedacht, nicht als feste Höhe: auf
     schmalen Fenstern wird das Logo proportional kleiner, statt sich zu
     verziehen. Die Kompakthöhe lässt im 3,5rem-Kopf Luft nach oben und unten. */
  --ec-logo-height: 2.5rem;
  --ec-logo-height-compact: 2rem;

  /* Sprungziele dürfen nicht unter dem Sticky-Header verschwinden (8.3).
     Der Wert liegt bewusst über der Grundhöhe des Headers. */
  --ec-scroll-margin: 6rem;

  /* ----------------------------------------------------------------- Form */

  --ec-radius-sm: 0.25rem;
  --ec-radius-md: 0.5rem;
  --ec-radius-lg: 1rem;
  --ec-radius-pill: 62.4375rem;

  /* Mindestgrösse eines Bedienelements nach WCAG 2.1 (T-14). */
  --ec-touch-target: 2.75rem;

  --ec-border-width: 1px;
  --ec-border-width-thick: 2px;
  --ec-focus-width: 3px;
  --ec-focus-offset: 2px;

  /* Abdunklung hinter einem Dialog. Aus dem Verlaufsfuss des Key-Visuals. */
  --ec-color-backdrop: rgb(28 14 8 / 0.6);

  --ec-shadow-sm: 0 1px 2px rgb(42 15 4 / 0.08);
  --ec-shadow-md: 0 4px 12px rgb(42 15 4 / 0.1);
  --ec-shadow-lg: 0 12px 32px rgb(42 15 4 / 0.14);

  /* ------------------------------------------------------------- Bewegung */

  --ec-duration-fast: 150ms;
  --ec-duration-base: 200ms;
  --ec-duration-slow: 250ms;

  /* Eine Linie, die sich selbst zieht, braucht spürbar länger als ein
     Zustandswechsel — sonst ist sie da, bevor man sie als Bewegung liest. */
  --ec-duration-draw: 600ms;
  --ec-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ec-reveal-offset: 1rem;

  /* Versatz zwischen zwei nacheinander einblendenden Geschwistern. Klein
     genug, dass eine Dreiergruppe als Gruppe erscheint und nicht als Reihe
     von Einzelauftritten. */
  --ec-reveal-step: 80ms;

  /* --------------------------------------------------------------- Ebenen */

  --ec-z-base: 0;
  --ec-z-stretch: 1;
  --ec-z-sticky: 100;
  --ec-z-overlay: 200;
  --ec-z-skiplink: 300;
}

/*
 * Grössere Container-Innenabstände ab Tablet bzw. Desktop (Anhang B: 20/32/48).
 * Custom Properties sind in Media-Query-Bedingungen nicht verwendbar; die
 * Breakpoint-Werte stehen deshalb literal hier und nur hier. Der Linter führt
 * sie als Whitelist (Regel `breakpoint-whitelist`).
 */
@media (min-width: 48rem) {
  :root {
    --ec-container-pad: 2rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --ec-container-pad: 3rem;
  }
}

/*
 * Invertierte Flächen (Hero, Spotlight, Footer). Hier — und nur hier — ist das
 * Marken-Orange als Textfarbe zulässig: auf --ec-color-surface-invert erreicht
 * es 7,72:1, auf dem Ember-Verlauf des Abschluss-Blocks 4,61:1.
 */
[data-surface="invert"] {
  /*
   * Farbe UND Hintergrund werden hier mitgesetzt, nicht nur die Token.
   *
   * `color` wird vererbt, und vererbt wird der BERECHNETE Wert: ein Kindknoten
   * hat langst #1a1a1a geerbt, bevor die Umbelegung greift. Wer nur die Token
   * tauscht, bekommt dunkle Schrift auf dunkler Flache. Die Fusszeile
   * funktionierte bisher nur, weil sie beides zusatzlich selbst deklariert.
   */
  background-color: var(--ec-color-surface-invert);
  color: var(--ec-color-ink-invert);

  --ec-color-surface: var(--ec-color-surface-invert);
  --ec-color-surface-alt: var(--ec-color-ember-900);
  --ec-color-ink: var(--ec-color-ink-invert);
  --ec-color-ink-muted: var(--ec-color-ink-muted-invert);
  --ec-color-primary: var(--ec-color-brand);
  --ec-color-primary-hover: #ffa47a;
  --ec-color-border: var(--ec-color-ember-700);
  --ec-color-border-strong: var(--ec-color-ember-300);
  --ec-color-focus: var(--ec-color-focus-invert);
}

/*
 * Bewegung vollständig aus, wenn die Nutzerin das so eingestellt hat (TC-A11Y-04:
 * keine Transition > 0,1 s). Die Token werden umgesetzt statt einzelne Regeln
 * zu überschreiben — so greift es überall, auch in später hinzugefügtem CSS.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ec-duration-fast: 0ms;
    --ec-duration-base: 0ms;
    --ec-duration-slow: 0ms;
    --ec-duration-draw: 0ms;
    --ec-reveal-offset: 0;
    --ec-reveal-step: 0ms;
  }
}