/**
 * GP Fashion Pro — Tailwind-inspired design tokens (plain CSS, no build step).
 * Maps to variables used across WooCommerce partials; safe if parent already sets some.
 */
:root {
  color-scheme: light;

  /* Slate scale (Tailwind-like) */
  --gpfp-slate-50: #f8fafc;
  --gpfp-slate-100: #f1f5f9;
  --gpfp-slate-200: #e2e8f0;
  --gpfp-slate-300: #cbd5e1;
  --gpfp-slate-400: #94a3b8;
  --gpfp-slate-500: #64748b;
  --gpfp-slate-600: #475569;
  --gpfp-slate-700: #334155;
  --gpfp-slate-800: #1e293b;
  --gpfp-slate-900: #0f172a;

  /* Accent */
  --gpfp-indigo-500: #6366f1;
  --gpfp-indigo-600: #4f46e5;
  --gpfp-indigo-700: #4338ca;
  --gpfp-emerald-600: #059669;
  --gpfp-emerald-50: #ecfdf5;

  /* Semantic (used by child theme CSS) */
  --background-color: #ffffff;
  --headline-color: var(--gpfp-slate-900);
  --paragraph-color: var(--gpfp-slate-600);
  --border-color: var(--gpfp-slate-200);
  --primary-color: var(--gpfp-slate-900);
  --secondary-color: var(--gpfp-indigo-600);
  --product-price: var(--gpfp-slate-400);
  --product-discount-price: var(--gpfp-slate-900);

  /* Radii / shadows (utility-like) */
  --gpfp-radius-sm: 0.375rem;
  --gpfp-radius-md: 0.5rem;
  --gpfp-radius-lg: 0.75rem;
  --gpfp-radius-xl: 1rem;
  --gpfp-radius-2xl: 1.25rem;
  --gpfp-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --gpfp-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  --gpfp-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.06);
  --gpfp-ring: 0 0 0 1px var(--gpfp-slate-200);

  /* Layout (global / blog / pages) */
  --gpfp-content-pad: clamp(1rem, 4vw, 1.75rem);
  --gpfp-prose-max: 65rem;
  --gpfp-touch-min: 2.75rem;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WooCommerce — buttons & inputs (Tailwind-ish) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  border-radius: var(--gpfp-radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
  box-shadow: var(--gpfp-shadow-sm) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  box-shadow: var(--gpfp-shadow-md) !important;
  transform: translateY(-1px);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
  border-radius: var(--gpfp-radius-md);
  border: 1px solid var(--gpfp-slate-200);
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus {
  outline: none;
  border-color: var(--gpfp-indigo-500);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.2);
}