/* ──────────────────────────────────────────────────────────────────
   COMMENCE STUDIO — Design Tokens
   Single source of truth for color, type, spacing, radius, motion.
   Mirror these values into Elementor → Site Settings → Global Colors
   and → Global Fonts so the editor surfaces them by name.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color palette ───────────────────────────────────────── */
  --paper:        #F7F5EE;   /* warm off-white background */
  --paper-2:      #FBF9F2;   /* lighter cream — cards on paper */
  --ink:          #0F0F0E;   /* near-black, slight warmth */
  --ink-2:        #1B1A17;   /* secondary ink, body copy on cards */
  --mute:         #ECE8DC;   /* tinted band background */
  --mute-2:       #E0DBC8;   /* divider tone */
  --line:         #BFB9A6;   /* hairline / divider 1.80:1 vs paper */
  --subtle:       #5A5650;   /* secondary text 6.7:1 vs paper, 5.56:1 vs mute */
  --quiet:        #8E8A7E;   /* tertiary text 3.16:1 — non-essential only */
  --accent:       #C9532E;   /* rust — decorative + non-text */
  --accent-2:     #B14624;   /* rust for text-bearing buttons (5.10:1) */
  --accent-3:     #A03A1E;   /* deep rust hover state (6.17:1) */
  --accent-soft:  #F4E5DA;   /* warm peach — Brand Support card */
  --forest:       #1F3A2E;   /* deep green — Blueprint section */
  --forest-2:     #15291F;   /* darker forest — Blueprint inner card */
  --gold:         #A57F2C;   /* star icons (3.39:1) */

  /* ── Typography ───────────────────────────────────────────── */
  --sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:   'Fraunces', 'Tiempos Headline', Georgia, serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Radius scale ───────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(15,15,14,.04), 0 4px 14px rgba(15,15,14,.04);
  --shadow-2: 0 6px 24px rgba(15,15,14,.08), 0 2px 6px rgba(15,15,14,.04);
  --shadow-3: 0 24px 64px rgba(15,15,14,.14), 0 6px 16px rgba(15,15,14,.06);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
}

/* ── Base body styles ────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
}

::selection { background: var(--accent); color: var(--paper); }

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* ── Italic-serif accent helper ─────────────────────────────── */
.it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* ── Mono eyebrow helper ────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--subtle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ── Type ramp utility classes (mirror Elementor type presets) ── */
.h1 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
.h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.h4 { font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.h5 { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.3; margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2); max-width: 60ch; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}