/* ==================== Variables ==================== */
html.navy {
  --bg: #0a0a0f;
  --fg: #c0c0d0;

  --sidebar-bg: #111118;
  --sidebar-fg: #9898b0;
  --sidebar-non-existant: #505060;
  --sidebar-active: #c084fc;
  --sidebar-spacer: #252538;

  --scrollbar: #9898b0;

  --icons: #737480;
  --icons-hover: #b7b9cc;

  --links: #c084fc;

  --inline-code-color: #4ade80;

  --theme-popup-bg: #111118;
  --theme-popup-border: #252538;
  --theme-hover: #1a1a28;

  --quote-bg: #161622;
  --quote-border: #252538;

  --table-border-color: #1a1a28;
  --table-header-bg: #161622;
  --table-alternate-bg: #111118;

  --searchbar-border-color: #252538;
  --searchbar-bg: #161622;
  --searchbar-fg: #c0c0d0;
  --searchbar-shadow-color: #0a0a0f;
  --searchresults-header-fg: #9898b0;
  --searchresults-border-color: #252538;
  --searchresults-li-bg: #161622;
  --search-mark-bg: #c084fc;

  --color-scheme: dark;

  --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%)
    contrast(87%);
  --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(240deg)
    brightness(104%) contrast(101%);

  --footnote-highlight: #c084fc;

  --overlay-bg: rgba(10, 10, 15, 0.4);

  --blockquote-note-color: #4493f8;
  --blockquote-tip-color: #4ade80;
  --blockquote-important-color: #c084fc;
  --blockquote-warning-color: #d29922;
  --blockquote-caution-color: #f21424;

  --sidebar-header-border-color: #c084fc;

  --warning-border: #ff8e00;

  --content-max-width: 1100px;
}

/* ==================== Background ==================== */
html.navy body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(192, 132, 252, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(74, 222, 128, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    60px 60px,
    60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ==================== Menu Bar ==================== */
html.navy #menu-bar {
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #252538;
}

html.navy .menu-title {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  font-weight: 700;
  color: #c0c0d0;
}

/* ==================== Content ==================== */
html.navy .content {
  padding-top: 36px;
  padding-bottom: 36px;
}

html.navy .content main {
  background: rgb(16 16 22 / 90%);
  border-radius: 12px;
  padding: 32px;
}

/* ==================== Headings ==================== */
html.navy .content h1 {
  font-family: var(--font-mono);
  font-weight: 800;
  background: linear-gradient(135deg, #c084fc, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.navy .content h2,
html.navy .content h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #c0c0d0;
}

html.navy .content main > h1:first-child,
html.navy .content main > h2:first-child,
html.navy .content main > h3:first-child {
  margin-top: 0;
}

/* ==================== Code Blocks ==================== */
html.navy .content pre {
  background: #161622 !important;
  border: 1px solid #252538;
  border-radius: 12px;
  margin: 1.5em 0;
  position: relative;
  overflow-x: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 0;
}

html.navy .content pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(135deg, #4ade80, #22d3ee);
  opacity: 0.5;
  border-radius: 12px 12px 0 0;
}

html.navy .content pre code {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  background: #161622;
  display: block;
  padding: 24px;
}

/* ==================== Copy Button ==================== */
html.navy .content pre > .buttons button {
  padding: 1px 3px;
  font-size: 13px;
  position: relative;
  left: -1px;
}

html.navy .content pre > .buttons button.clip-button::before {
  content: url('data:image/svg+xml,<svg width="16" height="15" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard"><path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/></svg>');
  filter: var(--copy-button-filter);
}

/* ==================== Tables ==================== */

html.navy .content table {
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
  overflow: hidden;
  border: 1px solid #252538;
  border-radius: 8px;
  width: 100%;
  background: #252538;
  backdrop-filter: none;
  isolation: isolate;
  position: relative;
}

html.navy .content table::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(135deg, #4ade80, #22d3ee);
  opacity: 0.5;
  z-index: 1;
}

html.navy .content table thead {
  background: #161622;
}

html.navy .content table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #c0c0d0;
  border-bottom: 2px solid #252538;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

html.navy .content table td {
  padding: 10px 16px;
  border-bottom: 1px solid #252538;
  color: #9898b0;
  background: #161622;
}

html.navy .content table tr:hover td {
  background: rgba(192, 132, 252, 0.08);
}

html.navy .content table tbody tr:nth-child(2n) {
  background: #161622;
}

html.navy .content table {
  backdrop-filter: none;
  isolation: isolate;
}