:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Neutrals */
  --neutral-0: #ffffff;
  --neutral-50: #fbfaf7;
  --neutral-100: #f3f1ea;
  --neutral-200: #e7e4dc;
  --neutral-300: #d6d1c6;
  --neutral-500: #6a665f;
  --neutral-700: #2a2825;

  /* Yellow earth tones */
  --yellow-50: #fff9dd;
  --yellow-100: #fff1b8;
  --yellow-200: #ffe08a;
  --yellow-300: #ffd065;
  --yellow-400: #f7bc36;
  --yellow-500: #e8a71b;
  --yellow-600: #c98810;
  --yellow-700: #a56d0a;
  --yellow-800: #6f4a06;
  --yellow-900: #3f2b03;

  /* Browns / olives (complements) */
  --brown-100: #f3e8dc;
  --brown-200: #e7d3be;
  --brown-600: #7a5133;
  --olive-700: #2f5d31;

  /* Semantic */
  --text: var(--neutral-700);
  --muted: var(--neutral-500);
  --bg: var(--neutral-50);
  --surface: var(--neutral-0);
  --line: rgba(42, 40, 37, 0.12);

  --accent: var(--yellow-600);
  --accent-soft: var(--yellow-100);
  --highlight: var(--yellow-50);

  /* UI */
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, 0.06);

  /* Glass */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
}