/* ==========================================================================
   Design tokens — transcribed verbatim from the Paper file "hairwired.co.uk".
   Do not hand-edit values here; change them in Paper and re-sync.
   ========================================================================== */

:root {
  /* Colour — default (light) surface ------------------------------------- */
  --color-background: #faf5f0;
  --color-background-hover: #ebe5e0;
  --color-background-pressed: #e2dbd4;
  --color-border: #2a1b0f;
  --color-border-subtle: #d8d1ca;
  --color-text: #2a1b0f;
  --color-text-subtle: #786a5e;

  /* Colour — inverse (dark) surface --------------------------------------- */
  --color-background-inverse: #2a1b0f;
  --color-background-hover-inverse: #392d23;
  --color-border-inverse: #faf5f0;
  --color-border-subtle-inverse: #9c8e81;
  --color-text-inverse: #faf5f0;
  --color-text-subtle-inverse: #9c8e81;

  /* Colour — green surface ------------------------------------------------ */
  --color-background-green: #23361c;
  --color-background-hover-green: #2c4125;
  --color-border-green: #f4f7f1;
  --color-border-subtle-green: #8c9c81;
  --color-text-green: #f4f7f1;
  --color-text-subtle-green: #96a78b;

  /* Colour — jet surface --------------------------------------------------- */
  --color-background-jet: #0f0a05;

  /* Colour — focus --------------------------------------------------------- */
  --color-focus: #2a1b0f;
  --color-focus-inverse: #ffffff;

  /* Type ------------------------------------------------------------------
     Fallback stacks cover the swap period and any failed font load. */
  --font-body: "Aileron", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-heading: "ABC Gravity Expanded", "Arial Black", "Helvetica Neue",
    Impact, sans-serif;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 16px;
  --font-size-lg: 22px;
  --font-size-xl: 32px;
  --font-size-xxl: 48px;

  --font-weight-body: 400;
  --font-weight-body-bold: 600;
  --font-weight-heading: 900;

  --line-height-sm: 16px;
  --line-height-md: 24px;
  --line-height-lg: 32px;
  --line-height-xl: 40px;
  --line-height-xxl: 56px;

  /* Layout ---------------------------------------------------------------- */
  --breakpoint-md: 600px;
  --breakpoint-md-tablet: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  --spacing-0: 0px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  --radius-sm: 4px;
}

/* ==========================================================================
   Webfonts — woff2 only
   --------------------------------------------------------------------------
   Aileron is a Latin subset. ABC Gravity Expanded is the licensed webfont
   exactly as Dinamo supplied it: its licence forbids modifying the file, so
   it is not subset.

   Aileron ships here as Regular (400), SemiBold (600) and Italic (400),
   matching --font-weight-body and --font-weight-body-bold exactly.
   ========================================================================== */

@font-face {
  font-family: "Aileron";
  src: url("../assets/fonts/aileron-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("../assets/fonts/aileron-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("../assets/fonts/aileron-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Gravity Expanded";
  src: url("../assets/fonts/abc-gravity-expanded-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-stretch: semi-expanded;
  font-display: swap;
}