/* YPL design tokens — brand book v1 (Oct 2026). Components use these only. */

@font-face {
  font-family: "CoFo Cinema1909";
  src: url("../assets/fonts/cofo-cinema1909.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* colour */
  --lime: #b5f800;
  --black: #000000;
  --paper: #f4f1ea;
  --ink: #111111;
  --blue: #0036ff;
  --grey-1: #0d0d0d;   /* raised surface on black */
  --grey-2: #1c1c1c;   /* hairlines on black */
  --grey-3: #8a8a8a;   /* secondary text on black (6.0:1) */
  --ink-2: #4a4a4a;    /* secondary text on paper (8.1:1) */
  --rule-paper: #d9d4c8;

  /* type */
  --font-head: "CoFo Cinema1909", "Libre Caslon Condensed", Georgia, serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(36px, 5vw, 64px);
  --fs-h2: clamp(32px, 4.2vw, 56px);
  --fs-h3: clamp(20px, 2vw, 24px);
  --fs-100: clamp(120px, 18vw, 240px);
  --fs-body: 17px;
  --fs-lead: clamp(18px, 1.6vw, 21px);
  --fs-label: 13px;
  --fs-small: 14px;
  --lh-head: 1.0;
  --lh-body: 1.6;
  --track-head: 0.04em;
  --track-label: 0.06em;

  /* space */
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(48px, 7vw, 112px);
  --max: 1200px;
  --measure: 62ch;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* shape */
  --radius: 4px;
  --radius-pill: 999px;
  --tap: 48px;
  --header-h: 60px;

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-mid: 250ms;
  --t-slow: 400ms;
}