/* 28FiTech brand tokens for the web UI.
   Synced from the Claude Design project "28FiTech Design System"
   (tokens/colors.css, typography.css, fonts.css, effects.css). The PDF surface
   reads the same values from brand.py — keep the two in step.

   Fonts are self-hosted from /static/fonts (the design system notes this is the
   production preference) so the admin UI makes no external font request. */

@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/Archivo-Regular.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/Archivo-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/Archivo-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); }

:root {
  /* ---- Navy scale (brand core) ---- */
  --navy-900: #0b1526;
  --navy-800: #10203a;
  --navy-700: #16294a;
  --navy-600: #1d3457;

  /* ---- Slate / blue-gray scale ---- */
  --slate-700: #44546a;
  --slate-500: #5f7492;
  --slate-400: #8fa3bd;
  --slate-300: #b6c3d6;

  /* ---- Surfaces & neutrals ---- */
  --white: #ffffff;
  --surface-50: #f4f7fb;
  --surface-100: #eef2f8;
  --surface-200: #e2e9f2;
  --surface-300: #cdd8e6;
  --ink-900: #0b1526;

  /* ---- Semantic accents ---- */
  --positive-600: #1f8a5b; --positive-50: #e7f4ee;
  --negative-600: #c0392b; --negative-50: #fbeceb;
  --warning-600: #b7791f;  --warning-50: #fbf1de;
  --info-600: #2a6fdb;     --info-50: #e9f0fc;

  /* Small-type variants. The -600 steps were tuned for deck-scale type and land just
     under 4.5:1 at 11px on their own -50 tints (positive 3.83:1, warning 3.25:1).
     Same hue, minimally darkened, for small text only — -600 still owns fills,
     graphics, and the PDF stat tiles. */
  --positive-text: #1c7c52;  /* 4.58:1 on positive-50 */
  --warning-text:  #966319;  /* 4.58:1 on warning-50  */
  --negative-text: #c0392b;  /* -600 already clears it at 4.74:1 */

  /* ---- Semantic aliases ---- */
  --bg-page: var(--surface-50);
  --bg-canvas: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--surface-100);
  --surface-inverse: var(--navy-800);

  --text-strong: var(--navy-800);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-on-dark: var(--surface-50);
  --text-on-dark-muted: var(--slate-400);

  --border-subtle: var(--surface-200);
  --border-default: var(--surface-300);
  --border-strong: var(--slate-400);

  --accent: var(--navy-800);
  --accent-hover: var(--navy-700);
  --accent-press: var(--navy-900);
  --focus-ring: #5f7492;

  --link: #266cda;            /* info-600 nudged darker: 4.61:1 on the page wash */
  --link-hover: var(--navy-800);

  /* ---- Type ---- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Consolas", "Menlo", monospace;

  --fs-h2: 2.125rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem;
  --fs-lg: 1.125rem; --fs-body: 1rem; --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;  --fs-2xs: 0.6875rem;

  --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.5;
  --ls-tight: -0.02em; --ls-wide: 0.04em; --ls-eyebrow: 0.18em;

  /* ---- Elevation (restrained, navy-tinted; no heavy drop shadows) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 32, 58, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 32, 58, 0.08), 0 1px 2px rgba(16, 32, 58, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 32, 58, 0.08), 0 2px 4px rgba(16, 32, 58, 0.04);
  --shadow-focus: 0 0 0 3px rgba(95, 116, 146, 0.35);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 180ms;
}

/* Eyebrow / overline — the design system's section-label treatment. */
.eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}