/**
 * NDPE Base – Design tokens and foundation styles.
 *
 * All values in the plugin reference these tokens.
 * No hardcoded hex or px anywhere else.
 *
 * @package NDPE
 */

/* ═══════════════════════════════════════════════════════
   Design Tokens
   ═══════════════════════════════════════════════════════ */

:root {

  /* ── Brand ──────────────────────────────────────── */
  --ndpe-primary:          #e85d04;
  --ndpe-primary-hover:    #dc4c00;
  --ndpe-primary-light:    rgba(232, 93, 4, 0.08);

  /* ── Surfaces ───────────────────────────────────── */
  --ndpe-bg:               #ffffff;
  --ndpe-surface:          #f8f8f6;
  --ndpe-surface-2:        #f0f0ee;
  --ndpe-border:           rgba(0, 0, 0, 0.08);
  --ndpe-border-strong:    rgba(0, 0, 0, 0.14);

  /* ── Text ───────────────────────────────────────── */
  --ndpe-text:             #0f0f0f;
  --ndpe-text-muted:       #6b7280;
  --ndpe-text-faint:       #9ca3af;

  /* ── Typography ─────────────────────────────────── */
  --ndpe-font:             -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --ndpe-text-xs:          clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --ndpe-text-sm:          clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --ndpe-text-base:        clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
  --ndpe-text-lg:          clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --ndpe-text-xl:          clamp(1.25rem, 1rem + 1vw, 1.75rem);

  /* ── Spacing ────────────────────────────────────── */
  --ndpe-space-1:          0.25rem;
  --ndpe-space-2:          0.5rem;
  --ndpe-space-3:          0.75rem;
  --ndpe-space-4:          1rem;
  --ndpe-space-5:          1.25rem;
  --ndpe-space-6:          1.5rem;
  --ndpe-space-8:          2rem;
  --ndpe-space-10:         2.5rem;
  --ndpe-space-12:         3rem;

  /* ── Radius ─────────────────────────────────────── */
  --ndpe-radius-sm:        6px;
  --ndpe-radius-md:        10px;
  --ndpe-radius-lg:        16px;
  --ndpe-radius-xl:        20px;

  /* ── Shadows ────────────────────────────────────── */
  --ndpe-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  --ndpe-shadow-md:        0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
  --ndpe-shadow-lg:        0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
  --ndpe-shadow-hover:     0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);

  /* ── Transitions ────────────────────────────────── */
  --ndpe-ease:             cubic-bezier(0.16, 1, 0.3, 1);
  --ndpe-duration:         220ms;
}


/* ═══════════════════════════════════════════════════════
   Base Resets (scoped to NDPE widgets)
   ═══════════════════════════════════════════════════════ */

[class*="ndpe-"] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[class*="ndpe-"] *,
[class*="ndpe-"] *::before,
[class*="ndpe-"] *::after {
  box-sizing: border-box;
}

/* ── Base Typography ──────────────────────────────── */
.ndpe-product-grid-widget,
.ndpe-placeholder {
  font-family: var(--ndpe-font);
  font-size: var(--ndpe-text-base);
  color: var(--ndpe-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}