/* AERO MATERIALS: design tokens.
   Source: design system https://claude.ai/artifact/M7tVyXPLkpEJqfCbmD1KNt and, for the Nov 2026 redesign
   (IBM Plex Sans, links, buttons, r-lg), AERO MATERIALS Foundation v2 https://claude.ai/artifact/SD85xKFZNJiGangYdX7TZd
   Values marked "proposal" are to be checked against the live site. */

@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-VF.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  /* Brand colours (sales slide) */
  --navy-950: #0A1233;
  --navy-800: #232A48;
  --navy-700: #2C315D;
  --dot-grid: #20294D;
  --ink-on-navy: #FFFFFF;
  --ink-soft-on-navy: #C3C6D1;   /* proposal */
  --ink-muted-on-navy: #3A425C;  /* headline lead-in only, 48px+ */
  --line: #A6A6A6;
  --accent: #F15D26;             /* the Vacuum Voxel highlight, one per view */
  --product-blue: #1E1EFF;       /* renders and graphics, not text */

  /* Website colours, measured on aero-materials.com (2 Nov 2026). The site is light:
     white sections with navy text, navy header and closing band. Still to be added to the design system. */
  --site-navy: #090833;          /* header, dark sections, text on white, rules */
  --site-accent: #F05C28;        /* buttons, LinkedIn icon, Actuation */
  --site-white: #FFFFFF;
  --site-black: #000000;         /* body text on white, Shielding */
  --app-filtration: #42768A;
  --app-biotemplate: #475C47;
  --app-optics: #FFC000;         /* text on it: --site-black */
  /* Light tints of the application colours (Foundation v3: orange-tint, steel-tint, olive-tint, amber-tint):
     section ground of "How our aero materials help" on each application page */
  --app-actuation-tint: #FEF2EE;
  --app-actuation-deep: #C14A1E;   /* Foundation orange-deep: Actuation hero and closing band, white text 4.9:1 */
  --app-filtration-tint: #F0F4F6;
  --app-biotemplate-tint: #F0F2F0;
  --app-optics-tint: #FFF9E6;
  --ink-soft-on-white: #45506E;  /* secondary text on white (gripper scroll captions) */
  --mist: #E7E6E6;
  /* Proposal, still to be added to the Foundation: start page hero, light counterpart of the navy dot canvas
     of the gripper animation (gradient from --hero-ground to --hero-ground-deep, dots in --dot-grid-light) */
  --hero-ground: #F3F3F5;
  --hero-ground-deep: #DCDCE1;
  --dot-grid-light: rgba(9, 8, 51, 0.07);   /* --site-navy at 7 %: equally faint across the whole gradient */               /* Foundation: figure band, hover fill of list rows */
  --link-underline: 40%;         /* Foundation link-underline: underline in the text colour at this opacity */
  --wordmark-muted: #8F8E9C;     /* footer wordmark, navy on hover (--site-navy at 45 % on white) */
  --rule-soft: rgba(9, 8, 51, 0.16);   /* tint of --site-navy: dividers between rows and in the footer */

  /* Website type scale, fluid between 390px and 1440px viewport (measured) */
  --fs-h1: clamp(46.4px, 38.95px + 1.906vw, 66.4px);
  --fs-h2: clamp(32.2px, 28.24px + 1.017vw, 42.88px);
  --fs-h3: clamp(24.1px, 22.12px + 0.509vw, 29.44px);
  --fs-large: clamp(18px, 17.53px + 0.127vw, 19.36px);   /* intro paragraphs */
  --fs-lead: clamp(19px, 18.63px + 0.095vw, 20px);       /* Foundation lead (20px): line under the start page headline */
  --fs-text: clamp(17px, 16.63px + 0.095vw, 18px);       /* running text (Foundation body) */
  --fs-nav: 17px;                /* Foundation menu: header navigation, IBM Plex Sans 400 */
  --fs-tag: 11px;                /* proposal, still to be added to the Foundation: "AI-generated" tag on images, caps */
  --fs-small: 14px;              /* Foundation small: submenu descriptions, footer */
  --fs-logo: clamp(26.1px, 23.65px + 0.635vw, 32.8px);
  --heading-tracking: -0.02em;   /* Foundation: Space Grotesk 700 at -0.02em (was 600 at -0.05em) */

  /* Buttons (Foundation): square, sentence case, Space Grotesk 700 */
  --button-height: 56px;
  --fs-button: 19px;             /* large text: white on orange (3.3:1) passes */
  --gutter: 4vw;                 /* 6vw below 768px */
  --header-height: 104px;        /* 68px below 768px */

  /* Header after scrolling: floating glass band (not on the Squarespace site; added Nov 2026) */
  --band-height: 72px;           /* 60px below 768px */
  --band-offset: 12px;           /* gap to the top and, at most, to the screen edges */
  --band-margin: 24px;           /* band reaches this far beyond the content width */
  /* Glass, from the "Glass header prototype". The tint is the average colour behind the band
     (menu.js), at --glass-alpha; edges and shade switch with dark or light backgrounds */
  --glass-alpha: 0.5;
  --glass-solid-alpha: 0.94;                     /* without backdrop-filter or with reduced transparency */
  --glass-dark-edge: rgba(255, 255, 255, 0.28);
  --glass-dark-shade: rgba(0, 0, 0, 0.35);
  --glass-light-edge: rgba(255, 255, 255, 0.85);
  --glass-light-shade: rgba(9, 8, 51, 0.10);

  /* Fonts (Foundation): Space Grotesk for headlines, labels, buttons and figures; IBM Plex Sans for text and menus */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;

  /* Spacing and radius (radius-md confirmed by the site's custom CSS) */
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;             /* Foundation r-lg: only the glass header band and its submenu panel */
  --radius-hero: 32px;           /* Foundation r-xl: lower corners of the coloured hero on the application pages */
}