/* Klaro Cards branding for the Scalar reference.
 *
 * The values come from brand-kit/tokens/_color.scss (the --klaro-brand-* set)
 * and the world service's font tokens. They are copied rather than imported: this
 * is plain CSS served by nginx, with no build step to resolve Sass from another
 * package. Keep the two in step when the palette moves.
 *
 * Scalar's own class names (`.t-doc__sidebar`, `.scalar-mcp-layer`) are theming
 * hooks rather than public API, so the Scalar version is pinned in package.json
 * and this file is worth re-checking on upgrade.
 */

:root {
  --scalar-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --scalar-font-code: 'Fira Code', 'JetBrains Mono', Consolas, Monaco, monospace;
  --scalar-border-radius: 8px;
  --scalar-border-radius-lg: 12px;
}

.light-mode {
  --scalar-color-1: #17172b;                      /* brand-ink */
  --scalar-color-2: #4a4a63;                      /* brand-ink-soft */
  --scalar-color-3: #6b6b80;                      /* brand-ink-muted */
  --scalar-color-accent: #7505f9;                 /* brand-purple */
  --scalar-background-1: #ffffff;
  --scalar-background-2: #faf9fd;                 /* brand-surface-subtle */
  --scalar-background-3: #f4eeff;                 /* brand-lavender */
  --scalar-background-accent: #f4eeff;
  --scalar-border-color: #eee9f7;                 /* brand-lavender-line */
  --scalar-color-green: #008a4c;
  --scalar-color-red: #f23005;                    /* brand-danger */
  --scalar-color-yellow: #ffcc00;                 /* brand-amber */
  --scalar-color-blue: #2b7fff;
  --scalar-color-purple: #7505f9;
  --scalar-sidebar-background-1: #f7f4fd;         /* brand-lavender-pale */
  --scalar-sidebar-item-active-background: #f4eeff;
  --scalar-sidebar-color-active: #7505f9;
  --scalar-sidebar-border-color: #eee9f7;
  --scalar-sidebar-search-background: #ffffff;
  --scalar-sidebar-search-border-color: #e2d4ff;  /* brand-lavender-edge */
}

.dark-mode {
  --scalar-color-1: #f7f4fd;
  --scalar-color-2: #c9c4d6;
  --scalar-color-3: #8a8aa0;                      /* brand-ink-faint */
  --scalar-color-accent: #ffcc00;                 /* amber: purple does not clear contrast on night */
  --scalar-background-1: #2b1150;                 /* brand-night */
  --scalar-background-2: #230e42;
  --scalar-background-3: #371a63;
  --scalar-background-accent: #371a63;
  --scalar-border-color: #43277a;
  --scalar-color-green: #5cd6a0;
  --scalar-color-red: #ff8c6b;
  --scalar-color-yellow: #ffcc00;
  --scalar-sidebar-background-1: #230e42;
  --scalar-sidebar-item-active-background: #371a63;
  --scalar-sidebar-color-active: #ffcc00;
  --scalar-sidebar-border-color: #43277a;
  --scalar-sidebar-search-background: #371a63;
  --scalar-sidebar-search-border-color: #43277a;
}

/* The logo sits above the search, swapping with the theme. */
.t-doc__sidebar::before {
  content: '';
  display: block;
  height: 36px;
  margin: 18px 14px 6px;
  background: url('brand/klaro-logo.svg') left center / contain no-repeat;
}

.dark-mode .t-doc__sidebar::before {
  background-image: url('brand/klaro-logo-on-dark.svg');
}

/* Scalar's hosted affordances. "Generate MCP" registers the spec on Scalar's own
 * dashboard, which is not where our reference lives. No configuration flag hides
 * it in this version. */
.scalar-mcp-layer {
  display: none;
}