/* Product Explorer — design tokens. Everything visual is tuned from here. */

.pe-section {
  /* Base */
  --pe-bg: #07080a;
  --pe-bg-2: #0d0f12;
  --pe-ink: #f3f1ec;                         /* 17.6:1 on --pe-bg */
  --pe-ink-2: rgba(243, 241, 236, 0.74);     /* ≈ 9:1 */
  --pe-ink-3: rgba(243, 241, 236, 0.56);     /* ≈ 5.6:1 — still AA for body text */
  --pe-line: rgba(255, 255, 255, 0.1);
  --pe-brand: #c4cd6e;                       /* Areez olive (bright) */
  --pe-accent: #cfe9f2;                      /* overridden per category from data.js */

  /* Type */
  --pe-font-en: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --pe-font-ar: "Cairo", "Noto Kufi Arabic", "Geeza Pro", sans-serif;
  --pe-fs-kicker: clamp(0.66rem, 0.62rem + 0.2vw, 0.78rem);
  --pe-fs-h: clamp(1.45rem, 1.05rem + 1.9vw, 2.6rem);
  --pe-fs-card: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  --pe-fs-panel: clamp(1.15rem, 0.9rem + 1.1vw, 1.9rem);
  --pe-fs-body: clamp(0.84rem, 0.8rem + 0.2vw, 0.98rem);

  /* Geometry */
  --pe-card-w: clamp(210px, 20vw, 290px);
  --pe-card-h: calc(var(--pe-card-w) * 1.32);
  --pe-hub: clamp(128px, 12vw, 184px);
  --pe-node: 54px;
  --pe-radius: 22px;
  --pe-radius-sm: 14px;
  --pe-nav: 88px;                            /* fixed site nav clearance */
  --pe-perspective: 1400px;

  /* Glass */
  --pe-glass-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 58%);
  --pe-glass-solid: rgba(20, 22, 26, 0.94);
  --pe-glass-border: rgba(255, 255, 255, 0.14);
  --pe-glass-blur: 18px;
  --pe-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.75), 0 10px 26px -12px rgba(0, 0, 0, 0.6);

  /* Motion (CSS-driven parts only; scroll motion lives in js/timeline.js) */
  --pe-float-dur: 7s;
  --pe-float-amp: 8px;
}