/* Wapps brand foundations: tokens for brand materials (not product UI).
   Built 2026-10-28 by src/build.py from the logo package (docs/brand/logo/NOTES.md). Do not edit by hand.
   Typeface: Roobert, Saans and Saans Mono (Displaay). The first @font-face rules name the licensed faces:
   an installed face first, then the files in fonts/licensed/ (README.md there; no file is in the repository).
   The rules after them are the free fallback (Instrument Sans, Fragment Mono), which renders until then. */

@font-face {
  font-family: "Roobert";
  src: local("Roobert SemiBold"),
       local("Roobert-SemiBold"),
       url("fonts/licensed/Roobert-SemiBold.woff2") format("woff2"),
       url("fonts/licensed/Roobert-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Saans";
  src: local("Saans Regular"),
       local("Saans-Regular"),
       local("Saans"),
       url("fonts/licensed/Saans-Regular.woff2") format("woff2"),
       url("fonts/licensed/Saans-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Saans";
  src: local("Saans Medium"),
       local("Saans-Medium"),
       url("fonts/licensed/Saans-Medium.woff2") format("woff2"),
       url("fonts/licensed/Saans-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Saans Mono";
  src: local("Saans Mono Regular"),
       local("SaansMono-Regular"),
       local("Saans Mono"),
       url("fonts/licensed/SaansMono-Regular.woff2") format("woff2"),
       url("fonts/licensed/SaansMono-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("fonts/fragment-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Logo colours. Use them only as NOTES.md sets them. */
  --wapps-logo-letters: #141A33;
  --wapps-logo-letters-on-dark: #EEF0F8;
  --wapps-logo-shard: #2356FF;
  --wapps-logo-shard-on-dark: #6F8CFF;
  --wapps-logo-shard-small: #3E73FF;
  --wapps-logo-ground-light: #F3F4F7;
  --wapps-logo-ground-dark: #0D1022;
  --wapps-logo-tile: #0D1022;

  /* Brand palette: brand materials only. */
  --wapps-night: var(--wapps-logo-ground-dark); /* #0D1022 */
  --wapps-midnight: #1E253F;
  --wapps-twilight: #353C55;
  --wapps-dusk: #A4AABD;
  --wapps-porcelain: var(--wapps-logo-letters-on-dark); /* #EEF0F8 */
  --wapps-navy: var(--wapps-logo-letters); /* #141A33 */
  --wapps-slate: #596075;
  --wapps-silver: #CBCDD7;
  --wapps-mist: #E4E6EC;
  --wapps-paper: var(--wapps-logo-ground-light); /* #F3F4F7 */
  --wapps-white: #FFFFFF;
  --wapps-ultramarine: var(--wapps-logo-shard); /* #2356FF */
  --wapps-ultramarine-on-dark: var(--wapps-logo-shard-on-dark); /* #6F8CFF */
  --wapps-ultramarine-wash: #E3EBFD;
  --wapps-ultramarine-wash-dark: #1B2954;

  /* Typeface: the licensed family first, then the free fallback. */
  --wapps-font-heading: "Roobert", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --wapps-font-brand: "Saans", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --wapps-font-mono: "Saans Mono", "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
  --wapps-font-email: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wapps-weight-regular: 400;
  --wapps-weight-medium: 500;
  --wapps-weight-semibold: 600;
  --wapps-display-tracking: -0.025em; --wapps-display-leading: 1.02;
  --wapps-title-tracking: -0.018em; --wapps-title-leading: 1.08;
  --wapps-heading-tracking: -0.01em; --wapps-heading-leading: 1.2;
  --wapps-body-tracking: 0.0em; --wapps-body-leading: 1.5;
  --wapps-caption-tracking: 0.01em; --wapps-caption-leading: 1.4;
  --wapps-data-tracking: 0.0em; --wapps-data-leading: 1.45;

  /* Spacing and radius: 1 unit = 4 px on screen = 1 mm in print. */
  --wapps-space-1: 4px; --wapps-space-2: 8px; --wapps-space-3: 12px; --wapps-space-4: 16px; --wapps-space-6: 24px; --wapps-space-8: 32px; --wapps-space-12: 48px; --wapps-space-16: 64px; --wapps-space-24: 96px;
  --wapps-radius-0: 0px; --wapps-radius-1: 4px; --wapps-radius-2: 8px; --wapps-radius-4: 16px;

  /* Logo geometry (NOTES.md). */
  --wapps-logo-clear-space: 0.228; /* x the x-height */
  --wapps-logo-shard-angle: 23.07deg;
  --wapps-logo-wordmark-aspect: 3.8304;
  --wapps-logo-wordmark-xheight: 0.7039; /* x the box height */
}