/* ==========================================================================
   TOKENS — colours, type, breakpoints
   Values measured 1:1 from the reference site (anastasiia.one).
   ========================================================================== */

:root {
  /* ---- Grid scale ------------------------------------------------------ */
  /* Overwritten by assets/js/engine.js on load and resize. The 1px default
     keeps the page laid out at its native grid size if JS is unavailable. */
  --u: 1px;
  --grid: 1200;

  /* ---- Colour ---------------------------------------------------------- */
  --c-ink:    #1a1a1a;   /* body text, dark hero background                 */
  --c-cream:  #eae2d6;   /* page background, footer band, hover marker      */
  --c-paper:  #faf9f7;   /* light section background, scrolled header, hero type */

  /* Semantic aliases (what each surface actually uses) */
  --bg-page:          var(--c-cream);
  --bg-hero:          var(--c-ink);
  --bg-section-light: var(--c-paper);
  --bg-footer:        var(--c-cream);
  --bg-header-solid:  var(--c-paper);

  --text-on-dark:  var(--c-paper);
  --text-on-light: var(--c-ink);

  --marker:        var(--c-cream);   /* link hover highlight */
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  /* ---- Type ------------------------------------------------------------ */
  /* The reference site sets PP Neue Montreal Medium (weight 500) everywhere.
     PP Neue Montreal is a commercial face from Pangram Pangram — drop your
     licensed .woff2 into assets/fonts/ (see the @font-face block below) and
     it takes over automatically. Until then the stack falls back to
     Helvetica Neue / Arial, which is metrically very close.               */
  --font-sans: 'PP Neue Montreal', 'PPNeueMontrealMedium', 'Neue Montreal',
               'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fw: 500;

  /* ---- Motion ---------------------------------------------------------- */
  --t-marker: 0.35s ease-in-out;   /* hover highlight sweep                 */
  --t-header: 0.4s ease-in-out;    /* header background + shadow            */
  --t-link:   0.35s ease;          /* menu link colour                      */
}

/* --------------------------------------------------------------------------
   Webfont — PP Neue Montreal Medium (Pangram Pangram Foundry).
   WOFF2 first, TTF as a fallback for anything that cannot read it.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The face is a single Medium weight. Mapping it across the range keeps any
   bold or lighter markup rendering in the same cut rather than letting the
   browser synthesise a fake bold. */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Medium.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}