/*
 * PeptaLux Design Tokens — single source of truth.
 *
 * Loaded FIRST in the child theme enqueue stack so every downstream
 * stylesheet (parent style.css, child style.css, page-specific
 * checkout.css / thankyou.css) can resolve var(--plx-*).
 *
 * Token naming follows the Phase 5/launch-finalization spec.
 * Heading/body element rules at the bottom lock the typographic scale —
 * placed in this file so nothing else overrides them by load order.
 */

:root {
  /* Primary palette */
  --plx-primary: #1E50A0;
  --plx-primary-hover: #0F2D6B;
  --plx-primary-bg: rgba(30, 80, 160, 0.1);

  /* Link colors (anchor reset uses these) */
  --plx-link: #1E50A0;
  --plx-link-hover: #0F2D6B;

  /* Text */
  --plx-body: #1A1A1A;
  --plx-body-light: #475569;
  --plx-muted: #64748B;

  /* Surfaces / backgrounds */
  --plx-bg-surface: #FFFFFF;
  --plx-bg-page: #F5F7FA;
  --plx-bg-subtle: #F0F4FA;

  /* Borders */
  --plx-border: #E1E5EB;
  --plx-border-hover: #C8D4E8;
  --plx-border-focus: #1E50A0;

  /* Focus ring */
  --plx-focus-ring: rgba(30, 80, 160, 0.1);

  /* Typography scale (1.25 modular ratio) */
  --plx-text-xs: 12px;
  --plx-text-sm: 13px;
  --plx-text-base: 16px;
  --plx-text-lg: 20px;
  --plx-text-xl: 24px;
  --plx-text-2xl: 30px;
  --plx-text-3xl: 36px;

  /* Font weights */
  --plx-weight-regular: 400;
  --plx-weight-medium: 500;
  --plx-weight-semibold: 600;
  --plx-weight-bold: 700;

  /* Line heights */
  --plx-leading-tight: 1.25;
  --plx-leading-snug: 1.4;
  --plx-leading-normal: 1.5;
  --plx-leading-relaxed: 1.6;

  /* Spacing scale */
  --plx-space-1: 4px;
  --plx-space-2: 8px;
  --plx-space-3: 12px;
  --plx-space-4: 16px;
  --plx-space-5: 20px;
  --plx-space-6: 24px;
  --plx-space-8: 32px;
  --plx-space-10: 40px;
  --plx-space-12: 48px;
  --plx-space-16: 64px;

  /* Radii */
  --plx-radius-sm: 4px;
  --plx-radius: 8px;
  --plx-radius-lg: 12px;
  --plx-radius-xl: 16px;

  /* Shadows */
  --plx-shadow-sm: 0 1px 2px rgba(15, 40, 71, 0.05);
  --plx-shadow: 0 4px 16px rgba(15, 40, 71, 0.08);
  --plx-shadow-lg: 0 8px 24px rgba(15, 40, 71, 0.12);

  /* Transitions */
  --plx-transition: 150ms ease;

  /* Legacy aliases (kept for any inline style="" still referencing the old names) */
  --plx-primary-dark: var(--plx-primary-hover);
  --plx-charcoal: #3D3D3D;
  --plx-text: var(--plx-body);
  --plx-bg-soft: var(--plx-bg-page);
  --plx-white: var(--plx-bg-surface);
  --plx-accent-green: #2D7D5F;
  --plx-gradient: linear-gradient(135deg, var(--plx-primary) 0%, var(--plx-primary-hover) 100%);
}

/* ─── Heading scale lock ───────────────────────────────────────────────── */
h1 { font-size: var(--plx-text-3xl); font-weight: var(--plx-weight-bold);     line-height: var(--plx-leading-tight); }
h2 { font-size: var(--plx-text-2xl); font-weight: var(--plx-weight-bold);     line-height: var(--plx-leading-tight); }
h3 { font-size: var(--plx-text-xl);  font-weight: var(--plx-weight-semibold); line-height: var(--plx-leading-snug);  }
h4 { font-size: var(--plx-text-lg);  font-weight: var(--plx-weight-semibold); line-height: var(--plx-leading-snug);  }
body, p {
  font-size: var(--plx-text-base);
  line-height: var(--plx-leading-normal);
  color: var(--plx-body);
}

/* ─── Global anchor reset (kills default browser blue + purple visited) ── */
a, a:link {
  color: var(--plx-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:visited { color: var(--plx-link); }
a:hover { color: var(--plx-link-hover); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--plx-primary);
  outline-offset: 2px;
}

/* ─── Focus rings on all interactive elements ──────────────────────────── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--plx-primary);
  outline-offset: 2px;
}

/* ─── Smooth transitions on buttons globally ───────────────────────────── */
button, .button, .wp-block-button__link, .single_add_to_cart_button {
  transition: background-color var(--plx-transition),
              color var(--plx-transition),
              border-color var(--plx-transition),
              transform var(--plx-transition),
              box-shadow var(--plx-transition);
}
button:hover, .button:hover, .wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* ─── Card hover lift (parent's .peptalux-lc already has this; .product-card
       and .compound-card pick it up here for shop loop and other surfaces) ── */
.product-card,
.compound-card {
  transition: transform var(--plx-transition), box-shadow var(--plx-transition);
}
.product-card:hover,
.compound-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--plx-shadow-lg);
}

/* ─── Featured-compound card (parent class .peptalux-lc) — wrap-anchor reset
       so the new <a> wrapping the card body inherits text styling correctly ── */
.peptalux-lc > a,
.peptalux-lc a.peptalux-lc__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.peptalux-lc > a:hover,
.peptalux-lc a.peptalux-lc__link:hover {
  text-decoration: none;
  color: inherit;
}

/* ─── FAQ open-state polish (rest of the accordion stays in parent CSS) ── */
.plx-faq-item.open .plx-faq-q {
  color: var(--plx-primary);
}