@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sorts-mill-goudy-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sorts-mill-goudy-italic.woff2') format('woff2');
}

:root[data-theme="light"] {
  --ruby-primary: #453f87;
  --ruby-primary-light: #efedff;
  --ruby-primary-dark: #2d2960;
  --ruby-accent: #6b63b5;
  --ruby-accent-light: #e8e4ff;

  --ruby-text: #353535;
  --ruby-background: #fefef3;
  --ruby-border: #d5c3ff;

  --bg-color: var(--ruby-background);
  --text-color: var(--ruby-text);
  --text-heading: var(--ruby-primary);
  --text-muted: #6b6b6b;

  --sidebar-bg: #fefef3;
  --sidebar-text: #353535;
  --sidebar-link-active-bg: #f5f0ff;
  --sidebar-link-active-text: var(--ruby-primary);
  --sidebar-border: #d5c3ff;

  --link-color: var(--ruby-primary);
  --border-color: var(--ruby-border);

  --header-bg: var(--ruby-background);
  --header-border: var(--ruby-border);

  --code-bg: #fff9e6;
  --code-text: var(--ruby-primary-dark);

  --font-family-sans: 'Sorts Mill Goudy', Georgia, serif;
}

:root[data-theme="dark"] {
  --ruby-primary: #c8c3f5;
  --ruby-primary-light: #1e1a2e;
  --ruby-primary-dark: #e2ddf5;
  --ruby-accent: #a89ee8;
  --ruby-accent-light: #2a2540;

  --ruby-text: #e8e5d5;
  --ruby-background: #0f0d1a;
  --ruby-border: #3a3060;

  --bg-color: var(--ruby-background);
  --text-color: var(--ruby-text);
  --text-heading: var(--ruby-primary);
  --text-muted: #a8a29e;

  --sidebar-bg: #0f0d1a;
  --sidebar-text: #c0bce0;
  --sidebar-link-active-bg: #1e1a2e;
  --sidebar-link-active-text: var(--ruby-primary);
  --sidebar-border: #2e2850;

  --link-color: var(--ruby-primary);
  --border-color: var(--ruby-border);

  --header-bg: var(--ruby-background);
  --header-border: var(--ruby-border);

  --code-bg: #1a1508;
  --code-text: var(--ruby-text);

  --font-family-sans: 'Sorts Mill Goudy', Georgia, serif;
}

.main-content {
  background: #ffffff;
  border: 2px solid #453f87;
  box-shadow: 4px 4px 0 #453f87;
  padding: clamp(2rem, 3vw, 3rem);
}

