/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/*
 * Design tokens for /api-docs/ — vendored from kike-website/src/index.css so the docs and the
 * marketing site share one palette, one pair of themes and one set of fonts.
 *
 * kike-ui has no Tailwind build, so kike-website's utility layer is written out as plain CSS
 * (docs.css) instead; the contract is the --k-* names and values below. When kike-website
 * changes them, change them here too — a stale palette is a visible drift, not a build error.
 *
 * Loaded after vendor/swagger-ui.css so these tokens win the cascade, and before docs.css,
 * which spends them on the page chrome and on Swagger UI's own skin.
 */

/* ------------------------------------------------------------------ fonts -----
   Self-hosted, latin subset: scripts/copy-docs-assets.mjs copies exactly these three
   files out of node_modules/@fontsource-variable — the page contacts no CDN.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('./assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./assets/fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- raw tokens ---
   Switched at runtime by data-theme (the attribute kike-website's ThemeToggle writes, so a
   visitor who set the marketing site to editorial gets editorial docs too).
   `--k-font-mono` is the one addition: kike-website keeps it inside its Tailwind @theme
   block, and the docs need it as a plain variable for code, paths and parameters.
   ------------------------------------------------------------------------- */
:root,
[data-theme='terminal'] {
  --k-bg: #0b0e11;
  --k-panel: #11161b;
  --k-panel2: #0f1419;
  --k-line: #1f2a33;
  --k-glow: #00e676;
  --k-green: #00e676;
  --k-green-dim: #2ecc71;
  --k-amber: #ffb000;
  --k-red: #ff4d4d;
  --k-cyan: #4dd0e1;
  --k-invert: #0a0c0e;
  --k-dim: #8a97a5;
  --k-fg: #dce6ec;

  --k-font-display: 'JetBrains Mono Variable', ui-monospace, monospace;
  --k-font-sans: 'JetBrains Mono Variable', ui-monospace, monospace;
  --k-font-mono:
    'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
}

[data-theme='editorial'] {
  --k-bg: #f2efe9;
  --k-panel: #e9e5dc;
  --k-panel2: #f7f4ee;
  --k-line: #1a1a1a;
  --k-glow: #c8332e;
  --k-green: #c8332e;
  --k-green-dim: #a52723;
  --k-amber: #17324d;
  --k-red: #9e2a22;
  --k-cyan: #2c6e9b;
  --k-invert: #f2efe9;
  --k-dim: #5a5750;
  --k-fg: #1a1a1a;

  --k-font-display: 'Fraunces Variable', Georgia, serif;
  --k-font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --k-font-mono:
    'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
}

/* The code surface deliberately does not switch with the theme: highlight.js writes its token
   colours as inline styles (measured: <span style="color: rgb(162, 252, 162)">), tuned for a
   dark background and unreachable by any class rule. Code blocks therefore keep the terminal
   panel in both themes — legible, and on-brand for this site. */
:root,
[data-theme='terminal'],
[data-theme='editorial'] {
  --k-code-bg: #0f1419;
  --k-code-fg: #dce6ec;
  --k-code-line: #1f2a33;
}

/* --------------------------------------------------------------------- base ---
   kike-website resets * { margin: 0; padding: 0 } for its own React tree. Swagger UI's
   stylesheet is written against normal browser defaults (it sets margins where it wants
   them), so the reset is deliberately scoped to the chrome this page owns instead — a
   global reset here silently collapses the viewer's spacing.
   ------------------------------------------------------------------------- */
/* kike-website gets this from Tailwind's preflight; this page has no reset, and without it
   .docs-shell's `width: 100%` plus its padding overflows the viewport by exactly that padding
   (measured: 40px of horizontal scroll at 390px wide). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--k-bg);
  color-scheme: light;
  scroll-behavior: smooth;
}

[data-theme='terminal'] {
  color-scheme: dark;
}

body {
  margin: 0;
  background-color: var(--k-bg);
  color: var(--k-fg);
  font-family: var(--k-font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

::selection {
  background-color: var(--k-glow);
  color: var(--k-bg);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--k-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--k-line);
  border-radius: 0;
}

/* --------------------------------------------------------------- animations --- */
@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.cursor-blink {
  animation: blink 1.1s step-end infinite;
}

/* ------------------------------------------- theme-specific page effects ------
   Exactly the two overlays kike-website puts on every page root (its pages render
   `<div className="scanlines ed-grid min-h-screen bg-bg text-fg">`); the body carries both
   classes and each theme hides the one that is not its own.
   ------------------------------------------------------------------------- */
.scanlines::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}

[data-theme='editorial'] .scanlines::before {
  display: none;
}

[data-theme='editorial'] .ed-grid::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(26, 26, 26, 0.12) 1px, transparent 1px);
  background-size: 26px 26px;
}