/* Root variables for theming with Solarized colors */
:root {
  /* Light theme (default) */
  --base3: #fdf6e3;   /* brightest */
  --base2: #eee8d5;
  --base1: #93a1a1;
  --base0: #839496;
  --base00: #657b83;
  --base01: #586e75;
  --base02: #073642;
  --base03: #002b36;  /* darkest */
  
  /* Accent colors */
  --yellow: #b58900;
  --orange: #cb4b16;
  --red: #dc322f;
  --magenta: #d33682;
  --violet: #6c71c4;
  --blue: #268bd2;
  --cyan: #2aa198;
  --green: #859900;

  /* Semantic assignments - Light theme */
  --primary-bg: var(--base3);
  --secondary-bg: var(--base2);
  --primary-text: var(--base01);
  --secondary-text: var(--base00);
  --accent-color: var(--blue);
  --border-color: var(--base1);
  --border-radius: 1rem;
  --spacing-unit: 1rem;
  --max-width: 1024px;
}

/* Light mode (default) */
.light {
  display: block;
}

.dark {
  display: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    /* Semantic assignments - Dark theme */
    --primary-bg: var(--base03);
    --secondary-bg: var(--base02);
    --primary-text: var(--base1);
    --secondary-text: var(--base0);
    --border-color: var(--base01);
  }

  .light {
    display: none;
  }

  .dark {
    display: block;
  }
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--secondary-bg);
  color: var(--primary-text);
  line-height: 1.6;
}

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-unit);
}

main {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 2);
}

/* Layout modifications for desktop fixed height */
@media (min-width: 1024px) {
  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    align-items: stretch;
    gap: calc(var(--spacing-unit) * 2);
  }
  
  .input-section {
    margin-bottom: 0;
  }

  .output-section {
    height: 100%;
  }

  .output-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }
}

/* Header */
.header {
  text-align: center;
  padding: calc(var(--spacing-unit) * 2) 0;
}

.logo {
  max-width: 200px;
  height: auto;
}

/* Input section */
.input-section {
  background: var(--primary-bg);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: var(--spacing-unit);
}

input[type="email"],
textarea {
  width: 100%;
  padding: calc(var(--spacing-unit) / 2);
  border: 1px solid var(--border-color);
  border-radius: calc(var(--border-radius) / 2);
  background: var(--primary-bg);
  color: var(--primary-text);
  font-size: 1rem;
  margin-top: calc(var(--spacing-unit) / 2);
}

textarea {
  min-height: 150px;
  resize: vertical;
}

button {
  background: var(--accent-color);
  color: var(--primary-bg);
  border: none;
  padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
  border-radius: calc(var(--border-radius) / 2);
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  transition: opacity 0.2s;
}

button:hover {
  opacity: 0.9;
}

/* Output section */
.output-section {
  position: relative;
}

.output-wrapper {
  background: var(--primary-bg);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Loading text styling */
.loading-text {
  font-family: monospace;
  font-size: 1.1rem;
  color: var(--accent-color);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  position: sticky;
  top: calc(var(--spacing-unit) * -2);
  margin: calc(var(--spacing-unit) * -2) calc(var(--spacing-unit) * -2) var(--spacing-unit);
  padding: calc(var(--spacing-unit) * 2);
  background: var(--primary-bg);
  z-index: 1;
}

.initial {
  color: var(--secondary-text);
}

.success {
  color: var(--green);
}

.error {
  color: var(--red);
}

/* Markdown content styling */
#output {
  color: var(--primary-text);
}

#output h1 {
  font-size: 1.5rem;
  margin: 1.5rem 0 1rem;
  color: var(--accent-color);
}

#output h1:first-child {
  margin-top: 0;
}

#output p {
  margin-bottom: 1rem;
}

#output ol, ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

#output table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

#output th,
#output td {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
}

#output th {
  background: var(--secondary-bg);
  color: var(--primary-bg);
  font-weight: bold;
}

#output span.options {
  color: var(--accent-color);
}

/* Footer */
.footer {
  text-align: center;
  padding: calc(var(--spacing-unit) * 2) 0;
  color: var(--secondary-text);
}

.footer a {
  color: var(--secondary-text);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  :root {
    --spacing-unit: 0.75rem;
  }
  
  .container {
    padding: var(--spacing-unit);
  }
  
  .input-section, .output-wrapper {
    padding: var(--spacing-unit);
  }

  .loading-text {
    top: calc(var(--spacing-unit) * -1);
    margin: calc(var(--spacing-unit) * -1) calc(var(--spacing-unit) * -1) var(--spacing-unit);
    padding: var(--spacing-unit);
  }
  
  #output table {
    display: block;
    overflow-x: auto;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Print styles */
@media print {
  .input-section {
    display: none;
  }
  
  .output-section {
    box-shadow: none;
  }
}