/* Northstar MMA — design tokens.
   Based on the SpaceX-inspired DESIGN.md (getdesign.md/spacex), adapted for Northstar.
   Black and white only on the site. Photography supplies every other colour. */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlowcondensed-semibold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlowcondensed-bold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("fonts/barlowcondensed-extrabold.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/barlow-medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-semibold.woff2") format("woff2"); }

:root {
  /* colour */
  --ns-canvas-night: #000000;      /* default canvas */
  --ns-canvas-night-soft: #0a0a0a; /* content bands that need to lift off the hero */
  --ns-canvas-light: #ffffff;
  --ns-canvas-cool: #f0f0fa;       /* light secondary surface, ghost-button hover */
  --ns-on-dark: #ffffff;
  --ns-on-dark-mute: #f0f0fa;
  --ns-ink: #000000;
  --ns-ink-mute: #5a5a5f;
  --ns-hairline-dark: #3a3a3f;
  --ns-hairline-light: #e0e0e8;

  /* type */
  --ns-font-display: "Barlow Condensed", "D-DIN-Bold", "Arial Narrow", Arial, sans-serif;
  --ns-font-body: "Barlow", "D-DIN", Arial, Verdana, sans-serif;

  --ns-display-xxl: 700 80px/0.95 var(--ns-font-display);  --ns-track-xxl: 1.6px;
  --ns-display-xl: 700 60px/1.2 var(--ns-font-display);    --ns-track-xl: 1.2px;
  --ns-display-lg: 700 48px/1.25 var(--ns-font-display);   --ns-track-lg: 0.96px;
  --ns-body-lg: 400 17px/1.7 var(--ns-font-body);
  --ns-body-md: 400 16px/1.5 var(--ns-font-body);          --ns-track-body: 0.32px;
  --ns-button-cap: 600 13px/0.94 var(--ns-font-body);      --ns-track-button: 1.17px;
  --ns-micro-cap: 500 12px/2 var(--ns-font-body);          --ns-track-micro: 0.96px;
  --ns-caption: 400 13px/1.5 var(--ns-font-body);

  /* shape */
  --ns-r-xs: 4px; --ns-r-sm: 8px; --ns-r-md: 16px; --ns-r-pill: 32px; --ns-r-full: 9999px;

  /* spacing (8px base) */
  --ns-s-xxs: 4px; --ns-s-xs: 8px; --ns-s-sm: 12px; --ns-s-md: 16px;
  --ns-s-lg: 18px; --ns-s-xl: 24px; --ns-s-xxl: 32px; --ns-s-huge: 48px;

  --ns-column: 1200px;
}

/* Display sizes stair-step 80 → 60 → 48 → 40 */
@media (max-width: 960px) { :root { --ns-display-xxl: 700 60px/0.95 var(--ns-font-display); --ns-display-xl: 700 48px/1.2 var(--ns-font-display); } }
@media (max-width: 767px) { :root { --ns-display-xxl: 700 48px/0.95 var(--ns-font-display); --ns-display-xl: 700 40px/1.2 var(--ns-font-display); --ns-display-lg: 700 34px/1.25 var(--ns-font-display); } }
@media (max-width: 599px) { :root { --ns-display-xxl: 700 40px/0.95 var(--ns-font-display); } }

/* Signature pieces */
.ns-display { font: var(--ns-display-xxl); letter-spacing: var(--ns-track-xxl); text-transform: uppercase; margin: 0; }
.ns-eyebrow { font: var(--ns-micro-cap); letter-spacing: var(--ns-track-micro); text-transform: uppercase; }
.ns-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: var(--ns-button-cap); letter-spacing: var(--ns-track-button); text-transform: uppercase;
  padding: var(--ns-s-lg) var(--ns-s-xl); border-radius: var(--ns-r-pill);
  border: 1px solid currentColor; background: transparent; color: var(--ns-on-dark); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ns-btn:hover, .ns-btn:focus-visible { background: var(--ns-on-dark); color: var(--ns-ink); }
.ns-btn--light { color: var(--ns-ink); }
.ns-btn--light:hover, .ns-btn--light:focus-visible { background: var(--ns-ink); color: var(--ns-on-dark); }