/*
 * Tounify design-system theme for the Scalar API reference.
 * Tokens mirror cockpit/packages/shared/styles/tokens/* (brand teal, Geist, gray scale).
 * Light-only — the design system defines no dark-mode palette, so dark mode is forced off
 * in index.html. Fonts are vendored (woff2) to keep the page free of any runtime CDN.
 */

@font-face {
  font-family: 'Geist';
  src: url('./geist-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Applied with !important so they win over Scalar's runtime-injected default theme,
   regardless of stylesheet order. */
:root,
.light-mode,
.dark-mode {
  /* Typography */
  --scalar-font: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  --scalar-font-code: 'Geist Mono', 'Courier New', Courier, monospace !important;

  /* Brand teal (primary-600) + neutral gray scale */
  --scalar-color-accent: #228990 !important;       /* primary-600 */
  --scalar-color-1: #111827 !important;            /* gray-900 — primary text */
  --scalar-color-2: #4b5563 !important;            /* gray-600 — secondary text */
  --scalar-color-3: #6b7280 !important;            /* gray-500 — muted text */
  --scalar-background-1: #ffffff !important;
  --scalar-background-2: #f9fafb !important;       /* gray-50 */
  --scalar-background-3: #f3f4f6 !important;       /* gray-100 */
  --scalar-border-color: #e5e7eb !important;       /* gray-200 */
  --scalar-button-1: #228990 !important;           /* primary CTA */

  /* Retint Scalar's "blue" to the brand teal: drives the GET method badge and
     code string tokens, which would otherwise render blue. */
  --scalar-color-blue: #228990 !important;          /* primary-600 */

  /* Shape (design-system radii) */
  --scalar-radius: 0.375rem !important;            /* md */
  --scalar-radius-lg: 0.5rem !important;           /* lg — default component */

  /* Sidebar */
  --scalar-sidebar-background-1: #f9fafb !important;
  --scalar-sidebar-color-1: #111827 !important;
  --scalar-sidebar-color-2: #4b5563 !important;
  --scalar-sidebar-color-active: #228990 !important;
  --scalar-sidebar-border-color: #e5e7eb !important;
  --scalar-sidebar-item-hover-background: #f3f4f6 !important;
  --scalar-sidebar-item-hover-color: #111827 !important;
  --scalar-sidebar-item-active-background: #edfafa !important;   /* primary-50 */
  --scalar-sidebar-search-background: #ffffff !important;
  --scalar-sidebar-search-border-color: #e5e7eb !important;
  --scalar-sidebar-search-color: #6b7280 !important;
}