/*
 * Tre Stewart Design System — Core
 * Source of truth for design tokens and base UI components.
 * Shared between trestewart.com (Next.js) and static HTML exports.
 *
 * Note: --font-display and --font-body are NOT defined here.
 * Each environment loads its own fonts and sets those variables.
 */

/* ── Color tokens ────────────────────────────────────────── */
:root {
  --forest:        #2D5F3D;
  --forest-deep:   #1F4629;
  --forest-mist:   #437955;
  --deep-blue:     #1E3A5F;
  --slate:         #3D4A56;

  --earth:         #8B6F47;
  --earth-light:   #B08A5B;
  --coral-fire:    #FF9970;
  --coral-deep:    #E67456;
  --cream:         #F5E6D3;
  --cream-warm:    #EED9BE;

  --dusk-peach:    #F4B38B;
  --dusk-rose:     #D5728A;
  --dusk-plum:     #6B3D6E;
  --eggplant:      #3B2248;
  --eggplant-deep: #1E1228;
  --streetlight:   #FFB266;

  --ivory:         #FAF8F3;
  --ivory-deep:    #F0ECE2;
  --space:         #2B2B2B;
  --night:         #16131F;
  --ink:           #1E2B33;

  /* ── Motion ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ─────────────────────────────────────────── */
  --gutter: clamp(20px, 4vw, 56px);
  --max:    1240px;
}

/* ── Typography base ─────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5vw, 64px);   line-height: 1.08; letter-spacing: 0.01em; }
h2 { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3;  letter-spacing: -0.005em; }

p { text-wrap: pretty; }

/* ── Layout utility ──────────────────────────────────────── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

/* ── Eyebrow label ───────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
  opacity: 0.75;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 14px 22px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn .arrow,
.btn .arr {
  transition: transform 220ms var(--ease-out);
}
.btn:hover .arrow,
.btn:hover .arr {
  transform: translateX(3px);
}

/* Primary — forest green */
.btn-primary {
  background: var(--forest);
  color: var(--ivory);
}
.btn-primary:hover {
  background: var(--forest-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(31, 70, 41, 0.3);
  color: var(--ivory);
  text-decoration: none;
}

/* Ghost — transparent with forest border */
.btn-ghost {
  background: transparent;
  color: var(--forest);
  border-color: rgba(45, 95, 61, 0.35);
}
.btn-ghost:hover {
  background: rgba(45, 95, 61, 0.05);
  border-color: var(--forest);
  color: var(--forest);
  text-decoration: none;
}

/* Coral — warm accent */
.btn-coral {
  background: var(--coral-fire);
  color: var(--night);
}
.btn-coral:hover {
  background: var(--cream);
  color: var(--night);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 153, 112, 0.35);
  text-decoration: none;
}

/* Ghost Cream — for dark backgrounds */
.btn-ghost-cream {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245, 230, 211, 0.4);
}
.btn-ghost-cream:hover {
  background: rgba(245, 230, 211, 0.08);
  border-color: rgba(245, 230, 211, 0.7);
  color: var(--cream);
  text-decoration: none;
}