/**
 * SPD Design System — Foundation
 * =================================
 * Brand tokens, typography, layout, and utility foundations.
 * Based on the official SPD logo colors and the React design reference.
 */

:root {
  /* ── Brand Colors (official logo SVG) ──
     These are the official SPD logo colors. They coexist with the UI
     colors below — the logo and the React UI use slightly different
     shades, and both layers are kept intentionally. */
  --spd-blue:       #004F9F;
  --spd-blue-dark:   #0A436D;
  --spd-blue-light:  #EBF3F9;
  --spd-red:         #E30613;
  --spd-red-dark:    #B82A1C;
  --spd-gold:        #FAA61A;
  --spd-gold-dark:   #C7850F;

  /* ── Semantic Brand aliases ──
     Canonical, semantic names for the official logo colors. The raw
     --spd-blue/red/gold tokens above are kept for backward compatibility;
     new code should prefer the --spd-brand-* names. */
  --spd-brand-blue:       var(--spd-blue);
  --spd-brand-blue-dark:   var(--spd-blue-dark);
  --spd-brand-blue-light:  var(--spd-blue-light);
  --spd-brand-red:         var(--spd-red);
  --spd-brand-red-dark:    var(--spd-red-dark);
  --spd-brand-gold:        var(--spd-gold);
  --spd-brand-gold-dark:   var(--spd-gold-dark);

  /* ── UI Colors (React design reference) ──
     The React UI uses slightly different shades from the logo. These are
     the validated, pixel-faithful React values. Section stylesheets
     reference these instead of re-declaring raw hexes, reducing
     duplication while preserving the exact validated render. */
  --spd-ui-blue:       #0F5B94;
  --spd-ui-blue-dark:   #0A436D;
  --spd-ui-blue-soft:   #EBF3F9;
  --spd-ui-red:         #D93829;
  --spd-ui-gold:        #EAA21D;

  /* ── Neutrals ── */
  --spd-bg:          #F8FAFC;
  --spd-surface:     #FFFFFF;
  --spd-surface-muted: #F1F5F9;  /* slate-100 — subtle muted surface */
  --spd-text:        #0F172A;
  --spd-text-muted:  #64748B;
  --spd-text-light:  #94A3B8;     /* slate-400 — lightest text (captions, placeholders) */
  --spd-border:      #E2E8F0;
  --spd-border-dark: #CBD5E1;

  /* ── States ── */
  --spd-success:     #10B981;
  --spd-warning:     #F59E0B;
  --spd-error:       #EF4444;
  --spd-info:        #0F5B94;    /* informational accent (uses UI blue) */

  /* ── Typography ── */
  --spd-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --spd-font-size-xs:   0.75rem;
  --spd-font-size-sm:   0.875rem;
  --spd-font-size-base: 1rem;
  --spd-font-size-lg:   1.125rem;
  --spd-font-size-xl:   1.25rem;
  --spd-font-size-2xl:  1.5rem;
  --spd-font-size-3xl:  1.875rem;
  --spd-font-size-4xl:  2.25rem;
  --spd-font-size-5xl:  3rem;

  --spd-font-weight-normal:    400;
  --spd-font-weight-medium:    500;
  --spd-font-weight-semibold:  600;
  --spd-font-weight-bold:      700;
  --spd-font-weight-extrabold: 800;
  --spd-font-weight-black:     900;

  --spd-line-height-tight:   1.25;
  --spd-line-height-normal:  1.5;
  --spd-line-height-relaxed: 1.625;

  --spd-tracking-tight:  -0.025em;
  --spd-tracking-normal: 0;
  --spd-tracking-wide:   0.025em;
  --spd-tracking-wider:  0.05em;

  /* ── Spacing scale ──
     A small, consistent scale (4px base unit) used for gaps, padding
     and margins across sections. Centralizes the repeated raw values
     (4px, 8px, 12px, 16px, 24px, 32px, 48px) found across the
     section stylesheets. */
  --spd-space-1: 0.25rem;  /* 4px  */
  --spd-space-2: 0.5rem;   /* 8px  */
  --spd-space-3: 0.75rem;  /* 12px */
  --spd-space-4: 1rem;     /* 16px */
  --spd-space-5: 1.5rem;   /* 24px */
  --spd-space-6: 2rem;     /* 32px */
  --spd-space-7: 3rem;     /* 48px */

  /* ── Border Radius (aligned with Tailwind v4 scale) ── */
  --spd-radius-sm:  0.375rem;  /* 6px  → rounded-md */
  --spd-radius-md:  0.5rem;   /* 8px  → rounded-lg */
  --spd-radius-lg:  0.75rem;  /* 12px → rounded-xl */
  --spd-radius-xl:  1rem;     /* 16px → rounded-2xl */
  --spd-radius-2xl: 1.5rem;   /* 24px → rounded-3xl */
  --spd-radius-full: 9999px;

  /* ── Shadows ── */
  --spd-shadow-2xs: 0 1px rgb(0 0 0 / 0.05);              /* Tailwind v4 shadow-2xs */
  --spd-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);        /* Tailwind v4 shadow-xs */
  --spd-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
  --spd-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
  --spd-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
  --spd-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);

  /* ── Container ── */
  --spd-container-max:    1280px;
  --spd-container-padding: 1rem;
  --spd-container-padding-sm: 1.5rem;
  --spd-container-padding-lg: 2rem;

  /* ── Transitions ── */
  --spd-transition-fast:   150ms ease;
  --spd-transition-normal: 250ms ease;
  --spd-transition-slow:   400ms ease;

  /* ── Z-index scale ── */
  --spd-z-base:    1;
  --spd-z-dropdown: 1000;
  --spd-z-sticky:   1020;
  --spd-z-drawer:   1040;
  --spd-z-modal:    1060;
  --spd-z-toast:    1080;

  /* ── Shell (Phase 2) ── */
  --spd-footer-bg:      #0B1E2E;
  --spd-footer-surface: #0F2436;
  --spd-footer-border:  #1E3346;
  --spd-header-bg:      #FFFFFF;
  --spd-header-height:  64px;
  --spd-header-height-lg: 72px;
  --spd-topbar-height: 34px;
  --spd-focus-ring: 0 0 0 3px rgba(0, 79, 159, 0.35);
  --spd-focus-ring-red: 0 0 0 3px rgba(227, 6, 19, 0.30);
}

