/*
  Design tokens pulled from the Figma redesign (Dev Mode).
  Palette is intentionally lighter/brighter than the old site's hardcoded hex values.
*/
:root {
  /* Color */
  --color-bg: #182323; /* matches AnimacionLogo.mp4's own baked-in background exactly */
  --color-bg-fog: #b7c1bc; /* mid-scroll gradient stop behind the Highlights section */
  --color-mint: #b1f9c0; /* Button/Primary component (header CTA) */
  --color-mint-2: #aaf8bb; /* EXPERIENCE cascade, Digital Interaction Designer, interactive color blocks */
  --color-green-2: #5f8f78; /* footer background, EXPERIENCE cascade, interactive color blocks */
  --color-pink: #f8c7cc; /* EXPERIENCE cascade, Digital Interaction Designer, interactive color blocks */
  --color-pink-2: #e6aeb5; /* All Projects category chips (Interaction Projects, Animation/Film) */
  --color-cream: #b7c1bc; /* was #e9e6e2 — replaced everywhere per direct request */
  --color-ink: #202020;
  --color-white: #ffffff;

  /* Typography */
  --font-thin: "Poppins-Thin", sans-serif;
  --font-light: "Poppins-Light", sans-serif;
  --font-regular: "Poppins-Regular", sans-serif;
  --font-medium: "Poppins-Medium", sans-serif;
  --font-bold: "Poppins-Bold", sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Layout */
  --content-max-width: 1920px;
  --header-height: 96px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/*
  Breakpoints (reference, used consistently across component CSS):
  mobile:  default (< 768px)
  tablet:  min-width: 768px
  desktop: min-width: 1024px
  wide:    min-width: 1400px
*/