/* FluentGym Notion-style Theme Overrides (Matched with MarkdownArticle) */

:root {
  /* Layout */
  --content-max-width: 896px; /* max-w-4xl (measure="wide") */

  /* Typography */
  --font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-family-monospace: ui-monospace, 'SF Mono', Consolas, monospace;
  
  /* Light Theme (Notion-style slate) */
  --fg-bg: #f8fafc; /* slate-50 */
  --fg-card: #ffffff;
  --fg-text: #0f172a; /* slate-900 (100% opacity for headings/strong) */
  --fg-text-body: rgba(15, 23, 42, 0.8); /* text-foreground/80 for main text */
  --fg-text-muted: #64748b; /* slate-500 */
  --fg-heading: #334155; /* slate-700 (мягкий темно-серый для главных заголовков) */
  --fg-border: #e2e8f0; /* slate-200 */
  --fg-primary: #4674fe;
  --fg-primary-hover: #4478f0;
  --fg-secondary: #f1f5f9; /* slate-100 */
  --fg-secondary-hover: #e2e8f0;
  
  /* mdbook variable overrides (Light) */
  --bg: var(--fg-card);
  --fg: var(--fg-text-body);
  --sidebar-bg: var(--fg-bg);
  --sidebar-fg: var(--fg-text-muted);
  --sidebar-active: var(--fg-text);
  --sidebar-non-existant: #94a3b8;
  --scrollbar: var(--fg-border);
  --icons: var(--fg-text-muted);
  --icons-hover: var(--fg-text);
  --links: var(--fg-primary);
  --inline-code-color: var(--fg-text);
  --inline-code-bg: var(--fg-secondary);
  --theme-popup-bg: var(--fg-card);
  --theme-popup-border: var(--fg-border);
  --theme-hover: var(--fg-secondary);
  --quote-bg: var(--fg-secondary);
  --quote-border: transparent;
  --table-border-color: var(--fg-border);
  --table-header-bg: var(--fg-secondary);
  --table-alternate-bg: transparent;
  --searchbar-border-color: var(--fg-border);
  --searchbar-bg: var(--fg-card);
  --searchbar-fg: var(--fg-text);
  --searchresults-header-fg: var(--fg-text);
  --searchresults-border-color: var(--fg-border);
  --searchresults-li-bg: var(--fg-secondary);
}

/* Dark Theme Overrides */
:root.dark, :root.navy, :root.coal, :root.ayu {
  --content-max-width: 896px;

  --fg-bg: #0f172a; /* slate-900 */
  --fg-card: #1e293b; /* slate-800 */
  --fg-text: #f8fafc; /* slate-50 (100% opacity) */
  --fg-text-body: rgba(248, 250, 252, 0.8); /* text-foreground/80 */
  --fg-text-muted: #94a3b8; /* slate-400 */
  --fg-heading: #cbd5e1; /* slate-300 (мягкий светло-серый для главных заголовков) */
  --fg-border: #334155; /* slate-700 */
  --fg-primary: #4674fe;
  --fg-secondary: #334155; /* slate-700 */
  --fg-secondary-hover: #475569; /* slate-600 */

  --bg: var(--fg-card);
  --fg: var(--fg-text-body);
  --sidebar-bg: var(--fg-bg);
  --sidebar-fg: var(--fg-text-muted);
  --sidebar-active: var(--fg-text);
  --sidebar-non-existant: #64748b;
  --scrollbar: var(--fg-border);
  --icons: var(--fg-text-muted);
  --icons-hover: var(--fg-text);
  --links: var(--fg-primary);
  --inline-code-color: var(--fg-text);
  --inline-code-bg: var(--fg-secondary);
  --theme-popup-bg: var(--fg-card);
  --theme-popup-border: var(--fg-border);
  --theme-hover: var(--fg-secondary);
  --quote-bg: var(--fg-secondary);
  --quote-border: transparent;
  --table-border-color: var(--fg-border);
  --table-header-bg: var(--fg-secondary);
  --table-alternate-bg: transparent;
  --searchbar-border-color: var(--fg-border);
  --searchbar-bg: var(--fg-bg);
  --searchbar-fg: var(--fg-text);
  --searchresults-header-fg: var(--fg-text);
  --searchresults-border-color: var(--fg-border);
  --searchresults-li-bg: var(--fg-secondary);
}

/* Global Typography (prose-base) */
body {
  font-family: var(--font-family);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.75; /* leading-7 */
  color: var(--fg);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  color: var(--fg-text); /* 100% opacity */
}

