/* ==========================================================================
   7PF2P — design tokens
   Figma: 1728 desktop / 428 mobile. Body text is fixed-size everywhere;
   the headings listed in the brief scale with --s (see typography below).
   ========================================================================== */

:root {
  /* colors */
  --c-dark: #07060c;
  --c-white: #ffffff;
  --c-purple: #981ff4;
  --c-text: #07060c;
  --c-text-muted: #605d6c;          /* paragraphs on white */
  --c-footer-gray: #9b9b9b;
  --c-white-70: rgba(255, 255, 255, 0.7);
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-white-20: rgba(255, 255, 255, 0.2);
  --c-dark-50: rgba(7, 6, 12, 0.5);
  --c-dark-20: rgba(7, 6, 12, 0.2);
  --c-nav-bg: rgba(7, 6, 12, 0.9);

  /* fonts */
  --f-display: 'Syne', sans-serif;
  --f-body: 'Onest', sans-serif;

  /* layout — desktop grid: 12 col, 60px margin, 32px gutter */
  --gutter: 60px;
  --col-gap: 32px;
  --header-top: 40px;

  /* scale factor: 1px of the 1728 design.
     Scaled headings use calc(<figma px> * var(--s)).                       */
  --s: calc(100vw / 1728);

  /* radii */
  --r-btn: 5px;
  --r-pill: 8px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mobile design anchor (428). Between 768 and 1023 the desktop scale keeps
   shrinking (tablet tier); below 768 the 428 composition is scaled up.   */
@media (max-width: 1024px) {
  :root {
    --gutter: 16px;
    --col-gap: 16px;
  }
}
@media (max-width: 767px) {
  :root {
    --s: calc(100vw / 428);
  }
}