:root {
  --sc-content-width: 76rem;
  --sc-reading-width: 33rem; /* ~70-75 characters of 18px Source Sans 3 (Launch Kit 60-75; measured in the lab); was 44rem */
  --sc-heading-width: 44rem; /* page-header title block and homepage hero text (the previous measure, kept for headings) */

  --sc-color-horizon-green: #00B956;
  --sc-color-horizon-orange: #FF6A00;
  --sc-color-deep-ink: #102C22;
  --sc-color-action-green: #006B3F;
  --sc-color-clear-blue: #2864F0;
  --sc-color-vivid-violet: #7952E8;
  --sc-color-sun-yellow: #FFD234;
  --sc-color-warm-coral: #FF7A68;
  --sc-color-fresh-mint: #D7F8DF;
  --sc-color-cloud: #F5FAF4;
  --sc-color-white: #FFFFFF;
  --sc-color-muted-ink: #52635B;
  --sc-color-soft-border: #BCCFC1;

  --sc-font-body: "Source Sans 3", sans-serif;
  --sc-font-heading: "Source Serif 4", serif;

  --sc-font-weight-regular: 400;
  --sc-font-weight-semibold: 600;
  --sc-font-weight-bold: 700;

  /* Spacing scale (Phase 49B/49C - new implementation decision). */
  --sc-space-1: 0.25rem;  /* 4px */
  --sc-space-2: 0.5rem;   /* 8px */
  --sc-space-3: 0.75rem;  /* 12px */
  --sc-space-4: 1rem;     /* 16px */
  --sc-space-5: 1.5rem;   /* 24px */
  --sc-space-6: 2rem;     /* 32px */
  --sc-space-7: 3rem;     /* 48px */
  --sc-space-8: 4rem;     /* 64px */
  --sc-space-9: 6rem;     /* 96px */

  /* Container horizontal padding, per breakpoint. */
  --sc-container-padding-desktop: 2rem;
  --sc-container-padding-tablet: 1.5rem;
  --sc-container-padding-mobile: 1rem;

  /* Typography scale. H1-H4 vary by breakpoint; everything else below
     is a single size used at all breakpoints. */
  --sc-text-h1-size-desktop: 3rem;
  --sc-text-h1-size-tablet: 2.5rem;
  --sc-text-h1-size-mobile: 2.125rem; /* 34px - Launch Kit mobile H1 34-40px; was 2rem */
  --sc-text-h1-line-height: 1.15;

  --sc-text-h2-size-desktop: 2.25rem;
  --sc-text-h2-size-tablet: 2rem;
  --sc-text-h2-size-mobile: 1.75rem;
  --sc-text-h2-line-height: 1.2;

  --sc-text-h3-size-desktop: 1.75rem;
  --sc-text-h3-size-tablet: 1.5rem;
  --sc-text-h3-size-mobile: 1.375rem;
  --sc-text-h3-line-height: 1.25;

  --sc-text-h4-size-desktop: 1.375rem;
  --sc-text-h4-size-tablet: 1.25rem;
  --sc-text-h4-size-mobile: 1.125rem;
  --sc-text-h4-line-height: 1.3;

  /* H5/H6 remain Source Serif 4 at 600, same as H1-H4 - no separate
     font-family/weight token needed, only size/line-height/spacing. */
  --sc-text-h5-size: 1.0625rem;
  --sc-text-h5-line-height: 1.4;

  --sc-text-h6-size: 0.9375rem;
  --sc-text-h6-line-height: 1.4;
  --sc-text-h6-letter-spacing: 0.02em;

  --sc-text-body-lg-size: 1.125rem;
  --sc-text-body-lg-line-height: 1.55; /* Launch Kit body reading text 18px / 1.55 */

  --sc-text-body-size: 1rem;
  --sc-text-body-line-height: 1.6;

  --sc-text-body-sm-size: 0.875rem;
  --sc-text-body-sm-line-height: 1.5;

  --sc-text-eyebrow-size: 0.875rem; /* 14px - Launch Kit metadata minimum; was 0.75rem */
  --sc-text-eyebrow-line-height: 1.4;
  --sc-text-eyebrow-letter-spacing: 0.08em;

  --sc-text-meta-size: 0.875rem; /* 14px - Launch Kit metadata minimum; was 0.8125rem */
  --sc-text-meta-line-height: 1.4;

  --sc-text-nav-size: 1rem;
  --sc-text-nav-line-height: 1.2;

  --sc-text-button-size: 1rem;
  --sc-text-button-line-height: 1.2;

  --sc-text-tag-size: 0.875rem; /* 14px - Launch Kit metadata minimum; was 0.75rem */
  --sc-text-tag-line-height: 1.2;
  --sc-text-tag-letter-spacing: 0.02em;

  /* Radii - restrained/editorial: small and medium only, no pill/full radius. */
  --sc-radius-sm: 4px;
  --sc-radius-md: 8px;

  /* Shared height for buttons, inputs, selects and other primary controls;
     also the minimum intended touch target. */
  --sc-control-height: 44px;

  /* Visible focus indicator (brand-mandated). Reuses Action Green - no new
     focus color is introduced. */
  --sc-focus-color: var(--sc-color-action-green);
  --sc-focus-width: 2px;
  --sc-focus-offset: 2px;

  /* Card primitives. No shadow token: Phase 49B chose a flat, shadow-light
     visual system; add one later only if an actual component needs it. */
  --sc-card-radius: var(--sc-radius-md);
  --sc-card-border-color: var(--sc-color-soft-border);
  --sc-card-padding: var(--sc-space-5);

  /* Button primitives. Color pairings are applied directly in .sc-button--*
     below, not as separate tokens, to avoid inventing new color roles. */
  --sc-button-radius: var(--sc-radius-sm);
  --sc-button-padding-x: var(--sc-space-5);
  --sc-button-padding-y: var(--sc-space-3);

  /* Form primitives. Muted Ink, not Soft Border, per the explicit brand
     rule that Soft Border is decorative only and inputs need a stronger
     boundary. */
  --sc-input-border-color: var(--sc-color-muted-ink);
  --sc-input-radius: var(--sc-radius-sm);

  /* Header sizing, in preparation for a future header (not built yet). */
  --sc-header-height-desktop: 96px;
  --sc-header-height-mobile: 72px;

  /* Error-state color (Phase 49B decision): reuses Warm Coral rather than
     introducing a 14th color. Errors must always pair this with explicit
     text and/or an icon - never color alone. No form-error component is
     built yet; this token is preparation only. */
  --sc-status-error: var(--sc-color-warm-coral);
}

