:root {
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-hero: clamp(2.8rem,   1rem    + 5.5vw,  6rem);

  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  
  --t: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  
  --w-narrow:  640px;
  --w-default: 1000px;
  --w-wide:    1200px;

  
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-passive-800) 6%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-passive-800) 8%, transparent);
  --shadow-lg: 0 12px 40px color-mix(in srgb, var(--color-passive-800) 10%, transparent);

  --color-passive-0:   #FFFFFF;
  --color-passive-50:  #FAFAF8;
  --color-passive-100: #F6F5F2;
  --color-passive-200: #ECEAE6;
  --color-passive-300: #E2E0DB;
  --color-passive-400: #B8B6B0;
  --color-passive-500: #7A7874;
  --color-passive-600: #4A4846;
  --color-passive-700: #2A2926;
  --color-passive-750: #222120;
  --color-passive-800: #1A1917;
  --color-passive-850: #141311;
  --color-passive-900: #0E0D0C;

  --color-amber-50:  #FBF0E0;
  --color-amber-300: #F2A85C;
  --color-amber-500: #E09040;
  --color-amber-900: #3A2A14;

  --color-coral-50:  #F7DACE;
  --color-coral-300: #E88060;
  --color-coral-500: #DD5E3A;
  --color-coral-900: #3B1A10;

  --color-teal-50:  #DCEEE3;
  --color-teal-300: #4FA888;
  --color-teal-500: #1F8A6E;
  --color-teal-900: #0A2A1F;

  --color-slate-50:  #EEF0F4;
  --color-slate-300: #A6B2C4;
  --color-slate-500: #8A99AE;
  --color-slate-900: #222B36;

  --color-indigo-50:  #E5E2F8;
  --color-indigo-100: #DEDBF8;
  --color-indigo-300: #7770F0;
  --color-indigo-500: #5046E5;
  --color-indigo-700: #6366F1;
  --color-indigo-800: #3B2D8A;
  --color-indigo-900: #1C1664;
}