/* Sazi One View brand tokens — WORK-1053.
 *
 * Loaded immediately after the Web Awesome theme and before every app
 * stylesheet, so it can override the component library's defaults while app
 * CSS can still override it.
 *
 * Three jobs, in order:
 *
 *   1. Declare the brand as raw values (the `--sazi-*` scale). One source.
 *   2. Drive Web Awesome from it (`--wa-color-*`). The app reads ~978 Web
 *      Awesome tokens and previously overrode none of the colour ones, so
 *      every `variant="brand"` component rendered in the library's default
 *      blue. Setting the scales here is what makes the components brand.
 *   3. Re-point the legacy aliases (`--primary-*`, `--gray-*`, `--brand-*`)
 *      at the same values, so 27k lines of existing CSS follow without being
 *      rewritten. `--brand-*` was referenced thirteen times and defined
 *      nowhere: two of those sites had no fallback and rendered unset.
 *
 * Values come from the live usesazi.com header (marketing-site/src/site.css).
 * Deliberately structured so a later dark theme is a token swap, not a rewrite.
 */

/* ---------------------------------------------------------------- fonts -- */
/* One variable file per family per subset; see static/vendor/fonts/README.md.
 * `swap` because a brand refresh must not hide text while a face loads. */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/vendor/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/vendor/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/vendor/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/vendor/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/vendor/fonts/ibm-plex-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/vendor/fonts/ibm-plex-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  /* Brand ramp. 50 is the tint used behind selected rows and soft fills;
   * 60 is the brand itself; 70 is hover/pressed. */
  --sazi-brand-05: #eef2fd;
  --sazi-brand-10: #dfe7fc;
  --sazi-brand-20: #c2d0f8;
  --sazi-brand-30: #9db4f4;
  --sazi-brand-40: #7899ff;
  --sazi-brand-50: #4a74e9;
  --sazi-brand-60: #315de4;
  --sazi-brand-70: #1f46c2;
  --sazi-brand-80: #183694;
  --sazi-brand-90: #122a72;

  /* Neutral ramp. Ink is the rail/sidebar ground and the darkest step; the
   * light end is the site's mist/soft/line trio rather than a grey tint, so
   * page grounds keep the cool cast the marketing site has. */
  --sazi-ink: #111827;
  --sazi-ink-2: #374151;
  --sazi-muted: #6b7280;
  --sazi-line: #dde4ee;
  --sazi-mist: #eaf0f6;
  --sazi-soft: #f5f8fc;

  /* Citrus is an indicator only: active-item rules, badges, focus accents on
   * ink. Never body text — it fails contrast on every light ground. */
  --sazi-citrus: #d7e85a;

  --sazi-font-display: 'Sora', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --sazi-font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --sazi-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
    monospace;
}

/* ---- Web Awesome ---- */
/* Every Web Awesome colour scale runs 05..95 DARK TO LIGHT, brand included:
 * in the installed 3.12 palette blue-05 is #001325 and blue-95 is #e2f6ff.
 * The light theme then reads the scale as
 *
 *   fill-quiet   95     on-quiet   40   (outlined and plain buttons, links)
 *   fill-normal  90     on-normal  30
 *   fill-loud    50     on-loud    white
 *   focus ring   60
 *
 * The Sazi ramp is numbered the other way (05 light, 90 dark), so the two are
 * joined by lightness rather than by number. The brand itself sits on 50,
 * where the library puts its loud fill, and every step is monotonic in
 * luminance against the reference blue. An earlier mapping copied the
 * numbers across and reversed the ramp (audit F8): outlined button text
 * resolved to a light tint at 2.69:1 on white. With this mapping the same
 * text is 7.7:1, white on a loud fill 5.5:1, normal text on its fill 8.5:1.
 *
 * The library has two darker steps than the ramp; they are mixed from the
 * darkest Sazi value rather than invented. */

