/* ============================================================
   Flute docs skin — Scalar
   Light-only. Port of the Fern docs skin under fern/assets/.

   Source of truth for every value here: the Flute design-system
   tokens in the app (src/lib/design-system/), by way of the Fern
   skin and the colors/typography blocks in fern/docs.yml. The
   values are copies, not an independent palette — keep them in
   sync.

   Provenance within the token layer below: most of it (the
   monochrome scale, brand colors, fg-*/border-* inks, radii,
   font stacks, the positive/negative/warning/info soft+ink
   pairs) is a verbatim copy of the Fern skin's :root block
   (the stylesheet under fern/assets/ in this repo), with its
   custom-property prefix renamed to --flute-* — keep those in
   sync with that source. A minority — roughly a dozen values,
   including --scalar-background-3, --scalar-background-accent,
   the dark-pane neutrals (--scalar-background-1/2/3 and the
   lifted syntax hues inside the .dark-mode/.request-card/
   .response-card block), and the *-border companions to the
   soft/ink pairs — have no Fern source at all: Scalar's variable
   surface needed slots Fern never had (a third background tier,
   an alpha-tinted accent wash, a full dark syntax-hue palette),
   so those were invented here to fit Flute's palette rather than
   copied from anywhere. They are not required to track that source.

   Fragility note: several selectors below target undocumented
   Scalar internals rather than the --scalar-* variable API —
   `.t-editor__*`, `.request-card`/`.response-card`,
   `.link__button`, `[class~='group/sidebar-section']`, the
   inline-style substring matches on method badges. These are
   Scalar's own generated class names, not a documented contract,
   and may silently stop matching (rather than error) on a Scalar
   version bump — a version bump should be followed by a visual
   diff against the screenshots in task4-screenshots/, not assumed
   safe from a clean build alone.

   How this file works with Scalar:
   Scalar themes itself through --scalar-* custom properties
   declared on `body.light-mode` / `body.dark-mode` (theme) and
   on `:root` (metrics). This file overrides those variables
   first and only reaches for element selectors where no
   variable exists.

   Specificity note: Scalar declares its palette twice — once
   plainly on `.light-mode`, then again inside an
   `@supports (color: color(display-p3 ...))` block at the same
   specificity. A bare `.light-mode` here would tie and lose on
   source order in a production bundle, so the theme block below
   is written as `body.light-mode` and the metrics block as
   `html:root`. Both outrank Scalar's originals outright.
   ============================================================ */

/* ------------------------------------------------------------
   Fonts — self-hosted, served from the site root.

   Scalar's `assetsDir: assets` publishes everything in
   scalar/assets/ at "/", not "/assets/", so these URLs are
   root-relative filenames. Self-hosting also keeps the site off
   Scalar's font CDN for the body face.
   ------------------------------------------------------------ */

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

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

/* ============================================================
   Token layer

   Non-theme tokens (families, radii, the Flute palette this
   file consumes) live on the root. Radii in particular MUST be
   set here: Scalar derives --scalar-radius-md/lg/xl/2xl from
   --scalar-radius with min() inside the same :root rule, and a
   custom property is substituted on the element that declares
   it. Overriding --scalar-radius further down the tree would
   leave the derived radii resolved against Scalar's 3px.
   ============================================================ */

