/* ============================================================
   TOKENS — design tokens sourced from Figma (node 1:13)
   ============================================================ */
:root {
  /* Color */
  --color-bg:         #f5f5f4;
  --color-ink:         #1f273a;
  --color-ink-2:       #131825;
  --color-accent:      #fe531f;
  --color-surface:     #ffffff;
  --color-muted:       #767676;
  --color-border:      #eae8e7;
  --color-black:       #111111; /* header nav "Contact" label — distinct from --color-ink */

  /* Font families */
  --font-display: 'Anton', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-accent:  'Poppins', sans-serif;
  --font-label:   'Miriam Libre', sans-serif;

  /* Display / heading scale — fluid via clamp(), calibrated so the
     preferred (vw) term equals the exact Figma desktop px value at a
     1440px viewport, then holds flat at that value above 1440px. */
  --fs-display-2xl: clamp(3rem, 16.667vw, 15rem);      /* 240px — footer wordmark */
  --fs-display-xl:  clamp(2.75rem, 12.5vw, 11.25rem);  /* 180px — section titles */
  --fs-display-lg:  clamp(2.5rem, 8.333vw, 7.5rem);    /* 120px — hero headline, "My expertise is in" */
  --fs-display-md:  clamp(2rem, 5.556vw, 5rem);        /* 80px  — sub-headings, project titles */
  --fs-display-sm:  clamp(1.75rem, 2.917vw, 2.625rem); /* 42px  */

  /* Body / UI scale */
  --fs-2xl: 2.125rem;  /* 34px */
  --fs-xl:  1.5rem;    /* 24px */
  --fs-lg:  1.25rem;   /* 20px */
  --fs-md:  1rem;      /* 16px */
  --fs-sm:  0.875rem;  /* 14px */
  --fs-xs:  0.6875rem; /* 11px */

  /* Layout */
  --max-w:              1440px;
  --header-h:           72px;
  --section-px:         80px;
  --section-px-tablet:  48px;
  --section-px-mobile:  24px;
  --section-py:         80px;

  /* Radii */
  --radius-pill: 999px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;

  /* Z-index scale */
  --z-header:  100;
  --z-cursor:  200;
  --z-overlay: 300;
}