/* ============================================================
   TOKENS — the only place for colours, fonts, type scale, spacing.
   A change in Figma should mean one line changed here.
   ============================================================ */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/ppneuemontreal-book.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/ppneuemontreal-medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/ppneuemontreal-bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* DM Sans — only for the ↗ and + symbols (Figma: DM Sans Light, opsz 14).
   Self-hosted (GDPR: no Google Fonts request). License: fonts/DMSans-OFL.txt */
@font-face {
  font-family: "DM Sans Symbols";
  src: url("../fonts/dmsans-variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+002B, U+002D, U+2197;
}

:root {
  /* Colours */
  --color-ink: #04040c;        /* headings, divider lines */
  --color-text: #000000;       /* body text */
  --color-accent: #0048ff;     /* role tags, link hover, focus */
  --color-on-accent: #ffffff;
  --color-bg: #ffffff;
  --color-line: #000000;       /* divider lines */
  --color-muted: #aeaeb2;      /* gray: inactive filters, dimmed rows + their lines */

  /* Font */
  --font-base: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --fw-book: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --font-symbol: "DM Sans Symbols", var(--font-base);
  --fw-symbol: 300;

  /* Type scale — Figma desktop: H1 64px, H2/body 24px, tag 24px.
     Smaller screens: see the breakpoint overrides at the end of this file
     (my proposal — to be replaced by Niki's phone/tablet frames). */
  --fs-h1: clamp(2rem, 10vw, 4rem);   /* 64px; shrinks so the name always fits one line */
  --fs-body: 1.5rem;
  --fs-tag: 1.5rem;
  /* Figma uses "auto" line height = the font's own (H1 64→77px, 24→29px) */
  --lh-tight: normal;
  --lh-body: normal;

  /* Spacing — Figma: page padding 40px, stack gap 16px, tag gap 2px */
  --space-page: 2.5rem;

  /* Content width — max 1440px (Figma frame content is 1200px; widened
     on 2026-11-12 because 1200 felt narrow on large screens).
     --gutter = side padding that keeps content ≤ max and centred,
     while backgrounds (nav, dark sections) stay full width.
     Nav and content share it, so logo/links line up with the lines. */
  --content-max: 90rem;
  --gutter: max(var(--space-page), (100% - var(--content-max)) / 2);
  --space-stack: 1rem;
  --space-tags: 2px;
  --tag-pad: 2px 4px;

  /* Nav — Figma "Nav bar" (11:302): height 90px, side padding 45px,
     logo 24px Bold, links 18px Book with 40px gap */
  --nav-height: 5.625rem;
  --nav-pad-x: var(--gutter);   /* was 45px in Figma; aligned to content (40px) */
  --fs-logo: 1.5rem;
  --fs-nav: 1.125rem;
  --nav-gap: 2.5rem;

  /* Motion — one easing everywhere: fast start, long soft landing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 0.9s;

  /* Layers */
  --z-nav: 10;
  --z-logo: 11;

  /* Sections — Figma "Music" (33:6196): padding 40px, title→content 32px */
  --section-pad: 2.5rem;
  --section-gap: 2rem;
  --fs-small: 1rem;            /* 16px: filters, list headings */
  --fs-text: 1.125rem;         /* 18px: list rows, links */

  /* Project list — Figma column widths */
  --filters-w: 11.4375rem;     /* 183px */
  --col-w: 20.5%;              /* = 204px of the 997px table at 1280: project, artist, year */
  --list-head-gap: 2.5rem;     /* 40px headings → first row */
  --row-pad: 1rem;             /* 16px above/below each row */

  /* Lines */
  --line: 1px solid var(--color-line);
  --line-thin: 0.5px solid var(--color-line);
}

/* ---------- Breakpoints (proposal, not from Figma) ----------
   Tablet  ≤ 1023px · Phone ≤ 767px. Components read these tokens;
   layout changes per component are in css/responsive.css. */
@media (max-width: 1023px) {
  :root {
    --space-page: 2rem;
    --section-pad: 2rem;
    --fs-body: 1.25rem;
    --fs-tag: 1.25rem;
    --nav-height: 4.5rem;
    --fs-nav: 1rem;
    --nav-gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  :root {
    --space-page: 1rem;
    --section-pad: 1.5rem;
    --section-gap: 1.5rem;
    --fs-body: 1.125rem;
    --fs-tag: 1rem;
    --fs-text: 1rem;
    --fs-small: 0.875rem;
    --nav-height: 3.5rem;
    --fs-logo: 1.125rem;
    --list-head-gap: 1.5rem;
  }
}