/* Design tokens. Everything that a brand decision can change lives here.
   Swapping the navy or a typeface is an edit in this file and nowhere else. */

/* Fonts are self-hosted on purpose. No request leaves the visitor's browser
   to a third party, so there is nothing to disclose in the privacy notice. */

@font-face {
  font-family: 'Saira Condensed';
  src: url('../assets/fonts/SairaCondensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Saira Condensed';
  src: url('../assets/fonts/SairaCondensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../assets/fonts/IBMPlexSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../assets/fonts/IBMPlexSans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Colours from the brand guide v0.3 (27 September 2026). Nothing else on
     the site holds a colour value.
     The navy is the logo's own ground and the canonical navy. */
  --navy:        #102041;
  --navy-panel:  #162A50;
  --navy-line:   #24375F;
  --line-strong: #5A6D94;   /* 3:1 on the navy, for form field edges */

  --text:        #E6EAF2;   /* off-white, never #fff */
  --text-muted:  #97A3BC;

  --error:       #E0684C;   /* 4.8:1 on the navy */

  /* The one accent. Orange, 5.8:1 on the navy. The guide allows one use per
     screen; the MARINETECH of the wordmark belongs to the logo lockup and
     does not count. Hover, focus and selection may use it, since they are
     momentary. Cyan is retired. */
  --accent:      #ED7D31;
  --accent-deep: #DA6C2E;   /* hover and pressed, 4.7:1 */

  /* Logo mark: the silver mark from the brand kit v0.3, traced from the
     original image. TODO: when the designer's own vector arrives, point
     --logo at it, and correct --logo-ratio if its proportions differ.
     Nothing else on the site changes. */
  --logo:       url('../assets/img/piranha-mark-silver.svg');
  --logo-ratio: 874 / 378;

  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-12: 3rem;   --s-16: 4rem;
  --s-24: 6rem;   --s-32: 8rem;

  /* Two radii for the whole site. No more. */
  --r-sm: 2px;
  --r-md: 4px;

  --measure: 62ch;
  --page-max: 82.5rem;   /* 1320px at the base size; grows with it on wide screens */
}