/* 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);
  --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);
  --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;
}

/* 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); }