/* ==========================================================================
   Baron — Design Tokens
   Source of truth: /design-system.md (Baron brand palette + type system)
   ========================================================================== */

:root {
  /* Colors — Baron */
  --color-forest-ink: #162517;
  --color-white: #ffffff;
  --color-warm-taupe: #746a5f;
  --color-khaki-sand: #ada48b;
  --color-deep-moss: #1c2e1e;
  --color-olive-ivy: #5c6b44;
  --color-olive-ivy-soft: #7c8c60;

  /* Typography — Font Families */
  --font-display: 'Baron Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Helvetica Neue', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-label: 'Helvetica Neue', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale (responsive clamp() versions live in styles.css) */
  --text-caption: 17px;
  --text-nav: 17px;
  --text-body: 18px;
  --leading-body: 29px;

  /* Weights */
  --font-weight-body: 300;
  --font-weight-label: 500;
  --font-weight-heading: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-11: 11px; --spacing-13: 13px; --spacing-15: 15px; --spacing-16: 16px;
  --spacing-17: 17px; --spacing-21: 21px; --spacing-22: 22px; --spacing-23: 23px;
  --spacing-31: 31px; --spacing-34: 34px; --spacing-38: 38px; --spacing-52: 52px;
  --spacing-53: 53px; --spacing-59: 59px; --spacing-68: 68px; --spacing-119: 119px;

  /* Layout */
  --page-max-width: 1240px;
  --section-gap: 128px;
  --card-padding: 28px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-full: 1000px;
  --radius-decorative: 45px;
  --radius-panels: 20px;
  --radius-icon: 100%;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card: #ffffff;
  --surface-featured: #5c6b44;
  --surface-dark: #1c2e1e;
  --surface-footer: #162517;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* Nav */
  --nav-height: 78px;
}