@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700&display=swap');

:root {
  /* Font Family Variables for Modern & Clean Pairing */
  --font-ui: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  --font-content: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  
  /* Default to UI font for general interface */
  font-family: var(--font-ui);
  line-height: 1.5;
  font-weight: 400;

  /* Light Mode Palette */
  --background-primary: #f8f9fa;
  --background-secondary: #ffffff;
  --border-color: #dee2e6;
  --shadow-color-soft: rgba(0, 0, 0, 0.05);
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --accent-primary: #007bff;
  --accent-primary-hover: #88c4ff;
  --accent-highlight-soft: #e7f3ff;
  --text-on-accent: #ffffff;

  color-scheme: light dark; /* Keep this to allow user agent to derive dark mode */
  color: var(--text-primary); /* Default text color for light mode */
  background-color: var(--background-primary); /* Default background for light mode */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --background-primary: #1a1a1a; /* Darker background */
    --background-secondary: #242424; /* Slightly lighter than primary for cards/headers */
    --text-primary: rgba(255, 255, 255, 0.87); /* Light text for dark backgrounds */
    --text-secondary: #9e9e9e; /* Lighter gray for secondary text */
    --border-color: #424242; /* Darker border color */
    --shadow-color-soft: rgba(255,255,255,0.05);
    /* Accent colors can remain the same or be adjusted if needed for contrast */
    /* --accent-primary: #007bff; */
    /* --accent-primary-hover: #0056b3; */
    /* --text-on-accent: #ffffff; */
    --accent-highlight-soft: #2a3f5a; /* Darker highlight for dark mode */
  }
  /* Ensure body text and background uses the dark mode variables */
  body {
    color: var(--text-primary);
    background-color: var(--background-primary);
  }
}


a {
  font-weight: 500;
  color: var(--accent-primary);
  text-decoration: inherit;
}
a:hover {
  color: var(--accent-primary-hover);
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--background-primary); /* Ensure body background uses variable */
  color: var(--text-primary); /* Ensure body text uses variable */
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
  color: var(--text-primary); /* Ensure headings use text-primary */
}

button {
  border-radius: 8px;
  border: 1px solid var(---border-color); /* Changed from transparent */
  padding: 0.75em 1.5em; /* Adjusted padding */
  font-size: 1em;
  font-weight: 500; /* Medium weight for buttons as recommended */
  font-family: var(--font-ui); /* Explicitly use Inter for UI elements */
  background-color: var(--accent-highlight-soft); /* Use accent for button background */
  color: var(--text-secondary); /* Text on accent color */
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s; /* Added box-shadow to transition */
}
button:hover {
  background-color: var(--accent-primary-hover); /* Darken button on hover */
  border-color: var(--accent-primary-hover); /* Match border color on hover */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ /* Optional: subtle shadow on hover */
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color; /* Keep default focus outline */
  background-color: var(--accent-primary-hover); /* Match hover background */
  border-color: var(--accent-primary-hover); /* Match hover border */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ /* Optional: subtle shadow on focus */
}

/* Remove the specific light theme overrides for color and background-color as they are now handled by the main :root and dark mode override */
/* @media (prefers-color-scheme: light) { ... } */

/* Code block styling */
.ProseMirror pre {
  background: var(--background-secondary); /* Use secondary background for code blocks */
  border: 1px solid var(--border-color); /* Use border color for code blocks */
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-primary); /* Ensure text in code blocks is readable */
}

.ProseMirror pre code {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit; /* Inherit color from parent pre */
}

/* Citation styling using new palette */
.ProseMirror span[data-type="citation"] {
  background-color: var(--accent-highlight-soft);
  border: 1px solid var(--accent-primary);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.9em;
  font-family: var(--font-content); /* Use content font for citations */
  color: var(--accent-primary);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.ProseMirror span[data-type="citation"]:hover {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary-hover);
}

/* Text formatting styles */
.ProseMirror strong {
  font-weight: bold;
}

.ProseMirror em {
  font-style: italic;
}

.ProseMirror s {
  text-decoration: line-through;
}

/* Figure reference styling using new palette (can use same as citation or a secondary accent if defined) */
.ProseMirror span[data-type="figure-reference"] {
  background-color: var(--accent-highlight-soft); /* Or a secondary highlight */
  border: 1px solid var(--accent-primary); /* Or a secondary accent */
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.9em;
  font-family: var(--font-content); /* Use content font for figure references */
  color: var(--accent-primary); /* Or a secondary accent */
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.ProseMirror span[data-type="figure-reference"]:hover {
  background-color: var(--accent-primary); /* Or a secondary accent */
  color: var(--text-on-accent);
  border-color: var(--accent-primary-hover); /* Or a secondary accent hover */
}
