/* Custom styles for Kawai DeAI Network documentation */

:root {
  /* KAWAI Brand Colors matching index.html */
  --kawai-red: #FF385C;
  --kawai-red-light: #FF6B88;
  --kawai-red-dark: #D81A44;
  --kawai-blue: #0066FF;
  --kawai-blue-light: #339DFF;

  /* MkDocs Material Variables Initialization */
  --md-primary-fg-color: var(--kawai-red);
  --md-primary-fg-color--light: var(--kawai-red-light);
  --md-primary-fg-color--dark: var(--kawai-red-dark);
  --md-accent-fg-color: var(--kawai-blue);
}

/* ---------------------------------------------------------
   LIGHT MODE (Default)
   --------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-default-fg-color: #374151;
  /* Gray-700 for better contrast */
  --md-default-fg-color--light: #6b7280;
  /* Gray-500 */
}

/* ---------------------------------------------------------
   DARK MODE (Slate)
   --------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  /* Site background matches main website */
  --md-default-bg-color: #111827;
  --md-default-fg-color: #f3f4f6;
  /* Gray-100 */
  --md-default-fg-color--light: #9ca3af;
  /* Gray-400 */

  /* Overriding accent for links in dark mode for accessibility */
  --md-accent-fg-color: var(--kawai-blue-light);
  --md-typeset-a-color: var(--kawai-blue-light);
}

/* ---------------------------------------------------------
   HEADER & NAVIGATION DESIGN
   --------------------------------------------------------- */

/* Header Background - Red for Light, Dark for Dark mode */
.md-header {
  background-color: var(--kawai-red) !important;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #111827 !important;
  border-bottom: 1px solid #1f2937;
}

/* Header Text/Icons Visibility - FIX: ONLY TARGET HEADER ELEMENTS */
.md-header .md-header__button,
.md-header .md-header__title,
.md-header .md-nav__link,
.md-tabs .md-tabs__link {
  color: white !important;
  opacity: 1;
}

.md-tabs .md-tabs__link--active {
  font-weight: 700;
  border-bottom: 2px solid white;
}

/* ---------------------------------------------------------
   SIDEBARS (FIX FOR INVISIBLE TEXT)
   --------------------------------------------------------- */

/* Ensure sidebar links are NOT white in light mode */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__link,
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link {
  color: #374151 !important;
  /* Force darker color for visibility */
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__link:hover,
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link:hover {
  color: var(--kawai-red) !important;
}

/* Active links in sidebars */
.md-nav__link--active {
  color: var(--kawai-red) !important;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--kawai-red-light) !important;
}

/* Secondary (TOC) link colors fix */
.md-nav--secondary .md-nav__link {
  font-size: 0.75rem;
}

/* ---------------------------------------------------------
   CONTENT STYLES
   --------------------------------------------------------- */

/* Typography */
body {
  font-family: "Inter", sans-serif;
}

/* Links inside content */
.md-typeset a {
  transition: color 0.2s, border-color 0.2s;
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--kawai-blue-light);
}

[data-md-color-scheme="default"] .md-typeset a {
  color: var(--kawai-red);
}

/* Code block enhancements */
.md-typeset pre>code {
  font-size: 0.85em;
  font-family: var(--md-code-font);
}

/* Grid Cards */
.grid.cards>* {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

.grid.cards>*:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Primary Button Design */
.md-button--primary {
  background-color: var(--kawai-red) !important;
  border-color: var(--kawai-red) !important;
  color: white !important;
  border-radius: 0.5rem;
  font-weight: 600;
}

.md-button--primary:hover {
  background-color: var(--kawai-red-dark) !important;
  border-color: var(--kawai-red-dark) !important;
}

/* Logo Animation */
.md-header__button.md-logo img {
  animation: pulse-slow 3s infinite;
}

@keyframes pulse-slow {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .7;
  }
}