/*
  MkDocs Material adapter for the canonical Reflex UI layer.
  Load after stylesheets/reflex.css and the KB layout stylesheet.
*/

[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --md-default-bg-color: #0d0820;
  --md-default-fg-color: #f7f4ff;
  --md-default-fg-color--light: #c5baff;
  --md-default-fg-color--lighter: #9f91dc;
  --md-default-fg-color--lightest: rgba(197, 186, 255, 0.2);
  --md-primary-fg-color: #0d0820;
  --md-primary-bg-color: #f7f4ff;
  --md-accent-fg-color: #efff1a;
  --md-typeset-color: #f7f4ff;
  --md-typeset-a-color: #f1ff86;
  --md-code-fg-color: #f7f4ff;
  --md-code-bg-color: #171033;
  --md-footer-bg-color: #120c2a;
  --md-footer-bg-color--dark: #0d0820;
  --md-footer-fg-color: #f7f4ff;
  --md-footer-fg-color--light: #c5baff;
  --kb-orange: var(--brand-accent);
  --kb-cyan: var(--brand-primary-soft);
  --kb-ink: var(--text);
  --kb-muted: var(--muted);
  --kb-line: rgba(239, 255, 26, 0.28);
  --kb-surface: var(--surface);
  --kb-surface-alt: var(--surface-soft);
  --kb-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

[data-md-color-scheme="default"] {
  color-scheme: light;
  --brand-primary: #5000dc;
  --brand-primary-soft: #6b32f0;
  --brand-primary-bright: #6b32f0;
  --brand-primary-deep: #1c1430;
  --brand-accent: #efff1a;
  --brand-secondary: var(--brand-accent);
  --brand-secondary-soft: var(--brand-primary);
  --page-bg: #f2f1f6;
  --page-bg-2: #f2f1f6;
  --surface: #ffffff;
  --surface-strong: #ece7fb;
  --surface-soft: #f8f7fb;
  --line: #d8d1e8;
  --line-strong: #b7aacd;
  --text: #1c1430;
  --muted: #625879;
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-soft);
  --accent-soft: var(--brand-primary);
  --accent-contrast: #ffffff;
  --focus-ring: #5000dc;
  --md-default-bg-color: var(--page-bg);
  --md-default-fg-color: var(--text);
  --md-default-fg-color--light: var(--muted);
  --md-default-fg-color--lighter: #776d8c;
  --md-default-fg-color--lightest: rgba(28, 20, 48, 0.14);
  --md-primary-fg-color: var(--brand-primary);
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--brand-primary);
  --md-typeset-color: var(--text);
  --md-typeset-a-color: var(--brand-primary);
  --md-code-fg-color: var(--text);
  --md-code-bg-color: var(--surface-strong);
  --md-footer-bg-color: var(--surface-strong);
  --md-footer-bg-color--dark: var(--brand-primary-deep);
  --md-footer-fg-color: var(--text);
  --md-footer-fg-color--light: var(--muted);
  --kb-orange: var(--brand-primary);
  --kb-cyan: var(--brand-primary-soft);
  --kb-ink: var(--text);
  --kb-muted: var(--muted);
  --kb-line: var(--line-strong);
  --kb-surface: var(--surface);
  --kb-surface-alt: var(--surface-soft);
  --kb-shadow: 0 12px 30px rgba(28, 20, 48, 0.12);
}

body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
}

.md-header {
  background: var(--md-primary-fg-color);
  border-bottom-color: var(--brand-accent);
}

.md-header__title,
.md-header .md-icon,
.md-header .md-header__button {
  color: var(--md-primary-bg-color);
}

.md-search__form {
  background: var(--surface);
  border-color: var(--line-strong);
}

.md-search__input,
.md-search__input::placeholder {
  color: var(--text);
}

.md-search__input::placeholder {
  opacity: 0.72;
}

.md-typeset a,
.md-nav__link:hover,
.md-nav__link:focus,
.md-nav__link--active {
  color: var(--md-typeset-a-color);
}

.md-typeset a {
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 0.14em;
}

.md-typeset a:hover {
  text-decoration-color: currentColor;
}

.md-typeset .md-button:not(.md-button--primary) {
  background: var(--surface);
  border-color: var(--md-typeset-a-color);
  color: var(--md-typeset-a-color);
}

.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus-visible {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--accent-contrast);
}

.md-typeset .md-button--primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary-soft);
  color: #ffffff;
}

.md-typeset .md-button--primary:hover {
  background: var(--brand-primary-soft);
  border-color: var(--brand-accent);
  color: #ffffff;
}

.kb-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(239, 255, 26, 0.16), transparent 28%),
    radial-gradient(circle at 8% 100%, rgba(123, 77, 255, 0.34), transparent 34%),
    linear-gradient(135deg, var(--surface-strong), var(--page-bg));
  border-color: var(--line-strong);
  color: var(--text);
}

.md-typeset .kb-hero h1,
.md-typeset .kb-hero p {
  color: var(--text);
}

.kb-hero .kb-kicker,
.kb-kicker,
.kb-stats strong,
.kb-task-grid .twemoji {
  color: var(--accent-soft);
}

.kb-hero .md-button:not(.md-button--primary) {
  border-color: var(--brand-secondary-soft);
  color: var(--text);
}

.kb-flow b {
  background: var(--brand-accent);
  color: var(--accent-contrast);
}

.kb-chip-list a:hover {
  border-color: var(--accent);
  color: var(--md-typeset-a-color);
}

[data-md-color-scheme="slate"] .kb-badge--detailed,
[data-md-color-scheme="slate"] .kb-badge--approved {
  background: rgba(230, 255, 30, 0.14);
  color: #e6ff1e;
}

[data-md-color-scheme="slate"] .kb-badge--summary,
[data-md-color-scheme="slate"] .kb-badge--draft,
[data-md-color-scheme="slate"] .kb-badge--proposed {
  background: rgba(255, 211, 94, 0.14);
  color: #ffd35e;
}

.md-typeset table:not([class]) tr:hover td {
  background: color-mix(in srgb, var(--brand-primary-soft) 12%, transparent);
}

.md-typeset code,
.md-typeset pre,
.highlight {
  color: var(--md-code-fg-color);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}