html:root {
  /* Warm monochrome scale */
  --flute-25: #fcfcfb;
  --flute-50: #f7f7f5;
  --flute-950: #1a1a19;
  --flute-975: #131312;

  /* Brand */
  --flute-dark-base: #131312;
  --flute-citron: #ddff33;
  --flute-citron-hover: #c5e62b;
  --flute-citron-active: #b3d321;

  /* Periwinkle darkened two steps from --flute-periwinkle (#697CFF).
     5.24:1 on the #F7F7F5 canvas; the brand tone is only 3.30:1.
     Lifted to --flute-periwinkle-lifted on the ink surfaces. */
  --flute-periwinkle: #4a5bd4;
  --flute-periwinkle-lifted: #8e9cff;

  /* Semantic foregrounds */
  --fg-strong: #131312;
  --fg-neutral: #676760;
  --fg-medium: #7c7c74;

  --border-subtle: #eaeae6;
  --border-muted: #e1e1db;
  --border-dark: #30302e;

  /* Radii — binary: pill or 8px card. Capping --scalar-radius-max
     at 8px collapses Scalar's md/lg/xl/2xl/3xl ramp onto the one
     card radius; --scalar-radius-full is calc()'d rather than
     clamped, so pills still round fully. */
  --radius-pill: 100px;
  --radius-card: 8px;
  --scalar-radius: 8px;
  --scalar-radius-max: 8px;

  /* Families */
  --font-display: 'Trigonix', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --scalar-font: var(--font-body);

  --shadow-soft: 0 8px 24px rgb(19 19 18 / 8%);

  /* Compact type ramp */
  --flute-font-13: 13px;
  --flute-font-11: 11px;
  --flute-track-display: -0.4px;
  --flute-track-eyebrow: 0.6px;

  /* Semantic state colours — method badges and callouts */
  --flute-positive-soft: #e6f3ec;
  --flute-positive-ink: #1f6642;
  --flute-positive-border: #a9cfbb;
  --flute-negative-soft: #f7e7e3;
  --flute-negative-ink: #8a3227;
  --flute-negative-border: #e0b5ac;
  --flute-warning-soft: #faefd6;
  --flute-warning-ink: #85590f;
  --flute-warning-border: #e4c77e;
  --flute-info-soft: #e6e9f3;
  --flute-info-ink: #2a386b;
  --flute-info-border: #bcc4de;

  /* Operator-tool surfaces */
  --flute-row-hover: #f3f3ef;
}

/* ============================================================
   Theme

   Both mode classes get the same light values. The site is
   locked to light in scalar.config.json (siteConfig.colorScheme)
   and the toggle is hidden, but mirroring the palette means a
   stray `dark-mode` on <body> — from a stale localStorage
   colorMode, say — is harmless rather than a broken page.

   These selectors deliberately name `body`: the descendant
   `.dark-mode` scope further down is Scalar's own request-card
   ink surface and must NOT be caught by this block.
   ============================================================ */

body.light-mode,
body.dark-mode {
  color-scheme: light;

  /* Canvas / raised. Fern: background #F7F7F5, card #FFFFFF.
     Scalar's stock scale runs the other way (bg-1 white, bg-2
     grey), so background-2 is the *raised* white here and
     background-3 takes the pressed/subtle step. */
  --scalar-background-1: #f7f7f5;
  --scalar-background-2: #ffffff;
  --scalar-background-3: #edede8;

  /* Text inks */
  --scalar-color-1: var(--fg-strong);
  --scalar-color-2: var(--fg-neutral);
  --scalar-color-3: var(--fg-medium);

  --scalar-border-color: var(--border-subtle);

  /* Accent */
  --scalar-color-accent: var(--flute-periwinkle);
  --scalar-background-accent: #4a5bd414;
  --scalar-link-color: var(--flute-periwinkle);
  --scalar-link-color-hover: var(--flute-periwinkle);

  /* Semantic hues. Scalar derives HTTP-method badge colours and
     light-mode syntax tokens from these, so retoning them here
     is what gives the method badges their Flute tones. */
  --scalar-color-green: var(--flute-positive-ink);
  --scalar-color-blue: var(--flute-info-ink);
  --scalar-color-orange: var(--flute-warning-ink);
  --scalar-color-yellow: var(--flute-warning-ink);
  --scalar-color-red: var(--flute-negative-ink);
  --scalar-color-purple: var(--flute-periwinkle);

  /* Sidebar. Fern: sidebar-background #FCFCFB, row hover #F3F3EF. */
  --scalar-sidebar-background-1: var(--flute-25);
  --scalar-sidebar-color-1: var(--fg-strong);
  --scalar-sidebar-color-2: var(--fg-neutral);
  --scalar-sidebar-border-color: var(--border-subtle);
  --scalar-sidebar-item-hover-background: var(--flute-row-hover);
  --scalar-sidebar-item-hover-color: var(--fg-strong);
  --scalar-sidebar-item-active-background: var(--flute-row-hover);
  --scalar-sidebar-color-active: var(--fg-strong);
  --scalar-sidebar-search-background: #ffffff;
  --scalar-sidebar-search-border-color: var(--border-subtle);
  --scalar-sidebar-search-color: var(--fg-medium);

  --scalar-shadow-1: 0 1px 2px rgb(19 19 18 / 6%);
  --scalar-shadow-2: var(--shadow-soft);

  /* Default buttons stay ink-on-white; citron is reserved for the
     single header CTA (see below). */
  --scalar-button-1: var(--flute-dark-base);
  --scalar-button-1-hover: #30302e;
  --scalar-button-1-color: #ffffff;
}

