:root{
  --rh-bg: #ffffff;
  --rh-text: #0f172a;
  --rh-header-bg: #ffffff;
  --rh-footer-bg: #ffffff;
  --rh-sidebar-bg: #ffffff;
  --rh-accent: #0066ff;
  --rh-active-bg: rgba(0,102,255,0.08);
  --rh-muted: #6b7280;
  --rh-table-border: #e5e7eb;
  
  /* Search Variables */
  --rh-search-panel-bg: #ffffff;
  --rh-search-result-bg: rgba(0, 0, 0, 0.04);
  --rh-search-border-color: rgba(0, 0, 0, 0.1);
  --rh-search-title-color: #0f172a;
  --rh-search-title-hover: #0066cc;
  --rh-search-highlight-bg: rgba(255, 240, 0, 0.4);
  --rh-search-focus-ring: rgba(0, 102, 204, 0.2);
  --rh-search-scrollbar-bg: rgba(0, 0, 0, 0.05);
  --rh-search-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --rh-search-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
  
  /* Page Generator Variables */
  --pg-border-color: #e2e8f0;
  --pg-input-bg: #ffffff;
  --pg-text-color: #1e293b;
  --pg-muted-color: #64748b;
  --pg-primary-color: #0066ff;
  --pg-primary-hover: #0055d4;
  --pg-primary-color-alpha: rgba(0, 102, 255, 0.15);
  --pg-primary-color-light: rgba(0, 102, 255, 0.3);
  --pg-primary-color-ultra-light: rgba(0, 102, 255, 0.05);
  --pg-secondary-bg: #f1f5f9;
  --pg-secondary-text: #334155;
  --pg-secondary-hover: #e2e8f0;
  --pg-code-bg: #f8fafc;
  --pg-method-text: #ffffff;
  --pg-get-bg: #61affe;
  --pg-post-bg: #49cc90;
  --pg-put-bg: #fca130;
  --pg-delete-bg: #f93e3e;
  --pg-patch-bg: #50e3c2;
  --pg-tag-hover: #f1f5f9;
  --pg-danger-color: #e11d48;
  --pg-danger-bg-light: rgba(225, 29, 72, 0.1);
  --pg-table-header-bg: #f8fafc;
  --pg-table-hover-bg: #f1f5f9;
}

/* Tags HTTP */
.http-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 6px;
}
.http-tag--get { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.http-tag--post { background: #e8f7ee; color: #0f7a41; border: 1px solid #b6e3c6; }
.http-tag--path { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; }
.http-tag--put { background: #fff1e6; color: #b45309; border: 1px solid #f5cda8; }
.http-tag--delete { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

.theme-switch {
  cursor: pointer;
  background: none;
  margin: 0 4px;
  border: 1px solid rgba(0,0,0,0.08);
  color: #0f172a;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
    &:hover{
      background: rgba(0, 0, 0, 0.1);
      border-color: #666;
    }
}

.item-sidebar{
  cursor: pointer;
  &:hover{
    background: rgba(180, 210, 255, 0.15); /* cor do accent com mais opacidade */
  }
}

th, td {
  padding: 8px 12px;
  border: 0;
  color: #0f172a;
  text-align: left;
}

tr:not(:last-child) > th,
tr:not(:last-child) > td {
  border-bottom: 1px solid var(--rh-table-border);
}

tr > th:not(:last-child),
tr > td:not(:last-child) {
  border-right: 1px solid var(--rh-table-border);
}

thead th {
  background: #f3f6fa;
  font-weight: 600;
}

tbody tr:nth-child(odd) { background: #fff; }
tbody tr:nth-child(even) { background: #f8fafc; }

pre {
  background: #f3f6fa;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
}

code {
  background: #f3f6fa;
  padding: 3px;
  border-radius: 6px;
  overflow-x: auto;
}

hr {
  border: 1px solid #e5e7eb;
  margin: 24px 0;
}

input {
  border: 1px solid var(--pg-border-color);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--pg-text-color);
  background: var(--pg-input-bg);
  transition: border-color 0.2s ease;
  &:focus {
    outline: none;
    border-color: var(--pg-primary-color);
  }
}

select {
  border: 1px solid var(--pg-border-color);
  border-radius: 4px;
  font-size: 14px;
  color: var(--pg-text-color);
  background: var(--pg-input-bg);
  transition: border-color 0.2s ease;
  &:focus {
    outline: none;
    border-color: var(--pg-primary-color);
  }
}

textarea {
  border: 1px solid var(--pg-border-color);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--pg-text-color);
  background: var(--pg-input-bg);
  transition: border-color 0.2s ease;
  &:focus {
    outline: none;
    border-color: var(--pg-primary-color);
  }
}

button {
  border: 1px solid var(--pg-border-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #ffffff;
  background:  var(--pg-primary-color);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  &:focus {
    outline: none;
    border-color: var(--pg-primary-color);
  }
  &:hover {
    background: var(--pg-primary-hover);
  }
  &:active {
    background: var(--pg-primary-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}