@font-face {
  font-family: 'Coconat';
  src: url('../assets/fonts/Coconat-Regular.woff2') format('woff2'),
       url('../assets/fonts/Coconat-Regular.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Whirlybats';
  src: url('../assets/fonts/WhirlybatsVariable.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --bg: #fefefd;
  --black: #000000;
  --dark: #444444;
  --mid: #666666;
  --grey: #ebebeb;
  --border: #ebebeb;
  --white: #ffffff;
  --sand: #dad5c7;
  --green-dot: #22c55e;

  /* Typography */
  --font-display: 'Coconat', 'Playfair Display', Georgia, serif;
  --font-body: 'Commissioner', 'Inter', -apple-system, sans-serif;
  --font-mono: 'Fira Mono', 'Courier New', monospace;
  --font-icon: 'Whirlybats', sans-serif;

  /* Type scale — fluid with clamp() */
  --text-hero-lg:    clamp(3.25rem, 6vw, 5rem);   /* 80px at 1440 */
  --text-hero: clamp(2rem, 4.24vw, 3.8125rem);   /* 61px at 1440 */
  --text-section: clamp(1.75rem, 2.7vw, 2.4375rem);  /* 39px */
  --text-card:    clamp(1.5rem, 4vw, 1.9375rem);  /* 31px */
  --text-body-lg: clamp(1.2rem, 1.7vw, 1.5625rem);     /* 25px */
  --text-body:    clamp(1rem, 2.25vw, 1.25rem);     /* 20px */
  --text-label:   0.8125rem;                           /* 13px */
  --text-tag:     0.8125rem;                          /* 13px */
  --text-stat:    clamp(2rem, 3.4vw, 3.0625rem);     /* 49px */

  /* Spacing */
  --page-margin: clamp(1.25rem, 5vw, 4.5rem);        /* 72px at 1440 */
  --section-gap: clamp(3rem, 6.9vw, 6.25rem);        /* 100px */
  --content-max: 80.25rem;                            /* 1284px (~1440 - 2×72px) */
  --content-body: 67.25rem;                         /* 1076px — general body text/content sections */
  --content-body-cs: 53.625rem;                       /* 858px — case study body text/content sections */
  --content-box: 61.5rem;                           /* 984px — case study body container/box sections */

  /* Radius */
  --radius-sm:   0.5rem;    /* 8px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-tag:  1.25rem;   /* 20px */
  --radius-full: 50px;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.7s;
}