:root[data-theme="dark"] .main-content {
  background: #191626;
  border-color: #c8c3f5;
  box-shadow: 4px 4px 0 #c8c3f5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1:after {
  background: linear-gradient(90deg, #453f87 0%, #6b63b5 100%);
}

:root[data-theme="dark"] h1:after {
  background: linear-gradient(90deg, #c8c3f5 0%, #a89ee8 100%);
}

.content-area a:not(.button):not(.copy-code-button):after {
  background: linear-gradient(90deg, #453f87 0%, #6b63b5 100%);
}

:root[data-theme="dark"] .content-area a:not(.button):not(.copy-code-button):after {
  background: linear-gradient(90deg, #c8c3f5 0%, #a89ee8 100%);
}

.docmd-container {
  border-top: 3px solid #453f87;
}

:root[data-theme="dark"] .docmd-container {
  border-top: 3px solid #c8c3f5;
}

.button,
button:not(.theme-toggle-button):not(.copy-code-button):not(.docmd-search-trigger):not(.sidebar-toggle-button) {
  background: linear-gradient(135deg, #453f87 0%, #6b63b5 100%);
  border-radius: 0;
  box-shadow: 3px 3px 0 #2d2960;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.button:hover,
button:not(.theme-toggle-button):not(.copy-code-button):not(.docmd-search-trigger):not(.sidebar-toggle-button):hover {
  filter: none;
  background: linear-gradient(135deg, #2d2960 0%, #453f87 100%);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #2d2960;
}

:root[data-theme="dark"] .button,
:root[data-theme="dark"] button:not(.theme-toggle-button):not(.copy-code-button):not(.docmd-search-trigger):not(.sidebar-toggle-button) {
  background: linear-gradient(135deg, #a89ee8 0%, #c8c3f5 100%);
  color: #0f0d1a;
  box-shadow: 3px 3px 0 #6b63b5;
}

:root[data-theme="dark"] .button:hover,
:root[data-theme="dark"] button:not(.theme-toggle-button):not(.copy-code-button):not(.docmd-search-trigger):not(.sidebar-toggle-button):hover {
  background: linear-gradient(135deg, #6b63b5 0%, #a89ee8 100%);
  box-shadow: 2px 2px 0 #6b63b5;
}

.header {
  background: linear-gradient(135deg, #453f87 0%, #6b63b5 100%) !important;
  border-bottom: none !important;
}

:root[data-theme="dark"] .header {
  background: linear-gradient(135deg, #1e1a2e 0%, #2a2540 100%) !important;
  border-bottom: 1px solid #3a3060 !important;
}

.header .logo img {
  filter: brightness(0) invert(1);
}

.header .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.header .nav-link:hover {
  color: #ffffff !important;
}

.docmd-options-menu .docmd-search-trigger,
.docmd-options-menu .theme-toggle-button,
.docmd-options-menu .sidebar-toggle-button {
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3) !important;
  background: transparent !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.docmd-options-menu .docmd-search-trigger:hover,
.docmd-options-menu .theme-toggle-button:hover,
.docmd-options-menu .sidebar-toggle-button:hover {
  transform: translate(1px, 1px) !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="dark"] .docmd-options-menu .docmd-search-trigger,
:root[data-theme="dark"] .docmd-options-menu .theme-toggle-button,
:root[data-theme="dark"] .docmd-options-menu .sidebar-toggle-button {
  border: 2px solid rgba(200, 195, 245, 0.6) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5) !important;
  color: #c8c3f5 !important;
}

:root[data-theme="dark"] .docmd-options-menu .docmd-search-trigger:hover,
:root[data-theme="dark"] .docmd-options-menu .theme-toggle-button:hover,
:root[data-theme="dark"] .docmd-options-menu .sidebar-toggle-button:hover {
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
}

.docmd-search-close svg,
.docmd-search-header > svg {
  color: #8a8a8a !important;
  stroke: #ffffff !important;
}

:root[data-theme="dark"] .docmd-search-close svg,
:root[data-theme="dark"] .docmd-search-header > svg {
  color: #b0b0b0 !important;
  stroke: #000000 !important;
}

.sidebar .sidebar-nav a.active,
.sidebar .nav-item.active {
  background: linear-gradient(135deg, #453f87 0%, #6b63b5 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .sidebar .sidebar-nav a.active,
:root[data-theme="dark"] .sidebar .nav-item.active {
  background: linear-gradient(135deg, #a89ee8 0%, #c8c3f5 100%) !important;
  color: #0f0d1a !important;
}

pre {
  border-left: 3px solid #453f87 !important;
}

:root[data-theme="dark"] pre {
  border-left: 3px solid #c8c3f5 !important;
}

th {
  background-color: #f5f0ff !important;
  color: #453f87 !important;
}

:root[data-theme="dark"] th {
  background-color: #1e1a2e !important;
  color: #c8c3f5 !important;
}

.docmd-tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.85em;
  color: #453f87;
  background-color: #f5f0ff;
  border: 1px solid #d5c3ff;
}

:root[data-theme="dark"] .docmd-tag {
  color: #c8c3f5;
  background-color: #1e1a2e;
  border-color: #3a3060;
}

.docmd-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, #453f87 0%, #6b63b5 100%);
  border: 2px solid #453f87;
  color: #ffffff !important;
  box-shadow: 3px 3px 0 #2d2960;
  transition: background 0.2s ease;
}

.docmd-button:hover {
  background: linear-gradient(135deg, #2d2960 0%, #453f87 100%);
  color: #ffffff !important;
  text-decoration: none;
}

:root[data-theme="dark"] .docmd-button {
  background: linear-gradient(135deg, #a89ee8 0%, #c8c3f5 100%);
  border-color: #a89ee8;
  color: #0f0d1a !important;
  box-shadow: 3px 3px 0 #6b63b5;
}

:root[data-theme="dark"] .docmd-button:hover {
  background: linear-gradient(135deg, #6b63b5 0%, #a89ee8 100%);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .content-area {
  color: #e8e5d5 !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: #c8c3f5 !important;
}

:root[data-theme="dark"] code,
:root[data-theme="dark"] pre {
  color: #e2ddf5 !important;
}

.footer {
  border-top: 2px solid var(--ruby-border);
  color: var(--ruby-text);
}

.footer a {
  color: var(--ruby-primary);
}