/* ============================================================
   tokens.css — custom properties + @font-face
   AppliedAI (aaico.com)

   Colour and type tokens come from the Opus design system
   (`colors_and_type.css`, Opus v3.0 2026). Layout, nav, and button
   tokens are lifted from opus.com so the shared chrome renders
   identically on both domains.

   Only the faces the page actually uses are shipped: PP Neue Montreal
   400/500 and PP Neue Montreal Mono 400/500. There is no 600 face —
   never author `font-weight: 600`.
   ============================================================ */

/* ---------- FONT FACES ---------------------------------- */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("/fonts/PPNeueMontrealMono-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("/fonts/PPNeueMontrealMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================
     COLOUR — raw scales (Opus DS)
     ========================================================= */
  --neutral-0: #ffffff;
  --neutral-25: #fbfbfb;
  --neutral-50: #f4f4f6;
  --neutral-100: #efefef;
  --neutral-400: #a2a4ae;
  --neutral-500: #727483;
  --neutral-1050: #0c0c0e;
  --neutral-1100: #090909;

  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #387bf0;
  --blue-500: #115ee4;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* Brand navy — Values cards. Not yet in the DS; promoted to a token
     here per the handoff's open item #5. */
  --navy-700: #092f72;

  --alpha-black-10: rgb(9 9 11 / 0.1);
  --white-rgb: 255 255 255;

  /* =========================================================
     COLOUR — semantic (Opus DS)
     ========================================================= */
  --bg-page: var(--neutral-25);
  --bg-surface: var(--neutral-0);
  --bg-subtle: var(--neutral-50);
  --bg-muted: var(--neutral-100);
  --bg-inverse: var(--neutral-1050);

  --fg-base: var(--neutral-1050);
  --fg-strong: var(--neutral-1100);
  --fg-muted: var(--neutral-500);
  --fg-subtle: var(--neutral-400);
  --fg-inverse: var(--neutral-0);
  --fg-accent: var(--blue-600);

  --bd-primary: var(--alpha-black-10);
  --bd-accent-muted: var(--blue-200);

  /* Nav chrome — from opus.com, so the sticky header matches. */
  --border: #e7e5e0;
  --border-strong: #d8d6d0;

  /* Buttons — opus.com's real primary blue. Deliberately NOT
     --blue-500: the Talk to Us CTA must match opus.com exactly. */
  --btn-primary-bg: #0426cd;
  --btn-primary-bg-hover: #062aad;
  --gray: #efefef;

  /* Dark footer — opus.com's values, so the two footers are identical. */
  --footer-bg: #0c0c0e;
  --footer-fg: #fbfbfa;
  --footer-fg-muted: rgb(255 255 255 / 0.5);
  --footer-border: rgb(255 255 255 / 0.3);

  /* =========================================================
     TYPE
     ========================================================= */
  --font-sans: "PP Neue Montreal", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "PP Neue Montreal Mono", ui-monospace, monospace;

  --fs-body: 16px;

  /* Display sizes interpolate between the handoff's ≤640px and
     desktop values instead of stepping at the breakpoint. */
  --fs-display-1: clamp(40px, 5.2vw, 64px); /* hero h1 */
  --fs-display-2: clamp(34px, 4.8vw, 60px); /* vision / mission h2 */
  --fs-display-3: clamp(34px, 3.9vw, 48px); /* section h2 */

  /* Newsroom section h2. A touch smaller than --fs-display-3 so the
     longest of the two headlines ("Latest announcements. Straight from
     the AppliedAI newsroom.") stays on ONE line down to ~820px — at
     48px it overruns the 1184px container by 12px and wraps.
     This is deliberately tuned to the current copy: lengthen either
     newsroom headline and it will wrap again. */
  --fs-news-title: clamp(30px, 3.5vw, 46px);
  --fs-name: clamp(30px, 3.2vw, 40px); /* CEO name */

  --fs-lead-hero: clamp(17px, 1.7vw, 22px);
  --fs-lead-xl: clamp(19px, 1.9vw, 24px);
  --fs-lead: 18px;

  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-name: -0.025em;

  /* =========================================================
     LAYOUT — Opus rail system. --rail-width is the single source of
     truth for page width; both .container and .nav__inner consume it
     so the nav row and content align column-for-column.
     ========================================================= */
  --container: 1248px;
  --gutter: 32px; /* inside the rails — rails to content */
  --outer-gutter: 32px; /* outside the rails — rails to viewport */
  --rail-width: min(
    calc(100% - (var(--outer-gutter) + var(--outer-gutter))),
    var(--container)
  );

  --section-y: 72px; /* section vertical padding */

  /* =========================================================
     RADII / SHADOW / MOTION
     ========================================================= */
  --radius-sm: 5px;
  --radius-xl: 12px;
  --radius-btn: 4px; /* opus.com button radius */

  --shadow-focus: 0 0 0 3px rgb(56 123 240 / 0.25);

  --t-fast: 0.15s;
  --t-med: 0.25s;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --outer-gutter: 0px;
    --gutter: 20px;
    --section-y: 48px;
  }
}