/* Semantic layer. Components use only these names, never the raw ramps. */
:root {
  /* Brand */
  --c-brand: var(--leaf-500);
  --c-brand-deep: var(--leaf-700);
  --c-brand-tint: var(--leaf-100);
  --c-accent: var(--flame-500);
  --c-accent-hot: var(--flame-600);
  --c-accent-tint: var(--flame-100);
  --c-amber: var(--flame-400);

  /* Text */
  --c-ink: var(--bark-900);
  --c-ink-soft: var(--bark-700);
  --c-ink-muted: var(--bark-600);
  --c-ink-inverse: var(--sand-50);
  --c-on-accent: #fff;

  /* Surfaces */
  --c-paper: var(--sand-50);
  --c-bone: var(--sand-100);
  --c-sunken: var(--sand-200);
  --c-danger: #b3361f;
  --c-scrim: #0a0a0a;
  --c-glass: color-mix(in srgb, var(--sand-50) 72%, transparent);

  /* Rules */
  --c-line: var(--sand-300);
  --c-line-soft: var(--sand-200);
  --c-line-strong: var(--bark-300);

  /* Type */
  --f-display: 'Onest', 'Golos Text', 'Segoe UI', sans-serif;
  --f-text: 'Inter', 'Segoe UI', sans-serif;
  --f-label: var(--f-text);

  --fs-eyebrow: 0.8125rem;
  --fs-caption: 0.8125rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem);
  --fs-h1: clamp(2.25rem, 1.45rem + 3.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-stat: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);

  --fw-display: 700;
  --fw-heading: 600;
  --fw-strong: 600;

  --lh-tight: 1.05;
  --lh-snug: 1.14;
  --lh-text: 1.55;
  --ls-display: -0.02em;
  --ls-heading: -0.01em;

  /* Space — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Shape — the mark's rounded teardrop, not sharp corners */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-plate: 0 1px 2px rgba(26, 33, 24, 0.04), 0 8px 24px rgba(26, 33, 24, 0.06);
  --shadow-lift: 0 2px 6px rgba(26, 33, 24, 0.06), 0 18px 44px rgba(26, 33, 24, 0.1);

  /* Layout */
  --w-page: 1360px;
  --h-header: 76px;
  --h-topbar: 40px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.28s;
  --dur-slow: 0.4s;
}