/* ── Global font family ── */
body {
  font-family: var(--spd-font-family);
  color: var(--spd-text);
  background-color: var(--spd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Container utility ── */
.spd-container {
  max-width: var(--spd-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spd-container-padding);
  padding-right: var(--spd-container-padding);
}

@media (min-width: 640px) {
  .spd-container {
    padding-left: var(--spd-container-padding-sm);
    padding-right: var(--spd-container-padding-sm);
  }
}

@media (min-width: 1024px) {
  .spd-container {
    padding-left: var(--spd-container-padding-lg);
    padding-right: var(--spd-container-padding-lg);
  }
}

/* ── Top Bar ── */
.spd-top-bar {
  background-color: var(--spd-blue);
  color: #fff;
  font-size: var(--spd-font-size-xs);
  font-weight: var(--spd-font-weight-semibold);
  padding: 0.5rem 0;
}

.spd-top-bar .spd-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.spd-top-bar__left,
.spd-top-bar__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.spd-top-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.spd-top-bar__item svg {
  flex-shrink: 0;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .spd-top-bar__right {
    display: none;
  }
  .spd-top-bar .spd-container {
    justify-content: center;
  }
}

/* ── WhatsApp floating button ── */
.spd-whatsapp-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--spd-z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--spd-radius-full);
  background-color: #25D366;
  color: #fff;
  box-shadow: var(--spd-shadow-lg);
  transition: transform var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}

.spd-whatsapp-btn:hover,
.spd-whatsapp-btn:focus {
  transform: scale(1.08);
  box-shadow: var(--spd-shadow-xl);
  color: #fff;
}

.spd-whatsapp-btn svg {
  width: 28px;
  height: 28px;
}

/* ── Price styling ── */
.spd-price {
  font-weight: var(--spd-font-weight-bold);
  color: var(--spd-text);
}

.woocommerce .price .spd-price {
  font-size: var(--spd-font-size-lg);
}

/* ── WooCommerce: basic card foundation ──
   These selectors target the NATIVE WooCommerce shop / category / archive
   loop (ul.products li.product), not the SPD custom product card. The SPD
   custom card (rendered on the homepage and any custom grid) uses its own
   robust .spd-product-card__* classes (see spd-products.css) and does not
   depend on WooCommerce's ul/li markup. The high specificity here is
   intentional: it overrides WooCommerce's default loop styling. Do not
   reduce specificity without verifying the shop / category pages still
   render correctly. */
.spd-woocommerce .woocommerce ul.products li.product {
  border: 1px solid var(--spd-border);
  border-radius: var(--spd-radius-xl);
  background: var(--spd-surface);
  box-shadow: var(--spd-shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--spd-transition-normal), transform var(--spd-transition-normal);
}

.spd-woocommerce .woocommerce ul.products li.product:hover {
  box-shadow: var(--spd-shadow-md);
  transform: translateY(-2px);
}

