/* Charm-inspired Swagger UI theme (Solenya) */

@import url("https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");

:root {
  /* Core Charm tokens (from services/charm/packages/atomic/src/styles/charm.css) */
  --charm-pink: hsl(308 57% 86%);
  --charm-white: hsl(90 9% 96%);
  --charm-purple: hsl(270 90% 45%);
  --charm-green: hsl(64 61% 51%);
  --charm-black: hsl(60 10% 4%);
  --charm-tan: hsl(55 43% 93%);
  --charm-brown: hsl(48 36% 89%);
  --charm-blue: hsl(198 100% 33%);

  --charm-bg: var(--charm-brown);
  --charm-fg: var(--charm-black);
  --charm-card: var(--charm-tan);
  --charm-primary: var(--charm-blue);
  --charm-accent: var(--charm-black);

  --charm-border: 2px solid var(--charm-fg);
  --charm-shadow: 6px 6px 0 0 var(--charm-fg);
  --charm-shadow-hover: 8px 8px 0 0 var(--charm-fg);
}

html,
body {
  background: var(--charm-bg) !important;
  color: var(--charm-fg) !important;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif !important;
}

/* Top header */
.swagger-ui .topbar {
  background: var(--charm-card) !important;
  border-bottom: var(--charm-border);
}
.swagger-ui .topbar .download-url-wrapper input[type="text"] {
  border: var(--charm-border) !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 0 var(--charm-fg) !important;
}

/* Base typography */
.swagger-ui,
.swagger-ui .info .title,
.swagger-ui .info .base-url,
.swagger-ui .scheme-container,
.swagger-ui .opblock-tag,
.swagger-ui .opblock-summary {
  color: var(--charm-fg) !important;
  font-family: inherit !important;
}

/* Main containers */
.swagger-ui .scheme-container {
  background: transparent !important;
  box-shadow: none !important;
}
.swagger-ui .wrapper {
  padding-bottom: 48px;
}

/* Brutalist cards for endpoint blocks */
.swagger-ui .opblock {
  background: var(--charm-card) !important;
  border: var(--charm-border) !important;
  box-shadow: var(--charm-shadow) !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
}
.swagger-ui .opblock:hover {
  box-shadow: var(--charm-shadow-hover) !important;
  transform: translate(-2px, -2px);
}

/* Endpoint header rows */
.swagger-ui .opblock .opblock-summary {
  border-bottom: var(--charm-border) !important;
}
.swagger-ui .opblock .opblock-summary-method {
  background: var(--charm-primary) !important;
  color: var(--charm-white) !important;
  border-right: var(--charm-border) !important;
  border-radius: 10px !important;
}
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-description {
  color: var(--charm-fg) !important;
}

/* Make the section tags match cards */
.swagger-ui .opblock-tag {
  background: var(--charm-card) !important;
  border: var(--charm-border) !important;
  box-shadow: 4px 4px 0 0 var(--charm-fg) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

/* Buttons */
.swagger-ui .btn {
  border: var(--charm-border) !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 var(--charm-fg) !important;
  background: var(--charm-card) !important;
  color: var(--charm-fg) !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.swagger-ui .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--charm-fg) !important;
}
.swagger-ui .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--charm-fg) !important;
}
.swagger-ui .btn.execute {
  background: var(--charm-primary) !important;
  color: var(--charm-white) !important;
}

/* Inputs */
.swagger-ui input[type="text"],
.swagger-ui input[type="password"],
.swagger-ui input[type="search"],
.swagger-ui textarea,
.swagger-ui select {
  border: var(--charm-border) !important;
  border-radius: 12px !important;
  background: var(--charm-white) !important;
  color: var(--charm-fg) !important;
}

/* Some browsers render <option> with UA colors unless explicitly set. */
.swagger-ui select option {
  color: var(--charm-fg) !important;
}

/* Ensure dropdown "selected value" doesn't inherit Swagger defaults. */
.swagger-ui select,
.swagger-ui select:focus,
.swagger-ui select:focus-visible {
  color: var(--charm-fg) !important;
}

/* Tables & models */
.swagger-ui table thead tr th,
.swagger-ui table tbody tr td {
  border-bottom: 1px solid color-mix(in srgb, var(--charm-fg) 40%, transparent) !important;
}
.swagger-ui section.models {
  border: var(--charm-border) !important;
  background: var(--charm-card) !important;
  border-radius: 14px !important;
  box-shadow: 6px 6px 0 0 var(--charm-fg) !important;
}

/* Links */
.swagger-ui a {
  color: var(--charm-accent) !important;
}

.swagger-ui a:hover,
.swagger-ui a:focus-visible {
  color: color-mix(in srgb, var(--charm-accent) 85%, white) !important;
}

/* Markdown descriptions (Swagger uses .renderedMarkdown in opblocks). */
.swagger-ui .opblock-description-wrapper,
.swagger-ui .opblock-description-wrapper *,
.swagger-ui .renderedMarkdown,
.swagger-ui .renderedMarkdown * {
  color: var(--charm-fg) !important;
}

.swagger-ui .renderedMarkdown code,
.swagger-ui .opblock-description-wrapper code {
  color: var(--charm-fg) !important;
  background: color-mix(in srgb, var(--charm-card) 70%, white) !important;
  border: 1px solid color-mix(in srgb, var(--charm-fg) 20%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .swagger-ui .opblock,
  .swagger-ui .opblock:hover,
  .swagger-ui .btn,
  .swagger-ui .btn:hover,
  .swagger-ui .btn:active {
    transition: none !important;
    transform: none !important;
    box-shadow: var(--charm-shadow) !important;
  }
}