/*
 * Ghorer Ponno — CSS Custom Properties
 * =====================================
 * Edit these variables to change the site's color palette.
 * You can also override them in WP Admin → Appearance → Customize → Additional CSS
 *
 * Example: to change primary to green, set --gp-primary: #16a34a;
 */
:root {
  /* ── Core palette ── */
  --gp-primary:        #2563eb;   /* Blue — buttons, links, nav accent */
  --gp-primary-dark:   #1d4ed8;   /* Blue hover state */
  --gp-primary-light:  #eff6ff;   /* Blue tint for backgrounds */
  --gp-secondary:      #f97316;   /* Orange — sale badges, Buy Now, accents */
  --gp-secondary-dark: #ea580c;   /* Orange hover state */
  --gp-secondary-light:#fff7ed;   /* Orange tint */
  --gp-purple:         #7c3aed;   /* Purple — gradient end */

  /* ── Gradients (uses the above) ── */
  --gp-grad-main: linear-gradient(135deg, var(--gp-primary), var(--gp-purple));
  --gp-grad-warm: linear-gradient(135deg, var(--gp-secondary), var(--gp-secondary-dark));

  /* ── Text ── */
  --gp-text:     #111827;   /* Headings, main text */
  --gp-muted:    #6b7280;   /* Secondary text, specs */
  --gp-subtle:   #9ca3af;   /* Placeholder, old price */

  /* ── Surfaces ── */
  --gp-bg:       #ffffff;   /* Page background */
  --gp-surface:  #f9fafb;   /* Section alt background */
  --gp-border:   #e5e7eb;   /* Card borders */

  /* ── Shadows ── */
  --gp-shadow:       0 4px 24px rgba(37, 99, 235, .07);
  --gp-shadow-hover: 0 12px 40px rgba(37, 99, 235, .16);

  /* ── Radius ── */
  --gp-radius-card:   16px;
  --gp-radius-btn:    10px;
  --gp-radius-badge:  999px;

  /* ── Typography ── */
  --gp-font: 'Poppins', 'Segoe UI', sans-serif;
}