/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;700&display=swap');

/* ── Homepage theme tokens ──────────────────────────────────────────────── */
:root {
  --h-bg:               #f0ede8;
  --h-text:             #0a0a0a;
  --h-text-strong:      rgba(10, 10, 10, 0.82);
  --h-text-dim:         rgba(10, 10, 10, 0.36);
  --h-text-mid:         rgba(10, 10, 10, 0.54);
  --h-border:           rgba(10, 10, 10, 0.16);
  --h-border-faint:     rgba(10, 10, 10, 0.08);
  --h-feat-bg:          #e8e5de;
  --h-tab-active:       #0a0a0a;
  --h-dirty-texture:    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Eye */
  --h-eye-bg:           #0a0a0a;
  --h-eye-glow:         rgba(10, 10, 10, 0.28);
  --h-eye-glow-outer:   rgba(10, 10, 10, 0.1);

  /* Card hover (inverted) */
  --h-hover-bg:         #0a0a0a;
  --h-hover-text:       #f0ede8;
  --h-hover-muted:      rgba(240, 237, 232, 0.48);
}

[data-theme='dark'] {
  --h-bg:               #000;
  --h-text:             #f0ede8;
  --h-text-strong:      rgba(240, 237, 232, 0.82);
  --h-text-dim:         rgba(240, 237, 232, 0.36);
  --h-text-mid:         rgba(240, 237, 232, 0.52);
  --h-border:           rgba(240, 237, 232, 0.16);
  --h-border-faint:     rgba(240, 237, 232, 0.08);
  --h-feat-bg:          #080808;
  --h-tab-active:       #f0ede8;

  --h-eye-bg:           #f0ede8;
  --h-eye-glow:         rgba(240, 237, 232, 0.55);
  --h-eye-glow-outer:   rgba(240, 237, 232, 0.15);

  --h-hover-bg:         #b8b8b2;
  --h-hover-text:       #000;
  --h-hover-muted:      rgba(0, 0, 0, 0.62);
}

/* Neo-Brutalist Theme Overrides */
:root {
  /* Suzent Brand Colors */
  --suzent-green: #A8E6A3;
  --suzent-yellow: #ffffff;
  --suzent-yellow-strong: #e0b800;
  --suzent-yellow-soft: #ffffff;
  --suzent-red: #FF0000;
  --suzent-black: #000000;
  --suzent-white: #FFFFFF;
  --suzent-gray: #f8f8f5;
  --suzent-code-bg: #f5f5f5;
  --suzent-code-fg: #1a1a1a;
  --suzent-border-light: #000000;
  --suzent-dark-1: #18181b;
  --suzent-dark-2: #27272a;
  --suzent-dark-3: #3f3f46;
  --suzent-dark-border: #a3a3a3;
  --suzent-dark-text: #f5f5f5;

  /* Docusaurus Primary Color Overrides (ink-like dark text) */
  --ifm-color-primary: #1f2937;
  --ifm-color-primary-dark: #111827;
  --ifm-color-primary-darker: #0f172a;
  --ifm-color-primary-darkest: #000000;
  --ifm-color-primary-light: #374151;
  --ifm-color-primary-lighter: #4b5563;
  --ifm-color-primary-lightest: #6b7280;

  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

  /* Navbar */
  --ifm-navbar-background-color: #ffffff;
  --ifm-navbar-shadow: 4px 4px 0px var(--suzent-black);

  /* Layout */
  --ifm-background-color: #ffffff;
  --ifm-footer-background-color: #e8e5de;
  --ifm-background-surface-color: var(--suzent-white);
  --ifm-font-family-base: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ifm-heading-font-family: 'Arial Black', 'Space Grotesk', sans-serif;

  /* Code (light mode) */
  --ifm-code-background: var(--suzent-code-bg);
  --ifm-code-color: var(--suzent-code-fg);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #d4d4d8;
  --ifm-color-primary-dark: #c4c4c9;
  --ifm-color-primary-darker: #b8b8be;
  --ifm-color-primary-darkest: #9a9aa2;
  --ifm-color-primary-light: #dfdfe3;
  --ifm-color-primary-lighter: #e7e7ea;
  --ifm-color-primary-lightest: #f1f1f3;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);

  --suzent-gray: #000000;
  --ifm-background-color: var(--suzent-dark-1);
  --ifm-background-surface-color: var(--suzent-dark-2);
  --ifm-navbar-background-color: var(--suzent-dark-2);
  --ifm-footer-background-color: #080808;
  --ifm-navbar-shadow: 4px 4px 0px #000000;
}

/* Neo-Brutalist Components */

/* Hide global navbar on homepage — homepage renders its own */
html.homepage-mode .navbar {
  display: none !important;
}

/* Navbar */
.navbar {
  border-bottom: 3px solid var(--suzent-black);
}

.navbar__title,
.navbar__brand,
.navbar__link,
.navbar__toggle {
  color: var(--suzent-black);
}

[data-theme='light'] .navbar {
  background-color: #ffffff;
}

/* Buttons */
.button {
  border: 3px solid var(--suzent-black);
  box-shadow: 4px 4px 0px var(--suzent-black);
  border-radius: 0;
  font-weight: bold;
  transition: all 0.15s ease-out;
}

.button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0px var(--suzent-black);
}

.button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--suzent-black);
}

.button--white {
  background-color: var(--suzent-white) !important;
  color: var(--suzent-black) !important;
}

/* Use yellow as accent background in docs nav, not global font color */
.menu__link--active {
  background-color: var(--suzent-yellow-soft);
  color: var(--suzent-black) !important;
  border: none;
}