:root {
  --wa-color-brand-95: var(--sazi-brand-05);
  --wa-color-brand-90: var(--sazi-brand-10);
  --wa-color-brand-80: var(--sazi-brand-20);
  --wa-color-brand-70: var(--sazi-brand-30);
  --wa-color-brand-60: var(--sazi-brand-40);
  --wa-color-brand-50: var(--sazi-brand-60);
  --wa-color-brand-40: var(--sazi-brand-70);
  --wa-color-brand-30: var(--sazi-brand-80);
  --wa-color-brand-20: var(--sazi-brand-90);
  --wa-color-brand-10: color-mix(in srgb, var(--sazi-brand-90) 75%, black);
  --wa-color-brand-05: color-mix(in srgb, var(--sazi-brand-90) 50%, black);

  --wa-color-neutral-05: var(--sazi-ink);
  --wa-color-neutral-10: #1f2937;
  --wa-color-neutral-20: var(--sazi-ink-2);
  --wa-color-neutral-30: #4b5563;
  --wa-color-neutral-40: var(--sazi-muted);
  --wa-color-neutral-50: #9aa4b2;
  --wa-color-neutral-60: #c3ccda;
  --wa-color-neutral-70: var(--sazi-line);
  --wa-color-neutral-80: var(--sazi-mist);
  --wa-color-neutral-90: var(--sazi-soft);

  --wa-font-family-body: var(--sazi-font-body);
  --wa-font-family-heading: var(--sazi-font-display);
  --wa-font-family-code: var(--sazi-font-mono);
  --wa-font-family-longform: var(--sazi-font-body);
}

/* ---- Legacy aliases ---- */
/* main.css and its siblings were written against a Tailwind-default palette.
 * Re-pointing the aliases moves every one of those rules onto the brand
 * without touching them. Steps the old scale never had are filled in so a
 * `var(--primary-300)` added later resolves.
 *
 * Tailwind numbering runs LIGHT TO DARK (50 light, 900 dark), the opposite of
 * Web Awesome's. That is why these aliases read the Sazi ramp by number while
 * the Web Awesome block above reads it by lightness; the two must not be
 * unified. */

:root {
  --primary-50: var(--sazi-brand-05);
  --primary-100: var(--sazi-brand-10);
  --primary-200: var(--sazi-brand-20);
  --primary-300: var(--sazi-brand-30);
  --primary-400: var(--sazi-brand-40);
  --primary-500: var(--sazi-brand-60);
  --primary-600: var(--sazi-brand-60);
  --primary-700: var(--sazi-brand-70);
  --primary-800: var(--sazi-brand-80);
  --primary-900: var(--sazi-brand-90);

  /* `--brand-*` had thirteen call sites and no definition. Their inline
   * fallbacks disagreed with one another (#6366f1 indigo, #2563eb blue,
   * #2a4365 slate), and two sites had no fallback at all. */
  --brand-50: var(--sazi-brand-05);
  --brand-100: var(--sazi-brand-10);
  --brand-200: var(--sazi-brand-20);
  --brand-300: var(--sazi-brand-30);
  --brand-400: var(--sazi-brand-40);
  --brand-500: var(--sazi-brand-60);
  --brand-600: var(--sazi-brand-60);
  --brand-700: var(--sazi-brand-70);
  --brand-800: var(--sazi-brand-80);
  --brand-900: var(--sazi-brand-90);

  --gray-50: var(--sazi-soft);
  --gray-100: var(--sazi-mist);
  --gray-200: var(--sazi-line);
  --gray-300: #c3ccda;
  --gray-400: #9aa4b2;
  --gray-500: var(--sazi-muted);
  --gray-600: #4b5563;
  --gray-700: var(--sazi-ink-2);
  --gray-800: #1f2937;
  --gray-900: var(--sazi-ink);

  --radius: 10px;
}

/* main.css sets font-family on :root and `background` on body. Both are
 * restated here against the tokens; main.css loads later, so its own
 * declarations are the ones that win — these exist so any surface that loads
 * brand-tokens.css WITHOUT main.css (the standalone product shells) still
 * gets the brand ground and type rather than the browser default. */
:root {
  font-family: var(--sazi-font-body);
}

body {
  background: var(--sazi-soft);
  color: var(--sazi-ink);
}

h1,
h2,
h3,
h4,
.sazi-display {
  font-family: var(--sazi-font-display);
  letter-spacing: -0.01em;
}

code,
kbd,
samp,
pre {
  font-family: var(--sazi-font-mono);
}