/* ==========================================================================
   Blue Jay Systems - design tokens
   --------------------------------------------------------------------------
   Colour is derived from "competetive analysis/01-client-brand.md", where both
   supplied brand colours were tested against WCAG 2.1 relative-luminance maths.
   The single most important constraint in the system:

     THE POLARITY INVERTS BY SURFACE.

     On LIGHT   #1F61CC carries text (5.77:1)
                #32ABDE carries NOTHING (2.62:1 - fails even the 3:1 bar)
                use #176B8A for cyan text instead

     On DARK    #32ABDE carries text (7.15:1, AAA)
                #94A3B8 carries text (7.30:1, AAA)
                #1F61CC is LARGE TEXT OR FILLS ONLY (3.25:1)

   This site is dark-dominant, so cyan is the text accent and brand blue is the
   fill / gradient-start. Never set body-size copy in --brand.
   ========================================================================== */

/* ---- Typefaces -----------------------------------------------------------
   Archivo    display - headlines, wordmark, stat values, card headings
   IBM Plex Sans  body - paragraphs, lede, buttons, list items
   IBM Plex Mono  utility - eyebrows, tier numbers, stat labels, footer headers

   Self-hosted rather than pulled from Google via @import. An @import is
   render-blocking and chains a second request behind the stylesheet; these are
   local woff2 with preload hints on the two faces used above the fold.

   Archivo is a VARIABLE font carrying both a weight (100-900) and a width
   (62-125%) axis in one 88 KB file. That is what lets the headlines run heavy
   and wide via font-stretch without shipping a separate Expanded family.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Dark surface ladder. Never pure #000 (OLED smear, reads cheap). ---- */
  --base: #070a12;
  --ink: #0b1220;
  --elevated: #111a2b;

  /* ---- Foreground on dark ----
     Do NOT fade these with opacity. A 70% --fg-muted computes to #6a7586,
     which is 4.24:1 and fails AA - the whole reason --fg-muted was chosen is
     its verified 7.30:1. Use --fg-dim for a third level; it is contrast-checked. */
  --fg: #edf1f7;
  --fg-muted: #94a3b8;   /* 7.30:1 on --ink */
  --fg-dim: #7c8899;     /* 5.50:1 on --base and --ink ONLY. On raised
                            surfaces it drops to 3.83:1 - use --fg-muted there. */

  /* ---- Brand ---- */
  --brand: #1f61cc;
  --brand-strong: #174ea3;
  --accent: #32abde;
  --accent-ink: #176b8a;  /* cyan text on LIGHT bands only */

  /* Sampled from the logo artwork (assets/img/logo-mark*.png): the bird's
     blue and the pixel squares' cyan. The wordmark's two halves use them. */
  --logo-blue: #0d4eb5;
  --logo-cyan: #17b7d9;

  /* Gradient end wherever WHITE TEXT sits on brand -> cyan (buttons, chat
     bubbles). --accent there drops white to 2.62:1; this keeps every point of
     the gradient at 4.75:1 or better, hover brightening included. */
  --accent-deep: #1573aa;

  /* ---- Light bands only ---- */
  --ground: #f7f9fc;
  --surface: #ffffff;
  --body: #33415c;
  --body-muted: #5b6b86;
  --hairline: #dde5f0;

  /* ---- Glass. 5% fill, 8% border. ---- */
  --glass: rgb(255 255 255 / 0.05);
  --glass-line: rgb(255 255 255 / 0.08);
  --glass-line-strong: rgb(255 255 255 / 0.14);

  /* ---- Type ---- */
  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Width axis. Larger type carries more stretch, so the scale reads as one
     family rather than three unrelated widths. */
  --wdth-display: 118%;
  --wdth-heading: 112%;
  --wdth-sub: 105%;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Form ---- */
  --radius-card: 16px;
  --radius-frame: 24px;
  --radius-pill: 9999px;

  /* ---- Layout ---- */
  --container: 72rem;
  --gutter: 1.25rem;

  /* ---- Motion: Expo.out ---- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
  }
}