/* The look of the OMS web UI (oms-web-ui www/public/css/app.css on Basecoat 1.1.0): Basecoat's neutral palette,
   Geist, rounding and shadows mapped onto docmd's theme variables, the OMS flower mark beside the site title, and
   links in the text colour with the web UI's underline. Basecoat's own stylesheet isn't loaded: its base reset and
   .sidebar styles clash with docmd's markup. */

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

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

:root {
  --font-family-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;

  /* Basecoat: --radius .625rem, with sm/md/xl derived from it */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --image-border-radius: 10px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  /* Basecoat's --primary and --primary-foreground, for the brand mark */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --brand-mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M12 10v12'/%3E%3Cpath d='M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z'/%3E%3Cpath d='M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z'/%3E%3C/svg%3E");

  --bg-color: oklch(1 0 0);
  --text-color: oklch(0.145 0 0);
  --text-muted: oklch(0.556 0 0);
  --text-heading: oklch(0.145 0 0);
  --border-color: oklch(0.922 0 0);
  --border-color-hover: oklch(0.87 0 0);
  --border-color-codeblock: oklch(0.922 0 0);
  --image-border-color: oklch(0.922 0 0);
  --header-bg: color-mix(in oklab, oklch(1 0 0) 88%, transparent);
  --header-border: oklch(0.922 0 0);
  --sidebar-bg: oklch(0.985 0 0);
  --sidebar-text: oklch(0.205 0 0);
  --sidebar-group-bg: oklch(0.97 0 0);
  --code-bg: oklch(0.97 0 0);
  --code-text: oklch(0.205 0 0);
  --scrollbar-thumb: oklch(0.922 0 0);
  --scrollbar-thumb-hover: oklch(0.708 0 0);
  --docmd-tooltip-bg: oklch(0.205 0 0);
  --docmd-tooltip-color: oklch(0.985 0 0);
  --docmd-tooltip-border: oklch(0.205 0 0);

  --accent-color: oklch(0.205 0 0);
  --link-color: oklch(0.145 0 0);
  --link-color-hover: oklch(0.145 0 0);
  --sidebar-link-active-bg: oklch(0.97 0 0);
  --sidebar-link-active-text: oklch(0.205 0 0);
  --glow-color: oklch(0.708 0 0 / 0.15);
  --glow-color-strong: oklch(0.708 0 0 / 0.3);
  --halo-soft: 0 0 0 3px oklch(0.708 0 0 / 0.5);
}

:root[data-theme=dark] {
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --brand-mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M12 10v12'/%3E%3Cpath d='M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z'/%3E%3Cpath d='M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z'/%3E%3C/svg%3E");

  --bg-color: oklch(0.145 0 0);
  --text-color: oklch(0.922 0 0);
  --text-muted: oklch(0.708 0 0);
  --text-heading: oklch(0.985 0 0);
  --border-color: oklch(1 0 0 / 10%);
  --border-color-hover: oklch(1 0 0 / 15%);
  --border-color-codeblock: oklch(1 0 0 / 10%);
  --image-border-color: oklch(1 0 0 / 10%);
  --header-bg: color-mix(in oklab, oklch(0.145 0 0) 88%, transparent);
  --header-border: oklch(1 0 0 / 10%);
  --sidebar-bg: oklch(0.205 0 0);
  --sidebar-text: oklch(0.922 0 0);
  --sidebar-group-bg: oklch(0.269 0 0);
  --code-bg: oklch(0.205 0 0);
  --code-text: oklch(0.922 0 0);
  --scrollbar-thumb: oklch(1 0 0 / 10%);
  --scrollbar-thumb-hover: oklch(0.556 0 0);
  --docmd-tooltip-bg: oklch(0.985 0 0);
  --docmd-tooltip-color: oklch(0.205 0 0);
  --docmd-tooltip-border: oklch(0.985 0 0);

  --accent-color: oklch(0.922 0 0);
  --link-color: oklch(0.985 0 0);
  --link-color-hover: oklch(0.985 0 0);
  --sidebar-link-active-bg: oklch(0.269 0 0);
  --sidebar-link-active-text: oklch(0.985 0 0);
  --glow-color: oklch(0.556 0 0 / 0.2);
  --glow-color-strong: oklch(0.556 0 0 / 0.35);
  --halo-soft: 0 0 0 3px oklch(0.556 0 0 / 0.5);
}

