/**
 * formatiq-catalog — Design Tokens (v0.3.0)
 *
 * Light-Theme ist Default (entspricht dem alten /product-catalog/-Look:
 * weißer Hintergrund mit B&W-Hero-Bildern, schwarzer Text, Akzent-Orange).
 * Dark-Theme ist Variant für Sites mit dunklem Brand-Kontext.
 *
 * Sämtliches Plugin-CSS referenziert ausschließlich diese Variablen.
 * Hardcoded Werte sind ein Bug.
 */

.formatiq-catalog,
.formatiq-inquiry {

  /* ---------- Marken-Akzent (theme-unabhängig) ---------- */
  --fq-accent:           #f98801;
  --fq-accent-strong:    #e07800;
  --fq-accent-soft:      rgba(249, 136, 1, 0.12);
  --fq-text-on-accent:   #ffffff;

  /* ---------- Light-Theme (Default) ---------- */
  --fq-bg-page:          #ffffff;
  --fq-bg-card:          #fafaf7;
  --fq-bg-elevated:      rgba(0, 0, 0, 0.04);
  --fq-bg-hover:         rgba(249, 136, 1, 0.08);

  --fq-text:             #2a2a2a;
  --fq-text-soft:        #4a4a48;
  --fq-text-muted:       #8a8a85;
  --fq-text-bright:      #000000;

  --fq-divider:          rgba(0, 0, 0, 0.08);
  --fq-divider-strong:   rgba(0, 0, 0, 0.15);
  --fq-border-input:     rgba(0, 0, 0, 0.18);

  --fq-shadow-card:      0 18px 36px -12px rgba(0, 0, 0, 0.12);
  --fq-shadow-soft:      0 4px 8px rgba(0, 0, 0, 0.05);
  --fq-shadow-text:      none;

  /* Hero-Bild-Behandlung: leicht entsättigt + Helligkeit hoch (alter Katalog-Look) */
  --fq-hero-filter:      brightness(108%) saturate(60%) contrast(95%);
  --fq-hero-overlay:     linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.55) 65%, var(--fq-bg-page) 100%);

  /* ---------- Typografie ---------- */
  --fq-font-body:        'Raleway', Helvetica, Arial, Lucida, sans-serif;
  --fq-font-head:        'Raleway', Helvetica, Arial, Lucida, sans-serif;

  --fq-fw-body:          400;
  --fq-fw-medium:        500;
  --fq-fw-strong:        600;
  --fq-fw-bold:          700;
  --fq-fw-heading:       800;

  --fq-fs-micro:         11px;
  --fq-fs-label:         12px;
  --fq-fs-body:          14px;
  --fq-fs-lead:          18px;
  --fq-fs-h-section:     22px;
  --fq-fs-h-page:        clamp(28px, 3.5vw, 44px);
  --fq-fs-h-display:     clamp(40px, 6vw, 72px);

  --fq-lh-body:          1.55;
  --fq-lh-heading:       1.15;

  --fq-tracking-pill:    0.20em;
  --fq-tracking-label:   0.12em;
  --fq-tracking-btn:     0.06em;

  /* ---------- Radien ----------
     --fq-radius-card ist primär für das Inquiry-Modal (dort 12px); der
     Katalog-Wrapper setzt explizit 0px via Divi-Border-Default + CSS. */
  --fq-radius-card:      12px;
  --fq-radius-img:       4px;
  --fq-radius-pill:      999px;
  --fq-radius-input:     8px;

  /* ---------- Spacing ---------- */
  --fq-pad-page:         clamp(24px, 4vw, 64px);
  --fq-pad-card:         32px;
  --fq-gap-grid:         clamp(24px, 3vw, 48px);
  --fq-gap-stack:        12px;

  /* ---------- Cover/Hero-Dimensionen ---------- */
  --fq-hero-height:      clamp(180px, 28vh, 320px);
  --fq-page-min-height:  clamp(560px, 78vh, 880px);
  /* Container-Höhe für das 3-Layer-Konzept: immersive Full-Viewport ist
     der Default; Divi-Setting (page_height) kann das überschreiben. */
  --fq-catalog-height:   100vh;

  /* ---------- Animation ---------- */
  --fq-trans-fast:       200ms ease-out;
  --fq-trans-medium:     350ms cubic-bezier(0.4, 0, 0.2, 1);
  --fq-trans-page:       650ms cubic-bezier(0.65, 0, 0.35, 1);
  --fq-trans-modal:      400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Default label styling (overridable via Divi-Modul-Settings) */
  --fq-label-transform:  none;
  --fq-label-style:      normal;

  /* ---------- Backward-Compat-Aliases (inquiry.css aus v0.2) ----------
     Tokens, die im v0.3-Tokens-Refactoring weggefallen sind, aber von
     inquiry.css noch verwendet werden. Modal-Optik bleibt dunkel (es
     ist ohnehin ein Overlay über schwarzen Backdrop). */
  --fq-bg-card-grad:    linear-gradient(135deg, #2a2a26 0%, #1f1d1a 100%);
  --fq-bg-card-soft:    rgba(31, 29, 26, 0.85);
  --fq-blur-glass:      blur(10px);
  --fq-border-faint:    rgba(255, 255, 255, 0.1);
  --fq-fs-button:       14px;
  --fq-fw-button:       700;
  --fq-trans-hover:     var(--fq-trans-fast);
}

/* ============================================================
   Dark-Theme Override
   ============================================================ */
.formatiq-catalog[data-theme="dark"] {
  --fq-bg-page:          #131210;
  --fq-bg-card:          #1f1d1a;
  --fq-bg-elevated:      rgba(255, 255, 255, 0.05);
  --fq-bg-hover:         rgba(249, 136, 1, 0.15);

  --fq-text:             #f5f5f0;
  --fq-text-soft:        #d8d8d3;
  --fq-text-muted:       #888880;
  --fq-text-bright:      #ffffff;

  --fq-divider:          rgba(255, 255, 255, 0.08);
  --fq-divider-strong:   rgba(255, 255, 255, 0.18);
  --fq-border-input:     rgba(255, 255, 255, 0.18);

  --fq-shadow-card:      0 18px 36px -12px rgba(0, 0, 0, 0.5);
  --fq-shadow-soft:      0 4px 8px rgba(0, 0, 0, 0.2);

  --fq-hero-filter:      grayscale(90%) brightness(75%) contrast(110%);
  --fq-hero-overlay:     linear-gradient(180deg, rgba(19,18,16,0.0) 0%, rgba(19,18,16,0.55) 65%, var(--fq-bg-page) 100%);
}

/* ============================================================
   Reduced-Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .formatiq-catalog,
  .formatiq-inquiry {
    --fq-trans-fast:   0ms;
    --fq-trans-medium: 0ms;
    --fq-trans-page:   0ms;
    --fq-trans-modal:  0ms;
  }
}