h1 { 
  font-size: 2.25rem; /* text-4xl */
  font-weight: 600; /* font-semibold (менее жирный) */
  color: var(--fg-heading); /* Приглушенный серый цвет */
  letter-spacing: -0.025em; /* tracking-tight */
  margin-top: 0; 
  margin-bottom: 1.5rem; /* mb-6 */
}

h2 { 
  font-size: 1.875rem; /* text-3xl */
  font-weight: 600; /* font-semibold */
  margin-top: 3rem; /* mt-12 */
  margin-bottom: 1rem; /* mb-4 */
}

h3 { 
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  margin-top: 2.5rem; /* mt-10 */
  margin-bottom: 0.75rem; /* mb-3 */
}

/* Strong text */
strong, b {
  color: var(--fg-text); /* 100% opacity */
  font-weight: 600;
}

/* Links */
.content main a {
  color: var(--links);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.content main a:hover {
  color: var(--fg-primary-hover);
}

/* Vertical Rhythm (doc mode) */
p, ul, ol {
  margin-top: 1rem; /* my-4 */
  margin-bottom: 1rem; /* my-4 */
}

li {
  margin-top: 0.375rem; /* my-1.5 */
  margin-bottom: 0.375rem; /* my-1.5 */
}

blockquote, pre, table {
  margin-top: 1.5rem; /* my-6 */
  margin-bottom: 1.5rem; /* my-6 */
}

hr {
  margin-top: 2rem; /* my-8 */
  margin-bottom: 2rem; /* my-8 */
  border: none;
  border-top: 1px solid var(--fg-border);
}

/* Sidebar (Compact Notion-style) */
.sidebar {
  border-right: 1px solid var(--fg-border);
  font-size: 14px; /* Уменьшенный шрифт для плотности */
}
.sidebar-scrollbox {
  padding: 10px; /* Уменьшенные отступы контейнера */
}
.sidebar a {
  border-radius: 4px;
  padding: 4px 10px; /* Компактные отступы ссылок */
  transition: background-color 0.2s ease, color 0.2s ease;
  line-height: 1.4;
}
.sidebar a:hover {
  background-color: var(--fg-secondary);
  color: var(--fg-text);
}
.sidebar .active {
  background-color: var(--fg-secondary);
  color: var(--fg-text);
  font-weight: 500;
}

/* Content Area Padding & Width */
.content main {
  max-width: var(--content-max-width) !important;
  padding: 32px 16px;
}

/* Blockquotes (Notion-style examples) */
blockquote {
  padding: 1rem 1.25rem;
  background-color: var(--quote-bg);
  border-radius: 0.75rem;
  border-left: none;
  color: var(--fg);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
blockquote p {
  margin: 0;
}
blockquote p + p {
  margin-top: 0.75rem;
}

/* Inline Code */
code {
  font-family: var(--font-family-monospace);
  font-size: 0.9em; /* prose-code:text-[0.9em] */
  background-color: var(--inline-code-bg);
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  color: var(--inline-code-color);
}

/* Code Blocks */
pre {
  background-color: var(--fg-secondary);
  border: 1px solid var(--fg-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow-x: auto;
}
pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: 0.9em;
}

/* Top Menu Bar */
.menu-bar {
  border-bottom: 1px solid var(--fg-border);
  background-color: var(--bg);
}
.icon-button {
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.icon-button:hover {
  background-color: var(--fg-secondary);
}

/* Menu Title with Logo */
.menu-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 15px !important; /* Переопределяем огромный размер h1 */
  font-weight: 500 !important;
  color: var(--fg-text-muted) !important; /* Приглушенный цвет текста */
}
.header-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit !important; /* Наследуем приглушенный цвет от menu-title */
  transition: color 0.2s ease;
}
.header-logo-link:hover {
  color: var(--fg-text) !important; /* Ярче при наведении */
}
.header-logo-link img {
  height: 18px; /* Уменьшенный логотип */
  width: auto;
  transition: opacity 0.2s ease;
}
.header-logo-link:hover img {
  opacity: 0.85;
}

/* Theme toggling for logos */
.logo-dark { display: none; }
.logo-light { display: block; }

html.dark .logo-light,
html.navy .logo-light,
html.coal .logo-light,
html.ayu .logo-light {
  display: none;
}

html.dark .logo-dark,
html.navy .logo-dark,
html.coal .logo-dark,
html.ayu .logo-dark {
  display: block;
}

/* Right Buttons Container */
.right-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
}

/* Header Ghost Button */
.header-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: transparent;
  color: var(--fg-text) !important;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 12px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.header-ghost-btn:hover {
  background-color: var(--fg-secondary);
}