/* Canonical values: design-tokens/tokens.json (Formavis CI). Keep in sync when changing palette. */
html:root {
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: clamp(1.1rem, 1rem + 0.32vw, 1.34rem);
  --font-size-xl: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --line-height-body: 1.65;
  --line-height-heading: 1.1;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --fv-section-padding-block: clamp(4rem, 7vw, 6.5rem);
  --fv-section-padding-block-hero: clamp(3.5rem, 7vw, 6rem);
  --fv-section-padding-block-closing: clamp(4rem, 8vw, 7rem);
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.16);
  --container-content: 78rem;
  --container-wide: 88rem;
  --transition-fast: 160ms ease;
  --transition-base: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Lock the Formavis palette so Astra Customizer colors cannot override runtime styling. */
  --color-bg: #0b1014 !important;
  --color-bg-elevated: #111820 !important;
  --color-surface: rgba(17, 24, 31, 0.95) !important;
  --color-surface-soft: rgba(18, 26, 34, 0.82) !important;
  --color-border: rgba(255, 255, 255, 0.1) !important;
  --color-border-strong: rgba(52, 207, 179, 0.24) !important;
  --color-text: #f4f7f8 !important;
  --color-text-muted: rgba(233, 240, 242, 0.68) !important;
  --color-accent: #2bb69c !important;
  --color-accent-strong: #20d2b4 !important;
  --color-warm: #c7844d !important;
  --color-success: #4cd37e !important;
  --color-warning: #f0b24a !important;
  --color-danger: #ff7f7f !important;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent) !important;

  /* Phase-1 Token-Konsolidierung (additiv, nicht breaking).
     Bestehende --color-*, --shadow-*, --focus-ring bleiben unverändert. */

  /* Shadow-Basisfarbe: behebt zuvor undefiniertes --color-shadow,
     das in integrations/formavis-pre-chat.css, integrations/zammad-chat.css
     und pages/netzwerk-demo.css über color-mix() referenziert wird.
     --color-shadow wird aus --fv-shadow-color abgeleitet und passt sich
     automatisch der Light-Mode-Überschreibung unten an. */
  --fv-shadow-color: 0, 0, 0;
  --color-shadow: rgb(var(--fv-shadow-color));

  /* Text-auf-Farbflächen — Vorlage für Phase-2-Ablösung der Hardcodings
     (#03120f, #04120e, #04100e in buttons.css, astra.css, page-*.css usw.).
     Noch nicht verwendet, nur bereitgestellt. */
  --fv-text-on-accent: #03120f;
  --fv-text-on-warm: #1d1000;
  --fv-text-on-danger: #fff4f4;
  --fv-card-blur: blur(28px) saturate(160%);
  --fv-surface-vibrant: rgba(17, 24, 31, 0.72);
  --fv-heading-tracking: -0.03em;
  --fv-hero-heading-tracking: -0.04em;
  /* h1–h6: gleiche Grundgewichtung wie Page-Hero (weicher als frueheres 700). */
  --fv-heading-font-weight: 600;

  /* Interaktions-Overlays — zentrale Stärken für hover/active Tints.
     Derived aus --color-accent, daher modus-sensitiv ohne Doppeldefinition. */
  --fv-hover-overlay: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --fv-active-overlay: color-mix(in srgb, var(--color-accent) 14%, transparent);

  /* Dekorations-Layer — ersetzt später rgba-Literale in
     layout/shell.css, layout/footer.css, components/cards.css (Grid)
     und diverse inset 0 1px 0 rgba(255,255,255,…) (Highlight). */
  --fv-grid-overlay: rgba(255, 255, 255, 0.03);
  --fv-highlight-inset: rgba(255, 255, 255, 0.18);

  --ast-global-color-0: var(--color-accent) !important;
  --ast-global-color-1: var(--color-accent-strong) !important;
  --ast-global-color-2: var(--color-text) !important;
  --ast-global-color-3: var(--color-text-muted) !important;
  --ast-global-color-4: var(--color-bg) !important;
  --ast-global-color-5: var(--color-bg-elevated) !important;
  --ast-global-color-6: var(--color-surface) !important;
  --ast-global-color-7: var(--color-surface-soft) !important;
  --ast-global-color-8: var(--color-border) !important;
  --ast-color-text-primary: var(--color-text) !important;
  --ast-color-link: var(--color-accent) !important;
  --ast-color-link-hover: var(--color-accent-strong) !important;
  --ast-border-color: var(--color-border) !important;
}

html[data-theme="light"] {
  --color-bg: #f1f4f3 !important;
  --color-bg-elevated: #f7f9f8 !important;
  --color-surface: rgba(255, 255, 255, 0.96) !important;
  --color-surface-soft: rgba(246, 249, 247, 0.94) !important;
  --color-border: rgba(17, 30, 27, 0.1) !important;
  --color-border-strong: rgba(43, 182, 156, 0.2) !important;
  --color-text: #13201d !important;
  --color-text-muted: rgba(19, 32, 29, 0.64) !important;
  --color-accent: #239d84 !important;
  --color-accent-strong: #1fb79a !important;
  --color-warm: #bf7b47 !important;
  --color-success: #1f8c4b !important;
  --color-warning: #b77918 !important;
  --color-danger: #d64555 !important;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 10%, transparent) !important;
  --ast-global-color-0: var(--color-accent) !important;
  --ast-global-color-1: var(--color-accent-strong) !important;
  --ast-global-color-2: var(--color-text) !important;
  --ast-global-color-3: var(--color-text-muted) !important;
  --ast-global-color-4: var(--color-bg) !important;
  --ast-global-color-5: var(--color-bg-elevated) !important;
  --ast-global-color-6: var(--color-surface) !important;
  --ast-global-color-7: var(--color-surface-soft) !important;
  --ast-global-color-8: var(--color-border) !important;
  --ast-color-text-primary: var(--color-text) !important;
  --ast-color-link: var(--color-accent) !important;
  --ast-color-link-hover: var(--color-accent-strong) !important;
  --ast-border-color: var(--color-border) !important;
  --shadow-sm: 0 1px 2px rgba(20, 30, 26, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 30, 26, 0.06);
  --shadow-lg: 0 24px 48px rgba(20, 30, 26, 0.1);

  /* Phase-1 Light-Overrides für die neuen Tokens.
     --color-shadow, --fv-hover-overlay und --fv-active-overlay
     leiten sich aus --fv-shadow-color bzw. --color-accent ab und
     brauchen hier keine erneute Deklaration. */
  --fv-shadow-color: 20, 30, 26;

  --fv-text-on-accent: #05231d;
  --fv-text-on-warm: #241200;
  --fv-text-on-danger: #ffffff;
  --fv-card-blur: blur(20px) saturate(140%);
  --fv-surface-vibrant: rgba(255, 255, 255, 0.74);
  --fv-heading-tracking: -0.03em;
  --fv-hero-heading-tracking: -0.04em;

  --fv-grid-overlay: rgba(15, 23, 42, 0.04);
  --fv-highlight-inset: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  html:root {
    --fv-section-padding-block: clamp(2.5rem, 6vw, 4rem);
    --fv-section-padding-block-hero: clamp(2rem, 5vw, 3.25rem);
    --fv-section-padding-block-closing: clamp(2.5rem, 6vw, 4rem);
  }
}