/* variables.css — Design tokens */
/* Brand tokens come from css/parc-tokens.css, lifted from parc.studio. */
/* This file adds only what the park itself needs on top of them. */

@font-face {
  font-family: 'Helvetica Now';
  src: url('../assets/fonts/Helvetica-Now-Var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: block;
}

@font-face {
  font-family: 'Parc Helvetica';
  src: url('../assets/fonts/Parc-Helvetica-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../assets/fonts/Alte-Haas-Grotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: block;
}

:root {
  /* -- families -- */
  --font-sans: 'Helvetica Now';
  --font-parc: 'Parc Helvetica';
  --font-not-today: 'Alte Haas Grotesk';

  /* -- surfaces -- */
  /* Aliases onto parc's own tokens rather than copies of the hex values, so
     this stays in sync if the studio palette moves. */
  --lawn: var(--color-light-grey); /* #f2f2f2 */
  --ink: var(--color-black);
  --paper: var(--color-white);
  /* The site builds hierarchy out of black at three alpha tiers rather than
     out of greys, so dimmed text stays the same ink as the text beside it.
     --quiet is the "mid" rung; --faint is what an inactive title gets. */
  --quiet: rgb(0 0 0 / var(--opacity-20));
  --faint: rgb(0 0 0 / 0.05);
  --accent: var(--color-lime); /* #b1d539 */
  /* Deliberately not --color-border (#f6f6f6): that disappears against the
     white card frames at this size. */
  --line: #e4e4e4;
  /* not today's own blue, off the space deck. The bandstand uses this. */
  --accent-ntt: #2bb9fd;

  /* -- type, from parc.studio -- */
  /* The site's three text styles, carried across as ratios rather than pixel
     sizes: parc.studio is read at 10–20px on a laptop, the park at room scale.
     What transfers is weight, tracking-per-em and leading — not the scale.
     Source of truth: ../parc-website/TYPOGRAPHY.md. */

  /* Uppercase UI — nav links, project titles, CTAs. 0.251px at 10px. */
  --type-ui-weight: 628;
  --type-ui-tracking: 0.0251em;
  /* Editorial title — .project-hero-title, and the largest title anywhere on
     the site at 20px. 624 / 24.15px leading / 0.25px tracking. */
  --type-title-weight: 624;
  --type-title-leading: 1.2075;
  --type-title-tracking: 0.0125em;
  /* Body — .u-about-text. 500 / 13.8px / 16.1px leading / 0.25px tracking. */
  --type-body-weight: 500;
  --type-body-leading: 1.167;
  --type-body-tracking: 0.0181em;

  /* -- world type -- */
  /* Signs are read at roughly 1:1 world scale, so these are near enough to */
  /* their rendered pixel size. Big, in the way a talk needs to be big. */
  --sign-title-size: 132px;
  --sign-body-size: 26px;
  --sign-kicker-size: 20px;
  --card-label-size: 22px;

  /* -- screen type -- */
  /* The HUD is the one place read at laptop distance, so it takes parc's real
     pixel sizes rather than the ratios above. */
  --ui-size: var(--font-size-10, 10px);
  --ui-weight: var(--type-ui-weight);
  --ui-tracking: 0.251px;
  --panel-title-size: 20px;
  --panel-title-leading: 24.15px;
  --panel-body-size: 13.8px;
  --panel-body-leading: 16.1px;

  /* -- rhythm -- */
  --gutter: 15px;
  --edge: 20px;
}