/**
 * Design tokens measured from the live NovelAI image-gen UI.
 *
 * Source: tools/ui-extract (npm run ui:tokens). Every value here was read from
 * getComputedStyle on a real logged-in session, not eyeballed.
 *
 * NAI itself declares NO :root custom properties — its theme lives in
 * styled-components/emotion hashed classes, so this file is ours, built from
 * observed frequencies. The 176 :root vars on the live page are all Osano
 * (cookie consent) and Toastify (notifications) vendor CSS; deliberately excluded.
 */
/*
 * Webfonts, pulled from the live session by `npm run ui:fonts`.
 *
 * These were missing for a long time: the stack below NAMED these families
 * while no font files existed, so every glyph fell back to an OS default and
 * the whole panel rendered in the wrong typeface. It went unnoticed because
 * getComputedStyle().fontFamily reports the DECLARED stack whether or not the
 * font resolves — so assertions on font-family passed the entire time.
 * verify.js now measures rendered glyph width against a deliberately fake
 * family instead, which is the only way to catch a silent fallback.
 */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/source-sans-pro-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/source-sans-pro-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/source-sans-pro-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*
 * Eczar is used for one thing — the model title — at weight 700. Only the 400
 * file was captured (NAI declares 400/600/700, but a single visit downloads
 * only the subsets it paints). The range here lets the browser synthesise the
 * heavier weight from the real 400 face rather than dropping to a serif
 * fallback. Replace with a genuine 700 file if one is ever captured.
 */
@font-face {
  font-family: 'Eczar';
  src: url('../fonts/eczar-400.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces — a four-step dark ladder, darkest = input wells. */
  --nai-bg-input: rgb(14, 15, 33);
  --nai-bg-page: rgb(19, 21, 44);
  --nai-bg-panel: rgb(25, 27, 49);
  --nai-bg-raised: rgb(34, 37, 63);

  /* Text. 0.7 alpha is the muted variant used for control labels. */
  --nai-text: rgb(255, 255, 255);
  --nai-text-muted: rgba(255, 255, 255, 0.7);
  /* Section headings use full white at 0.5 opacity rather than a dimmer colour. */
  --nai-heading-opacity: 0.5;

  /* Accent — the Generate button, active toggles. */
  --nai-accent: rgb(245, 243, 194);

  /* Borders: near-universal single style. */
  --nai-border: 1px solid rgb(34, 37, 63);
  --nai-divider: rgb(19, 21, 44);

  /* Radii — 3px is primary; 5px appears on a few larger controls. */
  --nai-radius: 3px;
  --nai-radius-lg: 5px;

  /* Type */
  --nai-font: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  --nai-font-display: Eczar, Georgia, serif; /* model name only */
  --nai-text-xs: 12.8px;
  --nai-text-sm: 14px;
  --nai-text-base: 16px;
  --nai-text-lg: 22px;
  --nai-line-sm: 21px;
  --nai-line-base: 24px;

  /* Spacing — measured values cluster on a 5px grid. */
  --nai-space-1: 5px;
  --nai-space-2: 10px;
  --nai-space-3: 15px;
  --nai-space-4: 20px;

  /* Layout: three columns, measured at 1600x1000. */
  --nai-panel-width: 450px;
  --nai-history-width: 140px;
  --nai-panel-inset: 20px; /* content is 395px inside a 450px rail */
}