.spd-woocommerce .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--spd-font-family);
  font-weight: var(--spd-font-weight-bold);
  font-size: var(--spd-font-size-base);
  color: var(--spd-text);
}

.spd-woocommerce .woocommerce ul.products li.product .button {
  background-color: var(--spd-blue);
  color: #fff;
  border-radius: var(--spd-radius-md);
  font-weight: var(--spd-font-weight-bold);
  font-size: var(--spd-font-size-sm);
  padding: 0.625rem 1.25rem;
  transition: background-color var(--spd-transition-fast);
}

.spd-woocommerce .woocommerce ul.products li.product .button:hover {
  background-color: var(--spd-blue-dark);
  color: #fff;
}

.spd-woocommerce .woocommerce ul.products li.product .price {
  color: var(--spd-text);
  font-weight: var(--spd-font-weight-bold);
}

.spd-woocommerce .woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--spd-red);
}

.spd-woocommerce .woocommerce ul.products li.product .price del {
  color: var(--spd-text-muted);
  opacity: 0.7;
}

/* ── WooCommerce: single product foundation ── */
.spd-woocommerce.woocommerce div.product .product_title {
  font-family: var(--spd-font-family);
  font-weight: var(--spd-font-weight-extrabold);
  color: var(--spd-text);
}

.spd-woocommerce.woocommerce div.product p.price,
.spd-woocommerce.woocommerce div.product span.price {
  color: var(--spd-text);
  font-weight: var(--spd-font-weight-bold);
}

.spd-woocommerce.woocommerce div.product form.cart .button {
  background-color: var(--spd-blue);
  color: #fff;
  border-radius: var(--spd-radius-md);
  font-weight: var(--spd-font-weight-bold);
  padding: 0.75rem 2rem;
}

.spd-woocommerce.woocommerce div.product form.cart .button:hover {
  background-color: var(--spd-blue-dark);
  color: #fff;
}

.spd-woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-color: var(--spd-blue);
  color: var(--spd-blue);
}

/* ── WooCommerce: messages ── */
.spd-woocommerce .woocommerce-message {
  border-top-color: var(--spd-blue);
  background-color: var(--spd-blue-light);
  border-radius: var(--spd-radius-md);
}

.spd-woocommerce .woocommerce-message::before {
  color: var(--spd-blue);
}

.spd-woocommerce .woocommerce-error {
  border-top-color: var(--spd-error);
  background-color: #FEF2F2;
  border-radius: var(--spd-radius-md);
}

.spd-woocommerce .woocommerce-error::before {
  color: var(--spd-error);
}

/* ── WooCommerce: buttons global ── */
.spd-woocommerce .woocommerce a.button,
.spd-woocommerce .woocommerce button.button,
.spd-woocommerce .woocommerce input.button,
.spd-woocommerce .woocommerce #respond input#submit {
  background-color: var(--spd-blue);
  color: #fff;
  border-radius: var(--spd-radius-md);
  font-weight: var(--spd-font-weight-bold);
  font-family: var(--spd-font-family);
  transition: background-color var(--spd-transition-fast);
}

.spd-woocommerce .woocommerce a.button:hover,
.spd-woocommerce .woocommerce button.button:hover,
.spd-woocommerce .woocommerce input.button:hover,
.spd-woocommerce .woocommerce #respond input#submit:hover {
  background-color: var(--spd-blue-dark);
  color: #fff;
}

/* ── WooCommerce: checkout ── */
.spd-woocommerce.woocommerce-checkout .woocommerce form.woocommerce-checkout {
  border-radius: var(--spd-radius-xl);
}

.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row input[type="text"],
.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row input[type="tel"],
.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row input[type="email"],
.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row input[type="password"],
.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row textarea,
.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row select {
  border: 1px solid var(--spd-border);
  border-radius: var(--spd-radius-md);
  padding: 0.625rem 0.875rem;
  font-family: var(--spd-font-family);
  font-size: var(--spd-font-size-sm);
  transition: border-color var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}

.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row input:focus,
.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.spd-woocommerce.woocommerce-checkout .woocommerce form .form-row select:focus {
  border-color: var(--spd-blue);
  box-shadow: 0 0 0 3px rgba(0, 79, 159, 0.1);
  outline: none;
}

/* ── Accessibility ── */
.spd-skip-link:focus {
  position: absolute;
  left: -9999px;
  z-index: var(--spd-z-modal);
}

.spd-skip-link:focus:focus {
  position: static;
  left: auto;
}

/* ── Screen reader text ── */
.spd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}