/*
  Design tokens — mirrors the Figma variables in "Slick Machines Site".
  Change a value here (and in Figma) to update it everywhere.
*/
:root {
  /* Primitives */
  --prim-white: #FFFFFF;
  --prim-gray-50: #F6F7F8;
  --prim-gray-200: #D9DDE2;
  --prim-gray-400: #9AA2AD;
  --prim-gray-600: #5B636E;
  --prim-gray-900: #020502;   /* Brand secondary (ink) */
  --prim-blue-400: #1669A2;
  --prim-blue-500: #075AA1;   /* Brand primary */
  --prim-blue-600: #005795;
  --prim-accent-100: #FFE2D4;
  --prim-accent-500: #FF4D00; /* Primary action */
  --prim-accent-700: #C23A00;
  --prim-cream-50: #F7F6EC;
  --prim-cream-200: #E2DFB6;  /* 2nd design element */

  /* Semantic colors */
  --color-bg-page: var(--prim-white);
  --color-bg-subtle: var(--prim-gray-50);
  --color-bg-warm: var(--prim-cream-50);
  --color-bg-cream: var(--prim-cream-200);
  --color-bg-brand: var(--prim-blue-500);
  --color-bg-inverse: var(--prim-gray-900);
  --color-bg-accent: var(--prim-accent-500);
  --color-text-primary: var(--prim-gray-900);
  --color-text-secondary: var(--prim-gray-600);
  --color-text-inverse: var(--prim-white);
  --color-text-accent: var(--prim-accent-700);
  --color-text-brand: var(--prim-blue-500);
  --color-border-default: var(--prim-gray-200);
  --color-border-strong: var(--prim-gray-400);
  --color-border-brand: var(--prim-blue-500);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-card: 24px;
  --radius-full: 999px;

  /* Typography */
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}