/* ==========================================================================
   Design Tokens — Sterling Growth Partners
   Editorial Design System
   ========================================================================== */

:root {
  /* ── Colors ── */
  --color-primary:       #ff6310;
  --color-primary-dark:  #e55a0e;
  --color-primary-light: rgba(255, 99, 16, 0.1);

  --color-dark:          #111518;
  --color-dark-rgb:      17, 21, 24;
  --color-body:          #3d4650;
  --color-muted:         #687279;

  --color-white:         #ffffff;
  --color-bg-light:      #f9fafb;
  --color-bg-alt:        #F4F5F6;
  --color-border:        #e2e5e8;

  /* ── Typography ── */
  --font-heading:        'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family:         var(--font-body);

  --fs-display:          clamp(2.5rem, 5vw + 1rem, 4rem);
  --fs-h1:               clamp(2.25rem, 4vw + 0.75rem, 3.5rem);
  --fs-h2:               clamp(2rem, 3vw + 0.75rem, 3rem);
  --fs-h3:               clamp(1.5rem, 2vw + 0.5rem, 2rem);
  --fs-h4:               clamp(1.0625rem, 1vw + 0.25rem, 1.25rem);
  --fs-body:             1.0625rem;
  --fs-body-lg:          1.1875rem;
  --fs-small:            0.875rem;
  --fs-eyebrow:          0.8125rem;

  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;

  --lh-tight:            1.2;
  --lh-snug:             1.35;
  --lh-body:             1.7;

  /* ── Spacing ── */
  --space-xs:            0.5rem;
  --space-sm:            0.75rem;
  --space-md:            1rem;
  --space-lg:            1.5rem;
  --space-xl:            2rem;
  --space-2xl:           3rem;
  --space-3xl:           4rem;
  --space-4xl:           6rem;
  --space-section:       clamp(4rem, 8vw, 6rem);

  /* ── Layout ── */
  --container-max:       1200px;
  --container-narrow:    900px;
  --container-wide:      1400px;

  /* ── Borders & Shadows ── */
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           16px;
  --radius-full:         9999px;

  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:           0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-card:         0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:   0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --ease-out:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast:     150ms var(--ease-out);
  --transition-base:     250ms var(--ease-out);
  --transition-slow:     400ms var(--ease-out);

  /* ── Header ── */
  --header-height:       80px;
}