/* SuccessPath design tokens
 * Voice: warm/playful entry, maturing to professional. Cream + deep teal +
 * warm amber. Rounded, friendly, but never childish. */

:root {
  /* Color */
  --bg: #fff9f0;
  --bg-soft: #fdf3e3;
  --surface: #ffffff;
  --ink: #1c2b2b;
  --ink-soft: #334444;
  --muted: #64736f;
  --line: #eadfca;

  --brand: #0e5e5b;        /* deep teal — trust */
  --brand-deep: #0a4442;
  --brand-soft: #e2f0ee;

  --accent: #f59e0b;       /* warm amber — playful energy */
  --accent-deep: #b45309;
  --accent-soft: #fef3dc;

  --coral: #f9704a;        /* sparing: fun-test moments */
  --success: #2f9e6e;
  --success-soft: #e3f4ec;
  --warn: #d97706;
  --danger: #dc2626;

  /* Type */
  --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.875rem;

  /* Spacing */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s16: 4rem;

  /* Shape */
  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(28, 43, 43, 0.06);
  --shadow: 0 4px 16px rgba(28, 43, 43, 0.08);
  --shadow-lg: 0 12px 40px rgba(28, 43, 43, 0.12);

  /* Layout */
  --maxw: 72rem;
  --maxw-narrow: 44rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 var(--s4); letter-spacing: -0.01em; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--s4); }
a { color: var(--brand); }
small, .small { font-size: var(--text-sm); color: var(--muted); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
.wrap-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--s4); }
.section { padding: var(--s16) 0; }
.section-soft { background: var(--bg-soft); }

::selection { background: var(--accent-soft); }