/* Site title with the OMS flower mark, as the web UI's .sidebar-brand */
.sidebar-header {
  text-align: left;
  padding: 1rem 1rem 0.75rem;
}

.sidebar-header h1 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 2rem;
}

.sidebar-header h1 a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-heading);
}

.sidebar-header h1 a::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--brand-mark-icon) center / 1rem no-repeat var(--primary);
}

/* On phones the sidebar header is the top bar */
@media (max-width: 768px) {
  .sidebar-header {
    padding: 0.5rem 1rem;
  }

  .sidebar-header h1 a::before {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* Links in page content, as the web UI's .link */
.main-content a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
}

.main-content a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* The landing page's hero: smaller than docmd's marketing-sized one, with its buttons side by side (docmd puts a
   line break between consecutive buttons). */
.docmd-hero {
  margin: var(--space-4) 0 var(--space-8);
  padding: var(--space-8) 0;
}

.docmd-hero .hero-content h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.docmd-hero .hero-content br {
  display: none;
}

.docmd-hero .docmd-button {
  margin: var(--space-1);
}

/* Buttons as Basecoat's: primary (docmd fills them with the link colour and white text, which is unreadable here,
   where links are the text colour), and any after the first in a group outlined. */
a.docmd-button {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

a.docmd-button:hover {
  color: var(--primary-foreground);
  box-shadow: none;
}

a.docmd-button ~ a.docmd-button {
  background-color: transparent;
  color: var(--text-heading);
  border-color: var(--border-color-hover);
}

a.docmd-button ~ a.docmd-button:hover {
  color: var(--text-heading);
  background-color: var(--code-bg);
}

/* Mermaid diagrams in the site's colours, so they follow the light/dark switch (Mermaid's themes are fixed colours,
   chosen once when the page loads). Mermaid styles its SVGs by ID, hence !important. */
.mermaid .node rect,
.mermaid .node polygon,
.mermaid .node circle,
.mermaid rect.actor,
.mermaid .note,
.mermaid .labelBox {
  fill: var(--code-bg) !important;
  stroke: var(--border-color-hover) !important;
}

.mermaid .cluster rect {
  fill: transparent !important;
  stroke: var(--border-color-hover) !important;
  stroke-dasharray: 4 3;
}

.mermaid .flowchart-link,
.mermaid .edgePath path,
.mermaid .messageLine0,
.mermaid .messageLine1,
.mermaid .loopLine,
.mermaid .actor-line {
  stroke: var(--text-muted) !important;
}

.mermaid marker path,
.mermaid .arrowheadPath {
  fill: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

.mermaid text,
.mermaid .nodeLabel,
.mermaid .cluster-label,
.mermaid .edgeLabel,
.mermaid .messageText,
.mermaid .noteText,
.mermaid .loopText,
.mermaid .loopText tspan,
.mermaid .labelText,
.mermaid .labelText tspan,
.mermaid .noteText tspan,
.mermaid text.actor > tspan {
  fill: var(--text-color) !important;
  color: var(--text-color) !important;
}

.mermaid .edgeLabel,
.mermaid .edgeLabel p,
.mermaid .edgeLabel span,
.mermaid .edgeLabel rect,
.mermaid .labelBkg {
  background-color: var(--bg-color) !important;
  fill: var(--bg-color) !important;
}

/* shadcn typography: tight tracking on headings */
h2,
h3 {
  letter-spacing: -0.025em;
}

/* Callouts in the OMS web UI's status colours */
.callout-info { --callout-color: oklch(0.6 0.14 250); }
.callout-warning { --callout-color: oklch(0.75 0.15 75); }
.callout-success,
.callout-tip { --callout-color: oklch(0.6 0.13 155); }
.callout-danger { --callout-color: oklch(0.577 0.245 27.325); }