/* Fern: header-background #FCFCFB — a half-step off the canvas,
   matching the sidebar. Scalar scopes its header variables to
   `.t-doc__header`, which the API-reference bundle carries but
   the docs shell does not: there the bar is `header.t-header`
   and the variables fall back to --scalar-background-1. Naming
   both covers either shell. */
body.light-mode .t-doc__header,
body.dark-mode .t-doc__header,
body.light-mode header.t-header,
body.dark-mode header.t-header {
  --scalar-header-background-1: var(--flute-25);
  --scalar-header-border-color: var(--border-subtle);
  --scalar-header-color-1: var(--fg-strong);
  --scalar-header-color-2: var(--fg-neutral);
}

/* ============================================================
   Dark code surfaces — the one dark plane on a light page

   Fern got this from `settings.dark-mode-code: true`. Scalar
   already tags the API-reference request card `.dark-mode`, but
   with its stock near-black palette; prose code blocks and the
   response card stay light. Re-point all three at Flute's ink
   surfaces so dense JSON keeps the contrast the syntax colours
   were tuned for.

   The palette is re-declared as --scalar-* on the surface
   itself: Scalar's syntax rules (`.scalar-app .hljs-string`
   etc.) read --scalar-color-blue/green/orange/… and inherit
   them from the enclosing block, and --hljs-background is
   declared on .t-editor__code as var(--scalar-background-2), so
   overriding background-2 on that same element repaints the
   pane.

   The scope reaches .t-editor__code-container, not just the
   <pre>: the language picker and copy button are siblings of
   the <pre> that float over it, and left on the page scope they
   render as white chips on the ink ground.
   ============================================================ */

.scalar-app .dark-mode,
.scalar-app .request-card,
.scalar-app .response-card,
.scalar-app pre.t-editor__code,
.scalar-app .t-editor__code-container,
.scalar-app .t-editor__code-group {
  color-scheme: dark;

  --scalar-background-1: var(--flute-975);
  --scalar-background-2: var(--flute-950);
  --scalar-background-3: #262624;
  --scalar-color-1: var(--flute-50);
  --scalar-color-2: #b4b4ac;
  --scalar-color-3: #8a8a82;
  --scalar-border-color: var(--border-dark);

  /* Periwinkle needs lifting to clear the ink ground; the brand
     tone is too dark against #131312. */
  --scalar-color-accent: var(--flute-periwinkle-lifted);
  --scalar-link-color: var(--flute-periwinkle-lifted);
  --scalar-link-color-hover: var(--flute-periwinkle-lifted);

  /* Syntax hues lifted off the ink ground. The light-mode inks
     above are unreadable at 4% luminance. */
  --scalar-color-green: #7fd1a4;
  --scalar-color-blue: #8fb8ff;
  --scalar-color-orange: #f0b47a;
  --scalar-color-yellow: #e8cf7a;
  --scalar-color-red: #f09a8f;
  --scalar-color-purple: #c3aef5;

  --scalar-button-1: var(--flute-50);
  --scalar-button-1-hover: #ffffffe6;
  --scalar-button-1-color: var(--flute-dark-base);
}

/* The card wrapper paints from a utility class (bg-b-2), not a
   variable, so it needs the ground stated outright. */
.scalar-app .request-card,
.scalar-app .response-card {
  background-color: var(--flute-975);
}

/* ============================================================
   Typography

   The design system restricts Trigonix (display) to page titles, hero
   metric values, empty-state and AI headings, and modal titles.
   Everything else — h2 through h6 and all prose — is Inter, so
   the sub-heads are reset explicitly rather than left to
   inherit whatever Scalar ships.
   ============================================================ */

/* Scalar sets `color` on <body> literally rather than from a
   variable, so the ink is restated here as well as in the token
   block. `.scalar-app` is the body element itself. */
body.scalar-app {
  font-family: var(--font-body);
  color: var(--fg-strong);
}

/* Page title only. `.t-editor__page-title` is the class Scalar
   puts on the rendered H1; the bare h1 covers headings in the
   API reference that do not carry it. */
.scalar-app h1,
.scalar-app .t-editor__page-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--flute-track-display);
  color: var(--fg-strong);
}

