/* ═══════════════════════════════════════════════════════════════════════════
   STM Design Tokens — Extracted from index.css
   Drop this file into your WordPress theme: assets/css/stm-tokens.css
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Global Brand ── */
  --stm-navy: #002060;
  --stm-primary-blue: #1756C5;
  --stm-azure: #0066FF;
  --stm-gold: #FDBE5B;
  --stm-tan: #D8C7B2;
  --stm-white: #FFFFFF;
  --stm-gray-text: #444444;
  --stm-gray-label: #6B6B6B;
  --stm-error: #D64545;
  --stm-success: #3BAA5C;
  --stm-hover-tint: #E7EDF9;

  /* ── Growth Stage: Seed ── */
  --seed-base: #8B5E3C;
  --seed-tint1: #F4EDE8;
  --seed-tint2: #E8D9CE;
  --seed-tint3: #CBA98F;

  /* ── Growth Stage: Root ── */
  --root-base: #5A3E2E;
  --root-tint1: #E9E3DF;
  --root-tint2: #DED6D0;
  --root-tint3: #C8BAB0;

  /* ── Growth Stage: Sprout ── */
  --sprout-base: #F9983F;
  --sprout-tint1: #FEF3E8;
  --sprout-tint2: #FDEAD7;
  --sprout-tint3: #FBD1A7;

  /* ── Growth Stage: Flower ── */
  --flower-base: #ABE54C;
  --flower-tint1: #F7FCE9;
  --flower-tint2: #EBF8C8;
  --flower-tint3: #D8F193;

  /* ── Growth Stage: Fruit ── */
  --fruit-base: #1D3437;
  --fruit-tint1: #D0E3E6;
  --fruit-tint2: #B8D5DA;
  --fruit-tint3: #86B8C0;

  /* ── Growth Stage: PIF ── */
  --pif-base: #1756C5;
  --pif-tint1: #E4EBF8;
  --pif-tint2: #CEDBF2;
  --pif-tint3: #98B3E4;

  /* ── Typography ── */
  --font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  --font-page-title: 600 clamp(32px, 4vw, 40px) / 1.2 var(--font-family);
  --font-section-title: 600 clamp(24px, 3vw, 28px) / 1.2 var(--font-family);
  --font-card-title: 500 clamp(18px, 2.5vw, 20px) / 1.3 var(--font-family);
  --font-body: 400 clamp(16px, 2vw, 18px) / 1.5 var(--font-family);
  --font-caption: 400 clamp(14px, 1.5vw, 15px) / 1.4 var(--font-family);

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* ── Corners & Shadows ── */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-hero: 32px;
  --radius-catalog-card: 24px;
  --shadow-rest: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-hover: 0 3px 14px rgba(0,0,0,0.08);
  --shadow-chrome: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

  /* ── Motion ── */
  --transition-lift: transform 180ms ease-out, box-shadow 180ms ease-out;
  --hover-lift: translateY(-2px);
  --catalog-hover-lift: translateY(-6px);

  /* ── Signature Curve ── */
  --curve-size-card: 56px;
  --curve-size-catalog: 60px;
  --curve-size-detail: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-lift: opacity 200ms ease-out;
    --hover-lift: none;
    --catalog-hover-lift: none;
  }
}

/* ── Utility Classes ── */
.stm-card {
  background: var(--stm-white);
  border: 1px solid var(--stm-tan);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  box-shadow: var(--shadow-rest);
  transition: var(--transition-lift);
}
.stm-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}
.stm-signature-curve {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--curve-size-card);
  height: var(--curve-size-card);
  background: var(--stm-white);
  border-top-left-radius: var(--curve-size-card);
  pointer-events: none;
}
.stm-btn-primary {
  background: var(--stm-primary-blue);
  color: white;
  border: none;
  border-radius: var(--radius-button);
  padding: 12px 20px;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 150ms ease;
}
.stm-btn-primary:hover { background: #0E4AAF; }
.stm-btn-neutral {
  background: var(--stm-white);
  color: var(--stm-navy);
  border: 1px solid var(--stm-navy);
  border-radius: var(--radius-button);
  padding: 8px 16px;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 150ms ease;
}
.stm-btn-neutral:hover { background: var(--stm-hover-tint); }