/*
  HonestRoles Docs Visual System v2
  Structure:
  1) Semantic tokens per scheme
  2) MkDocs Material variable mapping
  3) Component surfaces and interactions
  4) Utilities (including app-first callout)
*/

:root {
  --radius-sm: 0.4rem;
  --radius-md: 0.65rem;
  --radius-lg: 0.9rem;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* Dark theme (default) */
[data-md-color-scheme="slate"] {
  --pr-bg-950: #070b17;
  --pr-bg-900: #0f1629;
  --pr-bg-800: #17223a;
  --pr-text-050: #f4f7ff;
  --pr-text-200: #c2cce3;
  --pr-text-400: #8f9ab7;
  --pr-brand-500: #ff9900;
  --pr-brand-400: #ffb84d;
  --pr-info-500: #39c6ff;
  --pr-border-700: #26324d;

  --bg-canvas: var(--pr-bg-950);
  --bg-surface-1: var(--pr-bg-900);
  --bg-surface-2: var(--pr-bg-800);
  --bg-elevated: #1f2b45;
  --text-primary: var(--pr-text-050);
  --text-secondary: var(--pr-text-200);
  --text-muted: var(--pr-text-400);
  --link: var(--pr-brand-500);
  --link-hover: var(--pr-brand-400);
  --focus-ring: rgba(57, 198, 255, 0.55);
  --border-default: var(--pr-border-700);
  --border-strong: #334566;

  color-scheme: dark;
}

/* Light theme (optional) */
[data-md-color-scheme="default"] {
  --pr-bg-050: #f7f9fd;
  --pr-bg-100: #eef2fa;
  --pr-bg-200: #e2e8f5;
  --pr-text-900: #0e152a;
  --pr-text-700: #2a3554;
  --pr-text-500: #556387;
  --pr-brand-500: #e57f00;
  --pr-brand-400: #ff9900;
  --pr-info-500: #0078c8;
  --pr-border-300: #c8d3ea;

  --bg-canvas: var(--pr-bg-050);
  --bg-surface-1: #ffffff;
  --bg-surface-2: var(--pr-bg-100);
  --bg-elevated: var(--pr-bg-200);
  --text-primary: var(--pr-text-900);
  --text-secondary: var(--pr-text-700);
  --text-muted: var(--pr-text-500);
  --link: var(--pr-brand-500);
  --link-hover: var(--pr-brand-400);
  --focus-ring: rgba(0, 120, 200, 0.4);
  --border-default: var(--pr-border-300);
  --border-strong: #aebbda;

  color-scheme: light;
}

/* Backward-compatible aliases for previous token names */
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --bg-primary: var(--bg-canvas);
  --bg-secondary: var(--bg-surface-1);
  --accent: var(--link);
  --accent-hover: var(--link-hover);
  --border: var(--border-default);

  --md-default-bg-color: var(--bg-canvas);
  --md-default-bg-color--light: var(--bg-surface-1);
  --md-default-bg-color--lighter: var(--bg-surface-2);
  --md-default-fg-color: var(--text-primary);
  --md-default-fg-color--light: var(--text-secondary);
  --md-default-fg-color--lighter: var(--text-muted);

  --md-primary-fg-color: var(--bg-surface-1);
  --md-primary-fg-color--light: var(--bg-surface-2);
  --md-primary-fg-color--dark: var(--bg-canvas);
  --md-accent-fg-color: var(--link);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--link) 18%, transparent);

  --md-typeset-a-color: var(--link);
  --md-code-fg-color: var(--text-primary);
  --md-code-bg-color: var(--bg-surface-2);
  --md-code-hl-color: var(--text-primary);
  --md-code-hl-background-color: var(--bg-elevated);
}

body,
.md-main {
  background: radial-gradient(
      80rem 32rem at 30% -10%,
      color-mix(in srgb, var(--bg-surface-2) 65%, transparent),
      transparent
    ),
    var(--bg-canvas);
  color: var(--text-primary);
}

.md-main__inner {
  margin-top: 1rem;
}

.md-header,
.md-tabs,
.md-footer {
  background-color: color-mix(in srgb, var(--bg-surface-1) 92%, transparent);
  border-bottom: 1px solid var(--border-default);
}

.md-header {
  backdrop-filter: blur(8px);
}

.md-tabs {
  border-top: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
}

.md-nav__title,
.md-nav__link,
.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--text-primary);
}

.md-typeset {
  line-height: 1.75;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  letter-spacing: -0.012em;
}

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

.md-typeset a:hover {
  color: var(--link-hover);
}

.md-nav__link {
  border-radius: var(--radius-sm);
  transition: color 0.16s ease, background-color 0.16s ease;
}

.md-nav__link:hover {
  background-color: color-mix(in srgb, var(--bg-elevated) 45%, transparent);
}

.md-nav--primary .md-nav__item .md-nav__link--active {
  font-weight: 600;
}

.md-sidebar,
.md-sidebar__scrollwrap,
.md-search-result {
  background-color: color-mix(in srgb, var(--bg-surface-1) 88%, transparent);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.md-search__form,
.md-search__input {
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.md-search__input::placeholder,
.md-search-result__meta,
.md-typeset .caption,
.md-typeset .footnote {
  color: var(--text-muted);
}

.md-search__form:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 0.16rem var(--focus-ring);
}

.md-typeset pre > code,
.md-typeset table:not([class]),
.md-typeset .admonition,
.md-typeset details,
.md-typeset .tabbed-content {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.md-typeset code {
  background-color: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 90%, transparent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.08rem 0.36rem;
}

.md-typeset pre > code {
  padding: 1rem;
}

.md-typeset table:not([class]) th {
  background-color: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}

.md-typeset table:not([class]) tr:nth-child(2n) {
  background-color: color-mix(in srgb, var(--bg-surface-2) 55%, transparent);
}

.md-typeset .admonition-title,
.md-typeset summary,
.md-typeset .tabbed-set > label {
  background-color: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  border-bottom: 1px solid var(--border-default);
}

.md-typeset .tabbed-set > label {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-secondary);
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.md-typeset .md-button,
.md-top {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: transform 0.12s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.md-typeset .md-button:hover,
.md-top:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.md-typeset .md-button--primary {
  background-color: var(--link);
  border-color: var(--link);
  color: #1a1a1a;
  font-weight: 600;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--link-hover);
  border-color: var(--link-hover);
}

.md-typeset .md-button[disabled],
.md-typeset .md-button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.md-typeset :is(a, button, summary, input, textarea, select):focus-visible,
.md-nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.18rem var(--focus-ring);
  border-radius: var(--radius-sm);
}

.md-typeset hr {
  border-color: var(--border-default);
}

/* App-first callout utility */
.app-first-callout {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--bg-surface-2) 75%, transparent),
    color-mix(in srgb, var(--bg-surface-1) 92%, transparent)
  );
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--link);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  margin: 1.1rem 0 1.5rem;
  padding: 1rem 1.1rem;
}

.app-first-callout h3 {
  margin: 0 0 0.45rem;
}

.app-first-callout p {
  margin: 0.25rem 0 0.65rem;
  color: var(--text-secondary);
}

.app-first-callout .app-first-link {
  color: var(--link);
  font-weight: 700;
  text-decoration: none;
}

.app-first-callout .app-first-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

@media (max-width: 960px) {
  .md-main__inner {
    margin-top: 0.6rem;
  }

  .md-sidebar,
  .md-sidebar__scrollwrap,
  .md-search-result {
    border-radius: var(--radius-sm);
  }

  .app-first-callout {
    margin: 0.85rem 0 1.25rem;
    padding: 0.9rem 0.95rem;
  }
}