.scalar-app h2,
.scalar-app h3,
.scalar-app h4,
.scalar-app h5,
.scalar-app h6 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--fg-strong);
}

/* Headings inside the ink panes (response status tabs, schema
   headers) follow the pane, not the page. */
.scalar-app .dark-mode h1,
.scalar-app .dark-mode h2,
.scalar-app .dark-mode h3,
.scalar-app .request-card h2,
.scalar-app .request-card h3,
.scalar-app .response-card h2,
.scalar-app .response-card h3 {
  color: var(--flute-50);
}

/* ============================================================
   Sidebar

   Section titles ("Getting Started", "Using the API") take the
   Flute eyebrow. They render as a non-interactive <div> with
   aria-selected; the API-reference tag toggles are <button>s and
   stay sentence case — they are interactive, and shrinking them
   costs more than the consistency is worth.
   ============================================================ */

.sidebar li[class~='group/sidebar-section'] > div[aria-selected] {
  font-size: var(--flute-font-11);
  font-weight: 500;
  letter-spacing: var(--flute-track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-medium);
}

/* Rows are pills. Scalar's `rounded` utility resolves to
   --scalar-radius-md (now 8px), so the pill radius is stated on
   the row itself at a specificity that clears it. */
.sidebar .items [class~='group/button'] {
  border-radius: var(--radius-pill);
  font-size: var(--flute-font-13);
}

.sidebar .items [class~='group/button']:hover {
  background-color: var(--flute-row-hover);
  color: var(--fg-strong);
}

/* Search row: pill, matching the row rhythm above. */
.sidebar .search-row .search {
  border-radius: var(--radius-pill);
}

/* ============================================================
   Method badges

   Fern renders each method as a soft-ground pill chip
   (.fern-docs-badge.green/blue/amber/red — background AND ink,
   see the Fern skin source in fern/assets/, this repo). Scalar
   renders the method as bare colored text with no ground:
   --scalar-color-green/blue/orange/red are already re-pointed
   at the Flute semantic inks
   by the theme block above, so the text color is correct for
   free, but the chip itself — tinted ground, pill radius, the
   padding that makes it read as a chip rather than a label —
   has to be added explicitly here.

   Three different Scalar elements carry a method, and none of
   them expose the HTTP verb as a class Scalar-wide: the
   sidebar row (.sidebar-heading-type) has a verb modifier
   (--get/--post/--put/--patch/--delete) but ALSO — like the
   other two — sets its resolved hue as an inline `style`
   attribute (`style="color: var(--scalar-color-blue)"` on
   .request-method/.endpoint-method, `style="--method-color:
   var(--scalar-color-blue)"` on .sidebar-heading-type). Since
   every instance carries that attribute, the chip ground is
   keyed off it directly via an attribute substring match — one
   rule set covers all three elements without depending on the
   verb-modifier class existing.
   ============================================================ */

.scalar-app .request-method,
.scalar-app .endpoint-method,
.scalar-app .sidebar-heading-type {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-weight: 500;
  letter-spacing: 0.4px;
}

.scalar-app .request-method[style*='scalar-color-blue'],
.scalar-app .endpoint-method[style*='scalar-color-blue'],
.scalar-app .sidebar-heading-type[style*='scalar-color-blue'] {
  background-color: var(--flute-info-soft);
}

.scalar-app .request-method[style*='scalar-color-green'],
.scalar-app .endpoint-method[style*='scalar-color-green'],
.scalar-app .sidebar-heading-type[style*='scalar-color-green'] {
  background-color: var(--flute-positive-soft);
}

.scalar-app .request-method[style*='scalar-color-orange'],
.scalar-app .endpoint-method[style*='scalar-color-orange'],
.scalar-app .sidebar-heading-type[style*='scalar-color-orange'],
.scalar-app .request-method[style*='scalar-color-yellow'],
.scalar-app .endpoint-method[style*='scalar-color-yellow'],
.scalar-app .sidebar-heading-type[style*='scalar-color-yellow'] {
  background-color: var(--flute-warning-soft);
}

.scalar-app .request-method[style*='scalar-color-red'],
.scalar-app .endpoint-method[style*='scalar-color-red'],
.scalar-app .sidebar-heading-type[style*='scalar-color-red'] {
  background-color: var(--flute-negative-soft);
}

