/*
 * Nufinox brand overrides for MkDocs Material.
 * Mirrors the design tokens in app/assets/stylesheets/application/tokens.css
 * so the docs site matches the application's look and feel.
 */

/*
 * Brand palette — header, accents, active nav states. Material defaults
 * palette.primary/accent to "indigo" and scopes these variables to the
 * body-level attribute selectors below, so we hook into them (this file
 * loads after Material's palette stylesheet, so these rules win).
 */
[data-md-color-primary="indigo"] {
  --md-primary-fg-color: #6a5acd; /* indigo-500 */
  --md-primary-fg-color--light: #8373d8; /* indigo-400 */
  --md-primary-fg-color--dark: #5b4dbf; /* indigo-600 */
}

[data-md-color-accent="indigo"] {
  --md-accent-fg-color: #6a5acd; /* indigo-500 */
  --md-accent-fg-color--transparent: rgba(106, 90, 205, 0.1);
}

/*
 * Neutral scheme colors. Must target the scheme attribute to win over
 * Material's own [data-md-color-scheme=default] rule.
 */
[data-md-color-scheme="default"] {
  --md-hue: 248deg; /* hue of indigo-500 */

  /* Zinc text scale and app surfaces */
  --md-default-fg-color: #18181b; /* text */
  --md-default-fg-color--light: #71717a; /* text-muted */
  --md-default-fg-color--lighter: #a1a1aa; /* text-subtle */
  --md-default-fg-color--lightest: rgba(24, 24, 27, 0.07);
  --md-default-bg-color: #fafafa; /* page-bg */
  --md-default-bg-color--light: rgba(250, 250, 250, 0.7);
  --md-default-bg-color--lighter: rgba(250, 250, 250, 0.3);
  --md-default-bg-color--lightest: rgba(250, 250, 250, 0.12);

  /* Code */
  --md-code-fg-color: #18181b;
  --md-code-bg-color: #f4f4f5; /* surface-subtle */
  --md-code-bg-color--light: rgba(244, 244, 245, 0.7);
  --md-code-bg-color--lighter: rgba(244, 244, 245, 0.3);

  /* Links */
  --md-typeset-a-color: #0099ff; /* link */

  /* Footer in app ink instead of near-black */
  --md-footer-bg-color: #18181b; /* text */
  --md-footer-bg-color--dark: rgba(24, 24, 27, 0.54);
}

/* App-style headings: dark and bold instead of muted and thin. */
.md-typeset h1 {
  color: #18181b; /* text */
}

.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-typeset h3 {
  font-weight: 600;
}

/* Active nav entry in brand indigo, like the app sidebar. */
.md-nav__link--active,
.md-nav__link--active:hover {
  color: #4c3fa8; /* indigo-700 */
}

/* App font stacks (webfont loading is disabled via theme.font). */
body {
  --md-text-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --md-code-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Flat, rounded surfaces like app cards instead of elevated square ones. */
.md-typeset .highlight,
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.5rem; /* radius-md */
  box-shadow: none;
}

.md-typeset .highlight {
  border: 1px solid rgba(0, 0, 0, 0.08); /* border-soft */
}