/*
 * Huisly's look for the data API's public reference (AGE-397): the tokens of
 * huisly-client-web's design system (app/app.css, docs/design-system.md) on
 * Scalar's theme variables, in light and dark. Flat colours only.
 *
 * Scalar puts `light-mode` or `dark-mode` on <body>; until it has, the page
 * follows the system's colour scheme. The tokens are the website's. These
 * differ, because this page sets text in colours the website uses as fills,
 * and text needs 4.5:1 against every surface it sits on (WCAG AA):
 *
 * - `--huisly-accent-text` is new: the colour of links, the active sidebar
 *   item and Scalar's blue. In light it is the primary. In dark it is a
 *   lighter indigo, because the dark primary, which stays the fill of
 *   buttons, is 4.1:1 as text on the background.
 * - `--huisly-primary-hover` is new, and darker than the primary in both
 *   modes, so white text on it gains contrast.
 * - `--huisly-warning`, `--huisly-success` and `--huisly-destructive`
 *   (light) are a little darker than the website's: Scalar writes status
 *   and method labels in them, also on the muted surface, where the
 *   website's values are 4.0:1, 4.5:1 and 4.3:1.
 * - `--huisly-ring` (dark) is lighter: the website's dark ring is 2.6:1 on
 *   this near-black background, and a focus ring needs 3:1.
 */

@font-face {
  font-family: 'DM Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Space Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/space-grotesk-latin-wght-normal.woff2')
    format('woff2-variations');
}

:root {
  --huisly-font-sans: 'DM Sans Variable', system-ui, sans-serif;
  --huisly-font-heading: 'Space Grotesk Variable', system-ui, sans-serif;
  --huisly-font-code: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono',
    Menlo, Consolas, monospace;
  --huisly-header-height: 56px;
  /* Scalar keeps its sidebar and search below a header of this height. */
  --scalar-custom-header-height: var(--huisly-header-height);
}

/* Light. */
:root,
:root:has(body.light-mode),
body.light-mode {
  color-scheme: light;
  --huisly-background: oklch(0.995 0.002 277);
  --huisly-foreground: oklch(0.09 0.005 277);
  --huisly-card: oklch(1 0 0);
  --huisly-primary: oklch(0.457 0.24 277.023);
  --huisly-primary-hover: oklch(0.4 0.22 277);
  --huisly-primary-foreground: oklch(0.985 0 0);
  --huisly-accent-text: oklch(0.457 0.24 277.023);
  --huisly-secondary: oklch(0.97 0.008 277);
  --huisly-muted: oklch(0.965 0.005 277);
  --huisly-muted-foreground: oklch(0.4 0.02 277);
  --huisly-border: oklch(0.92 0.006 277);
  --huisly-ring: oklch(0.551 0.215 275.591);
  --huisly-success: oklch(0.5 0.15 150);
  --huisly-warning: oklch(0.52 0.13 70);
  --huisly-destructive: oklch(0.55 0.24 27);
}

/* Dark, while the system asks for it and Scalar hasn't chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not(:has(body.light-mode)) {
    color-scheme: dark;
    --huisly-background: oklch(0.1 0.012 277);
    --huisly-foreground: oklch(0.95 0.005 277);
    --huisly-card: oklch(0.145 0.014 277);
    --huisly-primary: oklch(0.56 0.21 275);
    --huisly-primary-hover: oklch(0.5 0.21 275);
    --huisly-primary-foreground: oklch(0.985 0 0);
    --huisly-accent-text: oklch(0.74 0.13 277);
    --huisly-secondary: oklch(0.19 0.025 277);
    --huisly-muted: oklch(0.19 0.025 277);
    --huisly-muted-foreground: oklch(0.62 0.03 277);
    --huisly-border: oklch(1 0 0 / 8%);
    --huisly-ring: oklch(0.66 0.17 275);
    --huisly-success: oklch(0.627 0.194 149.214);
    --huisly-warning: oklch(0.819 0.17 83.1);
    --huisly-destructive: oklch(0.704 0.191 22.216);
  }
}

/* Dark, once Scalar has chosen it: the same values as above. */
:root:has(body.dark-mode),
body.dark-mode {
  color-scheme: dark;
  --huisly-background: oklch(0.1 0.012 277);
  --huisly-foreground: oklch(0.95 0.005 277);
  --huisly-card: oklch(0.145 0.014 277);
  --huisly-primary: oklch(0.56 0.21 275);
  --huisly-primary-hover: oklch(0.5 0.21 275);
  --huisly-primary-foreground: oklch(0.985 0 0);
  --huisly-accent-text: oklch(0.74 0.13 277);
  --huisly-secondary: oklch(0.19 0.025 277);
  --huisly-muted: oklch(0.19 0.025 277);
  --huisly-muted-foreground: oklch(0.62 0.03 277);
  --huisly-border: oklch(1 0 0 / 8%);
  --huisly-ring: oklch(0.66 0.17 275);
  --huisly-success: oklch(0.627 0.194 149.214);
  --huisly-warning: oklch(0.819 0.17 83.1);
  --huisly-destructive: oklch(0.704 0.191 22.216);
}

