/* =============================================
   Tajiri Vision API - Custom Styles
   Typography: Inter + JetBrains Mono
   Brand: #00a651 (primary), #1b5e3a (dark)
   ============================================= */

/* ===== BRAND COLORS (Zensical requires :root > *) ===== */
:root > * {
  --md-primary-fg-color: #00a651;
  --md-primary-fg-color--light: #33b873;
  --md-primary-fg-color--dark: #008c45;
  --md-accent-fg-color: #1b5e3a;
  --md-accent-fg-color--transparent: rgba(27, 94, 58, 0.1);

  /* Custom Tajiri colors */
  --tajiri-green: #00a651;
  --tajiri-green-light: #33b873;
  --tajiri-green-dark: #1b5e3a;
  --tajiri-green-bg: rgba(0, 166, 81, 0.05);
  --tajiri-code-bg: rgba(0, 166, 81, 0.04);
}

/* ===== DARK MODE ===== */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #33b873;
  --md-primary-fg-color--light: #4dd68e;
  --md-primary-fg-color--dark: #00a651;
  --md-accent-fg-color: #4dd68e;

  --tajiri-green: #33b873;
  --tajiri-green-light: #4dd68e;
  --tajiri-green-dark: #00a651;
  --tajiri-green-bg: rgba(51, 184, 115, 0.08);
  --tajiri-code-bg: rgba(51, 184, 115, 0.06);

  /* Better contrast for dark mode */
  --md-default-fg-color: rgba(255, 255, 255, 0.87);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.54);
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #4dd68e;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #33b873;
}

/* Dark mode code blocks */
[data-md-color-scheme="slate"] .highlight {
  background: rgba(51, 184, 115, 0.06);
}

[data-md-color-scheme="slate"] .highlight code {
  background: transparent;
}

/* ===== ANNOUNCEMENT BAR ===== */
.md-banner {
  background-color: #1b5e3a;
  color: white;
}

.md-banner a {
  color: #90EE90;
}

.md-banner a:hover {
  color: white;
}

.beta-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* ===== HEADER ===== */
.md-header__button.md-logo img {
  height: 32px;
  width: auto;
}

/* ===== CODE BLOCKS ===== */
.md-typeset .highlight {
  background: var(--tajiri-code-bg);
  border-radius: 8px;
  overflow: hidden;
}

.md-typeset .highlight pre {
  background: transparent;
  margin: 0;
}

.md-typeset .highlight code {
  background: transparent;
  font-size: 0.85em;
}

/* Inline code */
.md-typeset code:not(.highlight code) {
  background: var(--tajiri-code-bg);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.875em;
}

/* Code copy button */
.md-typeset .md-clipboard {
  color: var(--tajiri-green);
}

.md-typeset .md-clipboard:hover {
  color: var(--tajiri-green-dark);
}

/* ===== STATUS BADGES ===== */
.badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.badge-required {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: white;
}

.badge-optional {
  background: linear-gradient(135deg, #6c757d, #5a6268);
  color: white;
}

.badge-new {
  background: linear-gradient(135deg, #00a651, #008c45);
  color: white;
}

.badge-beta {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
}

.badge-deprecated {
  background: linear-gradient(135deg, #856404, #6d5302);
  color: white;
}

.badge-breaking {
  background: linear-gradient(135deg, #dc3545, #9a1f2d);
  color: white;
}

/* Usage in markdown:
   `field_name`{ .badge .badge-required }
   `field_name`{ .badge .badge-new }
*/

/* ===== ADMONITIONS ===== */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--tajiri-green);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: var(--tajiri-green-bg);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--tajiri-green);
}

.md-typeset .admonition.success,
.md-typeset details.success {
  border-color: var(--tajiri-green);
}

/* ===== TABLES ===== */
.md-typeset table:not([class]) th {
  background-color: var(--tajiri-green-bg);
  font-weight: 600;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ===== LINKS ===== */
.md-typeset a {
  color: var(--tajiri-green);
}

.md-typeset a:hover {
  color: var(--tajiri-green-dark);
}

/* ===== NAVIGATION ===== */
.md-tabs__link--active {
  color: var(--tajiri-green) !important;
}

.md-nav__link--active {
  color: var(--tajiri-green) !important;
  font-weight: 600;
}

/* ===== FOOTER ===== */
.md-footer {
  background-color: #1b5e3a;
}

.md-footer-meta {
  background-color: #143d29;
}

.md-footer__link {
  color: rgba(255, 255, 255, 0.7);
}

.md-footer__link:hover {
  color: white;
}

.md-social__link {
  color: rgba(255, 255, 255, 0.7);
}

.md-social__link:hover {
  color: white;
}

.md-copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

/* ===== HERO SECTION ===== */
.hero {
  padding: 3rem 0;
  text-align: center;
  background: linear-gradient(180deg, var(--tajiri-green-bg) 0%, transparent 100%);
  border-radius: 16px;
  margin-bottom: 2rem;
}

.hero img {
  max-width: 100px;
  margin-bottom: 1rem;
}

.hero h2 {
  color: var(--tajiri-green-dark);
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0;
  letter-spacing: -0.02em;
}

.hero p {
  font-size: 1.1rem;
  color: #666;
  margin: 0.5rem 0;
}

[data-md-color-scheme="slate"] .hero p {
  color: rgba(255, 255, 255, 0.7);
}

.hero strong {
  color: var(--tajiri-green);
}

/* ===== BUTTONS ===== */
.md-typeset .md-button {
  border-radius: 8px;
  font-weight: 600;
}

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

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

.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--tajiri-green);
  color: var(--tajiri-green);
}

.md-typeset .md-button:not(.md-button--primary):hover {
  background-color: var(--tajiri-green-bg);
}

/* ===== GRID CARDS ===== */
.md-typeset .grid.cards > ul > li {
  border: 1px solid rgba(0, 166, 81, 0.2);
  border-radius: 12px;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--tajiri-green);
}

/* ===== MERMAID DIAGRAMS ===== */
.mermaid {
  background: transparent !important;
}

/* ===== FEATURE GRID ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.feature-card {
  padding: 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tajiri-green-bg), rgba(27, 94, 58, 0.05));
  border: 1px solid rgba(0, 166, 81, 0.2);
}

.feature-card:hover {
  border-color: var(--tajiri-green);
}

.feature-card h3 {
  color: var(--tajiri-green-dark);
  margin-top: 0;
}

/* ===== SEARCH ===== */
.md-search__form {
  border-radius: 8px;
}

/* ===== TOC ===== */
.md-nav__link--passed {
  color: var(--tajiri-green);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero h2 {
    font-size: 1.5rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .beta-badge {
    display: block;
    margin: 0 auto 0.5rem auto;
    width: fit-content;
  }

  .badge {
    display: block;
    margin: 0.25rem 0;
    width: fit-content;
  }
}