/* The Unilog design system, as this repo consumes it.
 *
 * Source: the `unilog-design-system` bundle shipped with the Claude Design mockups
 * (`_ds/.../colors_and_type.css`, 456 lines). This file is NOT that file.
 *
 * WHAT WAS DELIBERATELY LEFT OUT, because copying it wholesale would break both apps:
 *
 *   1. The base element mapping. The source sets `h1 { font-size: 64px }` down to
 *      `h6 { 18px }` and restyles `body`, `p` and `a` globally. Those sizes are for a
 *      marketing site. The PM Portal's own h1 is 21px and the customer dashboard's is
 *      32px, so importing that block would resize every heading in both surfaces.
 *   2. The marketing component classes (tagline blocks, messaging pillars, watch lists,
 *      eyebrow capsules, "use when" patterns). None appears in either mockup.
 *
 * So what remains is custom properties and @font-face only. Additive by construction:
 * linking this file changes nothing until a rule opts in by naming a token. That is the
 * property that makes it safe to load ahead of the PM Portal restyle.
 *
 * ONE EXCEPTION, and it is intended: `web/app/styles.css` has always declared
 * `font-family:'Inter',...` while the repo never shipped an Inter file, so the internal
 * portal has been rendering in system-ui since it was written. Loading Inter here makes
 * that existing declaration finally do what it says.
 *
 * Fonts are SELF-HOSTED, never a CDN. Both mockups pull Inter from fonts.googleapis.com;
 * the customer origin ships a strict CSP with no external hosts, and an internal portal
 * has no reason to announce itself to Google on every page load either.
 *
 * The two Avenir cuts are subsets: latin only, converted from the 685 KB of TrueType in
 * the design bundle down to 52 KB of WOFF2. Only Regular and Demi Bold are shipped
 * because neither mockup uses an italic and, per the design system's own instruction,
 * only weights 400 and 600 appear in source.
 */

/* ---------- Faces ---------- */

/* Inter, variable across the 100-900 axis in one 48 KB file. Used for UI chrome in both
   portals, and for body copy in the customer portal. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Avenir Next, the brand face. Headings and numerals in the CUSTOMER portal only; the PM
   Portal mockup does not use it once in 1,042 lines. */
@font-face {
  font-family: 'Avenir Next';
  src: url('/assets/fonts/avenir-next-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('/assets/fonts/avenir-next-demibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand blue ---------- */
  --blue-ultra-light: #F2F6FA;
  --blue-light: #BBD8F7;
  --blue-semi-light: #5FA3EC;
  --blue: #3289E7;            /* primary */
  --blue-medium: #1B7CE4;
  --blue-semi-dark: #1357A0;
  --blue-dark: #0D3E72;
  --blue-ultra-dark: #082544;

  /* ---------- Brand yellow. Accent ON DARK ONLY; it does not pass AA on white. ---------- */
  --yellow-ultra-light: #FEF7E6;
  --yellow-light: #FDE6B4;
  --yellow: #FBC756;
  --yellow-semi-dark: #F9AC06;

  /* ---------- Neutrals ---------- */
  --white: #FFFFFF;
  --neutral-ultra-light: #F2F2F2;
  --neutral-light: #D9D9D9;
  --neutral-semi-light: #A6A6A6;
  --neutral-medium: #808080;
  --neutral-semi-dark: #595959;
  --neutral-dark: #242424;
  --neutral-ultra-dark: #171717;

  /* ---------- Semantic ---------- */
  --success: #18B26B;
  --warning: #F9AC06;
  --danger: #D80027;

  /* Status tints, taken from the mockups rather than derived. Each pair is a background
     and the ink that sits on it, and the ink is the AA-passing partner of that exact
     background. Use them as pairs; mixing a tint with a different ink is how the 2.25:1
     contrast bug recorded in HANDOFF.md happened. */
  --tint-ok-bg: #E7F7EF;        --tint-ok-fg: #0B6E42;
  --tint-warn-bg: #FDF3E0;      --tint-warn-fg: #8F5B06;
  --tint-danger-bg: #FDEAEC;    --tint-danger-fg: #A8071A;
  --tint-info-bg: #E8F1FD;      --tint-info-fg: #1357A0;
  --tint-neutral-bg: #F2F2F2;   --tint-neutral-fg: #595959;

  /* ---------- Borders ----------
     These carry their weight immediately. The PM Portal's `pmp` stylesheet already writes
     `var(--border-default, rgba(0,0,0,0.12))` in a dozen places, and until this file existed
     nothing defined the variable, so every one of those fell back to its hardcoded copy.
     The values here are the design system's and are identical to those fallbacks, so adopting
     them changes no pixel and removes the duplication. */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.24);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ---------- Type ---------- */
  --font-brand: 'Avenir Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Only 400 and 600 exist as real cuts of Avenir Next. Asking for 500 or 700 would get a
     synthesised weight, which `font-synthesis: none` below then refuses, silently
     rendering as 400. Stick to these two names in brand-face contexts. */
  --fw-regular: 400;
  --fw-demi: 600;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --lh-loose: 1.65;

  --ls-eyebrow: 0.16em;
  --ls-heading: -0.01em;
  --ls-display: -0.02em;

  /* ---------- Spacing ---------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- Elevation. Blue-tinted shadow, per the brand ramp, not neutral grey. ---------- */
  --shadow-xs: 0 1px 2px rgba(8, 37, 68, 0.06);
  --shadow-s: 0 2px 6px rgba(9, 26, 50, 0.08);
  --shadow-m: 0 4px 12px rgba(8, 37, 68, 0.08);
  --shadow-l: 0 12px 32px rgba(8, 37, 68, 0.10);
  --shadow-focus: 0 0 0 3px rgba(50, 137, 231, 0.16);

  /* ---------- The signature dark hero, used by both portals' sign-in and the customer
       launch banner. Kept as a token so the three copies cannot drift apart. ---------- */
  --bg-hero-dark:
    radial-gradient(900px 640px at 76% 20%, rgba(50, 137, 231, 0.40), transparent 62%),
    linear-gradient(180deg, #0A1B2E 0%, #050B17 100%);
  --bg-hero-blue:
    radial-gradient(700px 380px at 88% 10%, rgba(50, 137, 231, 0.38), transparent 64%),
    linear-gradient(135deg, #082544, #0D3E72);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* Four real cuts are not shipped, only two, so refuse the browser's fake bold and fake
   italic. Without this, a stray `font-weight:700` on the brand face renders as a smeared
   600 that looks like a rendering bug rather than a code one. */
* { font-synthesis: none; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}