/* User Provided Stylesheet */

/* Cornerstone branding, matched to cornerstonedata.org (font, palette, card style). */

/* DM Sans to match cornerstonedata.org */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/* cornerstonedata.org tokens, mapped onto the MyST theme variables.
   The host site has no dark mode, so the same values are forced under .dark too. */
:root,
:root.dark {
  --cs-brand: #29a7d5;
  --cs-text-primary: #2c3746;
  --cs-text-secondary: #6a727c;
  --cs-background: #ffffff;
  --cs-background-surface: #f7f7f5;
  --cs-border: #d1d1cf;
  --cs-radius: 5px;

  color-scheme: light;
  --myst-color-bg: var(--cs-background);
  --myst-color-bg-secondary: var(--cs-background-surface);
  --myst-color-surface: var(--cs-background-surface);
  --myst-color-surface-hover: #efefec;
  --myst-color-text: var(--cs-text-primary);
  --myst-color-text-secondary: var(--cs-text-secondary);
  --myst-color-text-tertiary: var(--cs-text-secondary);
  --myst-color-prose-body: var(--cs-text-primary);
  --myst-color-border: var(--cs-border);
  --myst-color-border-strong: var(--cs-border);

  /* Light-mode values for everything the theme's .dark block overrides */
  --myst-color-link: #1d4ed8;
  --myst-color-link-hover: #3b82f6;
  --myst-color-link-underline: #60a5fa;
  --myst-color-active: #2563eb;
  --myst-color-active-bg: rgba(147, 197, 253, 0.3);
  --myst-color-active-surface: #eff6ff;
  --myst-color-focus-ring: #3b82f6;
  --myst-color-focus-outline: #bfdbfe;
  --myst-color-accent-text: #1e3a8a;
  --myst-color-accent-surface: #eff6ff;
  --myst-color-accent-surface-border: #bfdbfe;
  --myst-color-accent-surface-text: #1e3a8a;
  --myst-color-inverse-bg: #1e3a8a;
  --myst-color-inverse-text: #fff;
  --myst-color-code: #be185d;
  --myst-color-kbd-shadow: rgba(28, 25, 23, 0.1);
  --myst-color-info-bg: #eff6ff;
  --myst-color-info-text: #2563eb;
  --myst-color-success: #16a34a;
  --myst-color-success-bg: #f0fdf4;
  --myst-color-success-text: #16a34a;
  --myst-color-warning: #d97706;
  --myst-color-warning-bg: #fffbeb;
  --myst-color-warning-text: #d97706;
  --myst-color-danger: #dc2626;
  --myst-color-danger-bg: #fef2f2;
  --myst-color-danger-text: #dc2626;
  --myst-color-error: #ef4444;
  --myst-color-error-bg: #fee2e2;
  --myst-color-error-text: #b91c1c;
  --myst-color-theorem-bg: #faf5ff;
  --myst-color-theorem-text: #9333ea;
  --myst-color-example-bg: #fff7ed;
  --myst-color-example-text: #ea580c;
  --myst-color-proof-bg: #f9fafb;
  --myst-color-proof-text: #4b5563;
}

html,
body {
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--cs-text-primary);
  background-color: var(--cs-background);
}

/* Dark mode off: hide the toggle and undo the few dark: utilities that don't use variables */
.myst-theme-button {
  display: none !important;
}
.dark .dark\:bg-slate-950 {
  background-color: var(--cs-background);
}
.dark .dark\:bg-myst-bg-secondary {
  background-color: transparent;
}
.dark .dark\:hidden {
  display: block;
}
.dark .dark\:block {
  display: none;
}
.dark .dark\:shadow-2xl {
  box-shadow: none;
}

/* Blog-card style from cornerstonedata.org/blog for neutral callouts and cards:
   light surface, thin border, small radius, no shadow or colored side bar.
   tip / warning / important keep the theme colors so they still stand out. */
.myst-admonition-note,
.myst-admonition-seealso,
.myst-card {
  background-color: var(--cs-background-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: none;
}
.myst-admonition-note .myst-admonition-header,
.myst-admonition-seealso .myst-admonition-header {
  background-color: transparent;
  color: var(--cs-text-primary);
}
.myst-card:hover {
  border-color: var(--cs-text-secondary);
}

.rc-banner {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
}

/* Page footer line: which release a page applies to and was last checked against (plan §7.1) */
.page-status {
  font-size: 0.8rem;
  opacity: 0.7;
}