/*
 * Responsive breakpoints (Phase 49B three-tier system). Documented here as
 * reference only - CSS custom properties cannot be used inside media query
 * conditions, so these values are applied directly in media queries when
 * components are built, not as --sc-* variables.
 *
 *   Mobile:  0-767px
 *   Tablet:  768-1023px
 *   Desktop: 1024px and up
 */

/* ==========================================================================
   Base primitives
   Lightweight, reusable building blocks for future components. These do
   not restyle native HTML elements or WordPress/Hello Elementor defaults -
   they are opt-in classes only.
   ========================================================================== */

.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sc-control-height);
  padding: var(--sc-button-padding-y) var(--sc-button-padding-x);
  border: none;
  border-radius: var(--sc-button-radius);
  font-family: var(--sc-font-body);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-text-button-size);
  line-height: var(--sc-text-button-line-height);
  text-decoration: none;
  cursor: pointer;
}

.sc-button:hover {
  opacity: 0.9;
}

.sc-button:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

.sc-button--primary {
  background-color: var(--sc-color-action-green);
  color: var(--sc-color-white);
}

.sc-button--secondary {
  background-color: var(--sc-color-horizon-green);
  color: var(--sc-color-deep-ink);
}

.sc-link {
  color: var(--sc-color-action-green);
  text-decoration: underline;
}

.sc-link:hover {
  opacity: 0.9;
}

.sc-link:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

.sc-eyebrow {
  display: inline-block;
  font-family: var(--sc-font-body);
  font-weight: var(--sc-font-weight-bold);
  font-size: var(--sc-text-eyebrow-size);
  line-height: var(--sc-text-eyebrow-line-height);
  letter-spacing: var(--sc-text-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.sc-meta {
  font-family: var(--sc-font-body);
  font-weight: var(--sc-font-weight-regular);
  font-size: var(--sc-text-meta-size);
  line-height: var(--sc-text-meta-line-height);
  color: var(--sc-color-muted-ink);
}