/* ==========================================================================
   WAAPS — brand tokens

   The single place colour and type are declared for the web. Every SVG in this
   kit that is meant to follow the page reads --waaps-red / --waaps-black
   / --waaps-gray, with the production value baked in as a fallback so the
   files still render correctly through <img>, in email and in print.

     <link rel="stylesheet" href="/brand/css/waaps-brand.css">
   ========================================================================== */

:root {
  --waaps-red: #C9081D;
  --waaps-black: #111111;
  --waaps-gray: #555555;
  --waaps-white: #FFFFFF;

  /* Tagline on dark surfaces — secondary to white, never full strength. */
  --waaps-gray-dark: #B8B8B8;

  --waaps-font: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Type
   The wordmark in the production SVGs is outlined, so this stack is only for
   headings and UI that should sit alongside the logo.
   -------------------------------------------------------------------------- */

.waaps-wordmark-type {
  font-family: var(--waaps-font);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.waaps-tagline-type {
  font-family: var(--waaps-font);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--waaps-gray);
}

/* --------------------------------------------------------------------------
   Minimum sizes
   Below these the lockups stop resolving; drop to the next variant instead.
   -------------------------------------------------------------------------- */

.waaps-logo-header { min-height: 24px; }  /* below 24px use the mark alone */
.waaps-mark { min-width: 24px; }          /* at 16-20px use waaps-mark-small.svg */

/* --------------------------------------------------------------------------
   Clear space
   Keep one module thickness — 18% of the mark's width — free on every side.
   -------------------------------------------------------------------------- */

.waaps-clearspace { padding: 18%; }

/* --------------------------------------------------------------------------
   Dark surfaces
   Swap the file rather than filtering the artwork: the mark holds Waaps red
   on every background, and only the type inverts.
   -------------------------------------------------------------------------- */

.waaps-on-dark { --waaps-black: var(--waaps-white); --waaps-gray: var(--waaps-gray-dark); }