/*
  Design tokens — friend-portfolio

  Stage 1 (reference recreation): values measured from the reference
  site (docs/references.md). Figma will replace these once the real
  design system is established; docs/design.md stays the contract.
*/
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colour: primitives ---------- */
  --white: #fff;
  --black: #000;
  --grey-600: #696969;

  /* ---------- Colour: semantic ---------- */
  --color-bg: var(--white);
  --color-ink: var(--black);
  --color-muted: var(--grey-600);

  /* ---------- Typography ---------- */
  --font-sans: "Inter Display", sans-serif;
  --weight: 600;
  --tracking: -0.03em;

  --text-s: 16px;
  --text-m: 24px;
  --text-l: 48px;
  --text-xl: 72px;
  --text-heading: var(--text-l);   /* section heading; 34px tablet, 26px mobile */
  --lh-tight: 1;
  --lh-heading: 1;                 /* 0.9 on tablet and mobile */

  /* ---------- Spacing ---------- */
  --gap-xs: 4px;
  --gap-s: 5px;
  --gap-m: 24px;
  --gap-card: 20px;
  --gap-l: 64px;
  --gap-brand-mobile: 16px;
  --gap-links-mobile: 48px;
  --hero-top: 180px;
  --section-pad: 120px;
  --footer-pad: 40px;

  /* ---------- Layout ---------- */
  --gutter: 40px;                  /* page side margin; 16px mobile */
  --gutter-nav-mobile: 20px;
  --content-max: 1360px;
  --footer-max: 1400px;
  --nav-h: 60px;
  --nav-pad-y: 18px;
  --z-nav: 10;
  --footer-h: 320px;
  --clock-w: 100px;

  /* ---------- Shape and media ---------- */
  --radius: 16px;
  --media-h: 800px;                /* 380px mobile */
  --media-h-tall: 800px;
  --media-h-card: 420px;
  --icon: 24px;
  --underline: 1px;
  --focus-w: 2px;
  --focus-offset: 3px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.68, 0, 0.16, 0.97);
  --ease-link: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-link: 0.4s;
  --dur-reveal: 1s;
  --delay-reveal: 0.15s;
  --reveal-up: 30px;
  --reveal-hero: -40px;
  --reveal-nav: -30px;
}