.menu__link--active:not(.menu__link--sublist) {
  border: 2px solid var(--suzent-black);
}

.navbar__link--active {
  color: var(--suzent-black) !important;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.breadcrumbs__item--active .breadcrumbs__link {
  background-color: var(--suzent-yellow-soft);
  color: var(--suzent-black);
  border: 2px solid var(--suzent-black);
}

.theme-doc-markdown a:not(.button) {
  color: #1f2937;
  text-decoration-color: #1f2937;
}

.theme-doc-markdown a:not(.button):hover {
  color: #000000;
  background: var(--suzent-yellow-soft);
}

/* Cards */
.card {
  border: 3px solid var(--suzent-black);
  box-shadow: 6px 6px 0px var(--suzent-black);
  border-radius: 0;
  background-color: var(--suzent-white);
}

/* Code blocks (light mode) align with desktop app */
[data-theme='light'] pre[class*='language-'],
[data-theme='light'] .theme-code-block,
[data-theme='light'] .theme-code-block pre {
  background: var(--suzent-code-bg) !important;
  color: var(--suzent-code-fg);
  border: 2px solid var(--suzent-black);
  box-shadow: 4px 4px 0px var(--suzent-black);
}

[data-theme='light'] code {
  background: var(--suzent-code-bg);
  color: var(--suzent-code-fg);
}

[data-theme='dark'] .card {
  background-color: var(--suzent-dark-2);
  border-color: var(--suzent-dark-border);
  box-shadow: 6px 6px 0px #000000;
}

/* Animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

.robot-animation {
  height: 200px;
  width: auto;
  animation: float 4s ease-in-out infinite;
  margin: 2rem 0;
  filter: drop-shadow(4px 4px 0px var(--suzent-black));
}

[data-theme='dark'] .robot-animation {
  filter: drop-shadow(4px 4px 0px #ffffff);
}

[data-theme='dark'] .navbar {
  border-bottom: 3px solid var(--suzent-dark-border);
}

[data-theme='dark'] .navbar__title,
[data-theme='dark'] .navbar__brand,
[data-theme='dark'] .navbar__link,
[data-theme='dark'] .navbar__toggle {
  color: var(--suzent-dark-text);
}

[data-theme='dark'] .navbar__link--active {
  color: var(--suzent-dark-text) !important;
  text-decoration-color: var(--suzent-yellow);
}

[data-theme='dark'] .button {
  border-color: var(--suzent-dark-border);
  box-shadow: 4px 4px 0px #000000;
}

[data-theme='dark'] .button--white {
  background-color: #f3f4f6 !important;
  color: #000000 !important;
}

[data-theme='dark'] .theme-doc-markdown a:not(.button) {
  color: #f3f4f6;
  text-decoration-color: #f3f4f6;
}

[data-theme='dark'] .theme-doc-markdown a:not(.button):hover {
  color: #ffffff;
  background: var(--suzent-dark-3);
}

/* Systematic docs dark-theme surface alignment */
[data-theme='dark'] body,
[data-theme='dark'] .main-wrapper {
  background: var(--suzent-dark-1);
  color: var(--suzent-dark-text);
}

[data-theme='dark'] .theme-doc-sidebar-container,
[data-theme='dark'] .menu,
[data-theme='dark'] .table-of-contents {
  background: var(--suzent-dark-1);
}

[data-theme='dark'] .theme-doc-sidebar-container {
  border-right: 1px solid var(--suzent-dark-3);
}

[data-theme='dark'] .menu__link {
  color: var(--suzent-dark-text);
  border-radius: 0;
}

[data-theme='dark'] .menu__list-item-collapsible,
[data-theme='dark'] .menu__list-item-collapsible .menu__link,
[data-theme='dark'] .menu__caret,
[data-theme='dark'] .menu__caret::before {
  color: var(--suzent-dark-text) !important;
}

[data-theme='dark'] .menu__list-item-collapsible {
  background: var(--suzent-dark-2);
  border: 1px solid var(--suzent-dark-3);
}

[data-theme='dark'] .menu__link:hover {
  background: var(--suzent-dark-3);
}

[data-theme='dark'] .menu__link--active {
  background: var(--suzent-yellow-soft);
  color: #000000 !important;
  border: none;
}

[data-theme='dark'] .menu__link--active:not(.menu__link--sublist) {
  border: 2px solid #000000;
}

[data-theme='dark'] .breadcrumbs__item--active .breadcrumbs__link {
  background: var(--suzent-yellow-soft);
  color: #000000;
  border: 2px solid #000000;
}

[data-theme='dark'] .table-of-contents__link {
  color: #e4e4e7;
}

[data-theme='dark'] .table-of-contents__link:hover {
  color: #ffffff;
}

[data-theme='dark'] .table-of-contents__link--active {
  color: #ffffff;
  background: var(--suzent-dark-3);
  padding: 0.2rem 0.45rem;
  border-left: 3px solid var(--suzent-yellow);
}

[data-theme='dark'] table {
  background: var(--suzent-dark-2);
}

[data-theme='dark'] table th,
[data-theme='dark'] table td {
  border-color: var(--suzent-dark-3);
}

[data-theme='dark'] :not(pre)>code {
  background: var(--suzent-dark-3);
  color: #f8fafc;
  border: 1px solid var(--suzent-dark-border);
}

[data-theme='dark'] pre[class*='language-'],
[data-theme='dark'] .theme-code-block,
[data-theme='dark'] .theme-code-block pre {
  background: #111111 !important;
  border: 1px solid var(--suzent-dark-border);
}