/* Badges sitting inside the dark code panes keep the ink
   ground (see the Fern skin source in fern/assets/, this repo:
   `.dark .fern-docs-badge.green` swaps to a translucent chip so
   an opaque pastel rectangle doesn't sit on the ink surface).
   --scalar-color-* is already
   re-lifted to pane-legible hues inside .dark-mode/.request-
   card/.response-card above, and that lifted hue is exactly
   `currentColor` on these elements (Scalar paints the badge
   text from the same variable) — so the translucent ground is
   derived from currentColor rather than a second hardcoded
   palette. */
.scalar-app .dark-mode .request-method,
.scalar-app .dark-mode .endpoint-method,
.scalar-app .dark-mode .sidebar-heading-type,
.scalar-app .request-card .request-method,
.scalar-app .request-card .endpoint-method,
.scalar-app .request-card .sidebar-heading-type,
.scalar-app .response-card .request-method,
.scalar-app .response-card .endpoint-method,
.scalar-app .response-card .sidebar-heading-type {
  background-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* ============================================================
   Header CTA — the one citron site on the site

   The design system gates citron to a single commitment CTA per
   screen.
   "Partner Portal" is the only CTA the docs carry, so it takes
   citron and everything else stays periwinkle. Spec copied from
   the .v-cta-citron button in the design-system stylesheet.

   Scalar paints this link from utility classes reading
   --scalar-header-call-to-action-color and --scalar-button-1-color.
   Those variables are shared with other buttons, so the link is
   targeted directly instead; the three-class selector clears
   Scalar's `.scalar-app .bg-b-header-cta`.
   ============================================================ */

.header .navigation a.link__button {
  background-color: var(--flute-citron);
  color: var(--flute-dark-base);
  border-color: transparent;
  border-radius: var(--radius-pill);
  font-weight: 500;
  letter-spacing: -0.05px;
}

.header .navigation a.link__button:hover {
  background-color: var(--flute-citron-hover);
  color: var(--flute-dark-base);
}

.header .navigation a.link__button:active {
  background-color: var(--flute-citron-active);
}

.header .navigation a.link__button:focus-visible {
  outline: 2px solid var(--flute-dark-base);
  outline-offset: 2px;
}

/* ============================================================
   Callouts

   Scalar exposes each callout family as a primary (border and
   icon), secondary (ground) and font-color triple. Its stock
   secondaries are 97%-transparent washes that go muddy over the
   warm canvas; the Flute soft/ink pairs are solid and were
   tuned for this ground.
   ============================================================ */

body.light-mode .t-editor__callout,
body.dark-mode .t-editor__callout {
  --callout-info-primary: var(--flute-info-border);
  --callout-info-secondary: var(--flute-info-soft);
  --callout-info-font-color: var(--flute-info-ink);

  --callout-success-primary: var(--flute-positive-border);
  --callout-success-secondary: var(--flute-positive-soft);
  --callout-success-font-color: var(--flute-positive-ink);

  --callout-warning-primary: var(--flute-warning-border);
  --callout-warning-secondary: var(--flute-warning-soft);
  --callout-warning-font-color: var(--flute-warning-ink);

  --callout-danger-primary: var(--flute-negative-border);
  --callout-danger-secondary: var(--flute-negative-soft);
  --callout-danger-font-color: var(--flute-negative-ink);

  --callout-neutral-primary: var(--border-muted);
  --callout-neutral-secondary: #ffffff;
  --callout-neutral-font-color: var(--fg-strong);
}

/* Scalar draws the callout border as a 50%-transparent mix of
   --callout-primary; the Flute borders are already the soft
   step, so they are restated solid. */
.scalar-app .t-editor__callout {
  border-radius: var(--radius-card);
  border: 1px solid var(--callout-primary);
  background-color: var(--callout-secondary);
  color: var(--callout-font-color);
}

/* The icon follows the ink, not the border. */
.scalar-app .t-editor__callout .callout-content__icon {
  color: var(--callout-font-color);
}

/* ============================================================
   Cards
   ============================================================ */

.scalar-app .scalar-card {
  border-radius: var(--radius-card);
}

.scalar-app .t-editor__card {
  border-radius: var(--radius-card);
  border-color: var(--border-subtle);
  transition:
    box-shadow 120ms ease,
    border-color 120ms ease;
}

.scalar-app .t-editor__card:hover {
  border-color: var(--border-muted);
  box-shadow: var(--shadow-soft);
}