/* ==========================================================================
   DESIGN TOKENS
   The single source of truth for color, type, spacing, and motion.
   Change a value here and the whole site follows.

   Breakpoints (CSS variables can't be used inside @media, so keep these in sync by hand):
     phone   up to 809px
     tablet  810px to 1199px
     desktop 1200px and up
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #f8f9f7;           /* page background */
  --color-surface: #ffffff;      /* cards, raised areas */
  --color-ink: #17211c;          /* main text */
  --color-muted: #55615b;        /* secondary text */
  --color-line: #d9ded9;         /* borders, dividers */
  --color-accent: #2e6048;       /* pine green: links, buttons, highlights */
  --color-accent-ink: #ffffff;   /* text on top of the accent */
  --color-accent-soft: #e3ede7;  /* light tint of the accent */
  --color-symbol: #c0432d;       /* red used for the hero symbols */

  /* Type families */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-note: "Caveat", "Bradley Hand", cursive;   /* handwritten asides, use sparingly */

  /* Fluid type scale (grows smoothly from phone to large desktop) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.40vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 2rem);
  --step-3:  clamp(1.73rem, 1.45rem + 1.40vw, 2.67rem);
  --step-4:  clamp(2.07rem, 1.60rem + 2.30vw, 3.56rem);
  --step-5:  clamp(2.49rem, 1.70rem + 3.90vw, 4.75rem);
  --step-6:  clamp(3rem, 1.70rem + 6.50vw, 7rem);

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --track-display: -0.02em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(4rem, 10vw, 9rem);   /* vertical padding between page sections */

  /* Layout */
  --wrap: 120rem;                     /* max content width (1920px); only matters on very wide screens */
  --gutter: clamp(1.25rem, 8.34vw, 7.5rem);   /* side margin for all sections: 120px on desktop, smaller on phones */
  --gutter-edge: clamp(1.25rem, 2.8vw, 2.5rem);   /* side margin for the top bar: closer to the screen edges */
  --measure: 65ch;                    /* comfortable line length for paragraphs */
  --header-h: 72px;

  /* Shape */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
}