/* Grana Farm - Design tokens (from the Grana Farm Design System) */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Brand base ─────────────────────────────── */
  --green-900: #14290F;
  --green-800: #1E3A16;
  --green-700: #2C541D;
  --green-600: #3E7524;
  --green-500: #4F9C2E;
  --green-400: #6CB44A;
  --green-300: #96CC7A;
  --green-200: #C6E3B3;
  --green-100: #E4F1D9;
  --green-050: #F2F8EC;

  --amber-700: #9A5B00;
  --amber-600: #C77E00;
  --amber-500: #F0A400;
  --amber-400: #FDB913;
  --amber-300: #FFD35C;
  --amber-200: #FFE7A3;
  --amber-100: #FFF3D1;
  --amber-050: #FFFAEC;

  /* ── Warm neutrals ──────────────────────────── */
  --cream-000: #FFFFFF;
  --cream-050: #FBF9F3;
  --cream-100: #F5F1E6;
  --cream-200: #EAE4D3;
  --cream-300: #D8D0BA;
  --stone-500: #8A8672;
  --stone-600: #6B6853;
  --stone-700: #4C4A3B;

  /* ── Semantic aliases ───────────────────────── */
  --text-heading: var(--green-900);
  --text-body: #33402C;
  --text-muted: var(--stone-600);
  --text-inverse: var(--cream-050);

  --surface-page: var(--cream-050);
  --surface-card: var(--cream-000);
  --surface-tint: var(--green-050);
  --surface-warm: var(--amber-050);
  --surface-dark: var(--green-900);

  --border-subtle: #E7E1D0;
  --border-strong: #C9C2AB;
  --border-focus: var(--green-500);

  --link: var(--green-600);
  --link-hover: var(--green-800);

  /* ── Type ───────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  --leading-heading: 1.15;
  --leading-body: 1.55;
  --tracking-display: -0.02em;
  --tracking-caps: 0.12em;

  /* ── Space, radius, shadow, motion ──────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 45, 20, 0.06);
  --shadow-md: 0 2px 8px rgba(30, 45, 20, 0.08), 0 1px 2px rgba(30, 45, 20, 0.05);
  --shadow-lg: 0 12px 32px rgba(30, 45, 20, 0.12), 0 2px 8px rgba(30, 45, 20, 0.06);
  --shadow-focus: 0 0 0 3px rgba(79, 156, 46, 0.28);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
}