html {
  background: var(--huisly-background);
}

body {
  margin: 0;
  background: var(--huisly-background);
  color: var(--huisly-foreground);
  font-family: var(--huisly-font-sans);
}

/* ── Scalar's theme variables ─────────────────────────────────────────── */

/*
 * Every part of the reference follows the page's mode. Scalar marks some
 * parts `dark-mode` inside a light page (its request examples); they take
 * the page's tokens too, so a light page stays light throughout.
 */
body.light-mode,
body.dark-mode,
body .light-mode,
body .dark-mode {
  --scalar-font: var(--huisly-font-sans);
  --scalar-font-code: var(--huisly-font-code);
  --scalar-radius: 0.5rem;
  --scalar-radius-lg: 0.625rem;
  --scalar-radius-xl: 0.875rem;

  --scalar-color-1: var(--huisly-foreground);
  --scalar-color-2: var(--huisly-muted-foreground);
  --scalar-color-3: var(--huisly-muted-foreground);
  --scalar-color-accent: var(--huisly-accent-text);
  --scalar-background-1: var(--huisly-background);
  --scalar-background-2: var(--huisly-muted);
  --scalar-background-3: var(--huisly-secondary);
  --scalar-background-accent: color-mix(
    in oklab,
    var(--huisly-primary) 10%,
    transparent
  );
  --scalar-border-color: var(--huisly-border);

  --scalar-color-green: var(--huisly-success);
  --scalar-color-red: var(--huisly-destructive);
  --scalar-color-yellow: var(--huisly-warning);
  --scalar-color-orange: var(--huisly-warning);
  --scalar-color-blue: var(--huisly-accent-text);
  --scalar-color-purple: var(--huisly-accent-text);

  --scalar-button-1: var(--huisly-primary);
  --scalar-button-1-color: var(--huisly-primary-foreground);
  --scalar-button-1-hover: var(--huisly-primary-hover);

  --scalar-sidebar-background-1: var(--huisly-background);
  --scalar-sidebar-color-1: var(--huisly-foreground);
  --scalar-sidebar-color-2: var(--huisly-muted-foreground);
  --scalar-sidebar-border-color: var(--huisly-border);
  --scalar-sidebar-item-hover-background: var(--huisly-muted);
  --scalar-sidebar-item-hover-color: var(--huisly-foreground);
  --scalar-sidebar-item-active-background: color-mix(
    in oklab,
    var(--huisly-primary) 10%,
    transparent
  );
  --scalar-sidebar-color-active: var(--huisly-accent-text);
  --scalar-sidebar-indent-border: var(--huisly-border);
  --scalar-sidebar-indent-border-hover: var(--huisly-muted-foreground);
  --scalar-sidebar-indent-border-active: var(--huisly-accent-text);
  --scalar-sidebar-search-background: var(--huisly-card);
  --scalar-sidebar-search-border-color: var(--huisly-border);
  --scalar-sidebar-search-color: var(--huisly-muted-foreground);
}

/* Headings in Space Grotesk, as on the website. */
.scalar-app h1,
.scalar-app h2,
.scalar-app h3,
.scalar-app .section-header,
.scalar-app .section-header-label {
  font-family: var(--huisly-font-heading);
  letter-spacing: -0.01em;
}

.scalar-app :focus-visible {
  outline: 2px solid var(--huisly-ring);
  outline-offset: 2px;
}

/* ── The header ───────────────────────────────────────────────────────── */

.huisly-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--huisly-header-height);
  padding: 0 16px;
  border-bottom: 1px solid var(--huisly-border);
  background: var(--huisly-background);
  color: var(--huisly-foreground);
  font-family: var(--huisly-font-sans);
  font-size: 14px;
}

.huisly-header a {
  color: inherit;
  text-decoration: none;
  border-radius: 0.5rem;
}

.huisly-header a:focus-visible {
  outline: 2px solid var(--huisly-ring);
  outline-offset: 2px;
}

.huisly-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--huisly-font-heading);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.huisly-brand svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.huisly-title {
  padding-left: 12px;
  border-left: 1px solid var(--huisly-border);
  color: var(--huisly-muted-foreground);
  white-space: nowrap;
}

.huisly-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.huisly-nav a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  font-weight: 500;
  white-space: nowrap;
}

.huisly-nav a:hover {
  background: var(--huisly-muted);
}

.huisly-nav a.huisly-button {
  background: var(--huisly-primary);
  color: var(--huisly-primary-foreground);
}

.huisly-nav a.huisly-button:hover {
  background: var(--huisly-primary-hover);
}

.huisly-noscript {
  max-width: 40rem;
  margin: 3rem auto;
  padding: 0 16px;
  line-height: 1.6;
}

.huisly-noscript a {
  color: var(--huisly-accent-text);
}

@media (max-width: 520px) {
  .huisly-title {
    display: none;
  }

  .huisly-nav a {
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}