/* Trans flag inspired theme - Dark Mode Enhanced & Softened */

.theme-dark {
  /* --- Base Color Definitions --- */
  --background-primary: #1f1f24; /* Darker base */
  --background-secondary: #2a2a30; /* Slightly lighter dark */
  --background-primary-alt: #25252b;
  --background-secondary-alt: #303038;
  --background-modifier-border: rgba(91, 206, 250, 0.3); /* Softer light blue border */
  --background-modifier-border-hover: #5BCEFA;
  --background-modifier-border-focus: #5BCEFA;
  --background-modifier-hover: rgba(91, 206, 250, 0.1); /* Subtle blue hover */

  --text-normal: #e8e8e8; /* Slightly brighter default text */
  --text-muted: #a8a8a8; /* Softer muted text */
  --text-faint: #777777;

  /* --- Trans Flag Accent Colors --- */
  --text-accent: #F5A9B8; /* Pink for accents */
  --text-accent-hover: #5BCEFA; /* Light blue for hover */
  --interactive-accent: #F5A9B8; /* Pink for interactive elements */
  --interactive-accent-hsl: 348, 83%, 85%; /* HSL for Pink */
  --interactive-accent-hover: #5BCEFA; /* Light blue for hover */
  --text-selection: rgba(245, 169, 184, 0.4); /* Pink selection */
  --text-highlight-bg: rgba(91, 206, 250, 0.2); /* Blue highlight */
  --caret-color: #F5A9B8; /* Pink caret */

  /* Text on accent colors (adjust if needed based on accent brightness) */
  --text-on-accent: #1f1f24; /* Dark text on pink/blue buttons */
  --text-on-accent-inverted: #1f1f24;

  /* --- Base Body --- */
  /* body styling is often inherited or handled by base theme,
     but we ensure our primary background is set */
  .workspace {
    background-color: var(--background-primary);
  }

  /* --- Headings --- */
  h1 {
    color: #5BCEFA; /* Light blue */
    border-bottom: 2px solid rgba(91, 206, 250, 0.5); /* Softer blue border */
  }

  h2 {
    color: #F5A9B8; /* Pink */
    border-bottom: 1px solid rgba(245, 169, 184, 0.5); /* Softer pink border */
  }

  h3, h4, h5, h6 {
    color: #FFFFFF; /* White for contrast */
    border-bottom: none; /* Remove borders for minor headings */
  }

  /* --- Links --- */
  a.internal-link,
  a.external-link,
  .cm-link, .cm-hmd-internal-link { /* Apply to editor links too */
    color: var(--text-accent); /* Use variable */
    text-decoration: none;
  }

  a.internal-link:hover,
  a.external-link:hover,
  .cm-link:hover, .cm-hmd-internal-link:hover {
    color: var(--text-accent-hover); /* Use variable */
    text-decoration: none; /* Keep no underline or add subtle one */
    /* text-decoration: underline; */
  }

  /* --- Horizontal Rule --- */
  hr {
    height: 2px; /* Thinner */
    background: linear-gradient(to right, rgba(91, 206, 250, 0.7) 0%, rgba(245, 169, 184, 0.7) 50%, rgba(255, 255, 255, 0.7) 100%);
    border: none;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  }

  /* --- UI Elements --- */

  /* Sidebars */
  .mod-left-split, .mod-right-split {
    background-color: var(--background-secondary); /* Use variable */
    border-color: var(--background-modifier-border); /* Use variable */
    border-width: 1px; /* Ensure consistent border width */
    border-right-width: 1px;
    border-left-width: 1px;
  }
  .mod-right-split {
     border-left-width: 1px;
     border-right-width: 0;
  }
   .mod-left-split {
     border-right-width: 1px;
     border-left-width: 0;
  }


  /* Header */
  .view-header {
    background-color: var(--background-primary-alt); /* Use variable */
    border-bottom: 1px solid var(--background-modifier-border); /* Softer border */
    box-shadow: none; /* Remove default shadow if any */
  }
  .view-header-title {
    color: var(--text-normal); /* Use variable */
  }

  /* Buttons */
  button, .mod-cta {
    background-color: var(--interactive-accent); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
    border: none;
    font-weight: 500; /* Slightly bolder */
  }
  button:hover, .mod-cta:hover {
    background-color: var(--interactive-accent-hover); /* Use variable */
    color: var(--text-on-accent); /* Use variable */
  }

  /* Active file / selection */
  .nav-file-title.is-active,
  .nav-folder-title.is-active {
    background-color: var(--background-modifier-hover); /* Use variable */
    color: var(--text-accent-hover); /* Use blue for active text */
    font-weight: bold;
  }
  .cm-selection, ::selection {
    background-color: var(--text-selection) !important; /* Use variable */
  }

  /* Code blocks */
  pre[class*="language-"], .markdown-rendered code {
    background-color: var(--background-secondary-alt); /* Use variable */
    border: 1px solid var(--background-modifier-border); /* Use variable */
    border-radius: 4px;
  }
  /* Inline code */
  code:not(pre > code) {
    color: #F5A9B8; /* Pink code text */
    background-color: rgba(245, 169, 184, 0.1); /* Subtle pink background */
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
  }

  /* --- Specific Classes from Original (using variables) --- */

  /* Right-aligned pinup styling */
  .pinup-container {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
    max-width: 300px;
    border: 2px solid var(--interactive-accent); /* Pink border */
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--background-secondary); /* Add subtle background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Softer shadow */
  }

  .pinup-container img {
    display: block;
    width: 100%;
  }

  /* Task list with trans colors */
  .tasks-plugin-task-list {
    border-left: 3px solid var(--text-accent-hover); /* Light blue */
    padding-left: 10px;
    background-color: rgba(91, 206, 250, 0.05); /* Very subtle blue background */
    border-radius: 4px;
    margin-bottom: 0.5em;
  }
  .task-list-item input[type=checkbox]:checked {
    border-color: var(--interactive-accent); /* Pink check */
    background-color: var(--interactive-accent);
  }
  .task-list-item input[type=checkbox] {
    border-color: var(--text-accent-hover); /* Blue border */
  }
  .task-list-item.is-checked .task-list-item-label {
    text-decoration-color: var(--text-muted); /* Muted strikethrough */
  }


  /* Quick links section */
  .quick-links {
    background-color: rgba(245, 169, 184, 0.1); /* Subtle pink */
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(245, 169, 184, 0.3); /* Softer pink border */
    border-left: 4px solid var(--interactive-accent); /* Pink accent */
    margin-bottom: 1em;
  }

  /* Quick capture section */
  .quick-capture {
    background-color: rgba(91, 206, 250, 0.08); /* Subtle blue */
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(91, 206, 250, 0.3); /* Softer blue border */
    border-left: 4px solid var(--interactive-accent-hover); /* Light blue accent */
    margin-bottom: 1em;
  }

  /* MOC section */
  .moc {
    background-color: rgba(255, 255, 255, 0.05); /* Subtle white/grey */
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.15); /* Softer white border */
    border-left: 4px solid rgba(255, 255, 255, 0.7); /* White accent */
    margin-bottom: 1em;
  }

  /* --- Settings Modal --- */
  .modal.mod-settings {
    --background-secondary: #26262e; /* Slightly different dark for modal */
    --background-modifier-border: rgba(245, 169, 184, 0.5); /* Pink borders in settings */
  }
  .modal.mod-settings .vertical-tab-header-group-title {
    color: var(--text-accent-hover); /* Blue titles */
    font-weight: bold;
  }
  .modal.mod-settings .vertical-tab-nav-item.is-active {
    color: var(--text-accent); /* Pink active setting */
    border-left-color: var(--interactive-accent);
    background-color: rgba(245, 169, 184, 0.1); /* Subtle pink background */
  }
  .modal.mod-settings .vertical-tab-nav-item:not(.is-active):hover {
     background-color: var(--background-modifier-hover); /* Use standard hover */
     color: var(--text-accent-hover);
  }


} /* End of .theme-dark */