/* ===== Design Tokens ===== */

:root {
  /* Palette */
  --c-bg:       #FFFFFF;
  --c-text:     #262626;
  --c-muted:    #737373;
  --c-black:    #000000;
  --c-on-image: #FFFFFF;

  /* Typography scale */
  --font-display: 'General Sans', 'Inter', sans-serif;
  --font-body:    'Switzer', 'Inter', sans-serif;

  /* Display — 60/54, -0.06em, UPPERCASE, weight 700 */
  --fs-display:     clamp(36px, 4.5vw, 60px);
  --lh-display:     clamp(30px, 3.8vw, 54px);
  --ls-display:     -0.06em;

  /* H3 — 20/20, weight 500 */
  --fs-h3:     20px;
  --lh-h3:     20px;
  --ls-h3:     -0.02em;

  /* Body — 16/22.4 */
  --fs-body:   16px;
  --lh-body:   1.4;
  --ls-body:   0.02em;

  /* Nav/dense — 16/16 */
  --fs-nav:    16px;
  --lh-nav:    16px;
  --ls-nav:    -0.02em;

  /* Caption — 14/15.4 */
  --fs-caption: 14px;
  --lh-caption: 1.1;
  --ls-caption: -0.02em;

  /* Grid */
  --container:  1265px;
  --container-pad: 10px;
  --work-width: 1245px;
  --grid-gap:   10px;
  --section-gap: 32px;
  --meta-gap:   20px;

  /* Breakpoints (used in media queries) */
  /* 1200px and 810px */

  /* Motion */
  --spring-ease:   cubic-bezier(0.34, 1.3, 0.64, 1);
  --frame-ease:    cubic-bezier(0.61, 0.02, 0.36, 0.98);
  --hover-ease:    cubic-bezier(0.27, 0, 0.51, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}