:root {
  --sandbox-background-color: oklch(98% 0 0);
  --sandbox-text-color: oklch(20% 0 0);
  --sandbox-code-color: #2d3748;

  /* Dark mode colors */
  @media (prefers-color-scheme: dark) {
    --sandbox-background-color: oklch(15% 0 0);
    --sandbox-text-color: oklch(90% 0 0);
    --sandbox-code-color: #eaecef;
  
    /* Lexxy dark mode colors */
    --lexxy-color-ink: oklch(87% 0 0);
    --lexxy-color-ink-medium: oklch(75% 0 0);
    --lexxy-color-ink-light: oklch(55% 0 0);
    --lexxy-color-ink-lighter: oklch(40% 0 0);
    --lexxy-color-ink-lightest: oklch(25% 0 0);
    --lexxy-color-ink-inverted: oklch(15% 0 0);

    --lexxy-color-accent-dark: oklch(70% 0.30 260);
    --lexxy-color-accent-medium: oklch(75% 0.196 258);
    --lexxy-color-accent-light: oklch(45% 0.04 254);
    --lexxy-color-accent-lightest: oklch(35% 0.04 254);

    --lexxy-color-red: oklch(70% 0.15 27);
    --lexxy-color-green: oklch(70% 0.15 145);
    --lexxy-color-blue: oklch(75% 0.196 258);
    --lexxy-color-purple: oklch(70% 0.15 305);

    --lexxy-color-code-token-att: #ff7b72;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #f0f6fc;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;

    --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);
  }
}

.lexxy-editor__toolbar-button {
  background-color: transparent;
}

.lexxy-editor__toolbar-overflow-menu {
  background-color: #171717;
}


.lexxy-code-language-picker {
  background-color: transparent;
  border-radius: 1ch;
}

[data-lexxy-output-target="output"] {
  overflow-x: auto;

  pre {
    margin: 0;
    overflow-x: visible;
    white-space: pre;
  }
}

/* Restore list styles in Lexxy editor and prose areas */
.lexxy-rich-text-editor ul,
.prose ul,
[data-lexxy-output-target="output"] ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.5em;
  margin: 1em 0;
}

.lexxy-rich-text-editor ol,
.prose ol,
[data-lexxy-output-target="output"] ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5em;
  margin: 1em 0;
}

.lexxy-rich-text-editor li,
.prose li,
[data-lexxy-output-target="output"] li {
  display: list-item;
  margin: 0.5em 0;
}

/* Nested lists */
.lexxy-rich-text-editor ul ul,
.prose ul ul,
[data-lexxy-output-target="output"] ul ul {
  list-style-type: circle;
  margin: 0.25em 0;
}

.lexxy-rich-text-editor ul ul ul,
.prose ul ul ul,
[data-lexxy-output-target="output"] ul ul ul {
  list-style-type: square;
}

.lexxy-rich-text-editor ol ol,
.prose ol ol,
[data-lexxy-output-target="output"] ol ol {
  list-style-type: lower-alpha;
  margin: 0.25em 0;
}

.lexxy-rich-text-editor ol ol ol,
.prose ol ol ol,
[data-lexxy-output-target="output"] ol ol ol {
  list-style-type: lower-roman;
}

/* Restore link styles in Lexxy editor and prose areas */
.lexxy-rich-text-editor a,
.prose a,
[data-lexxy-output-target="output"] a {
  color: #93c5fd; /* Light blue - easy on the eyes in dark mode */
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.lexxy-rich-text-editor a:hover,
.prose a:hover,
[data-lexxy-output-target="output"] a:hover {
  color: #bfdbfe; /* Lighter blue on hover */
  text-decoration: underline;
}

.lexxy-rich-text-editor a:visited,
.prose a:visited,
[data-lexxy-output-target="output"] a:visited {
  color: #c4b5fd; /* Soft purple for visited links */
}

/* Ensure links are visible in light mode too */
@media (prefers-color-scheme: light) {
  .lexxy-rich-text-editor a,
  .prose a,
  [data-lexxy-output-target="output"] a {
    color: #2563eb; /* Standard blue for light mode */
  }
  
  .lexxy-rich-text-editor a:hover,
  .prose a:hover,
  [data-lexxy-output-target="output"] a:hover {
    color: #1d4ed8; /* Darker blue on hover */
  }
  
  .lexxy-rich-text-editor a:visited,
  .prose a:visited,
  [data-lexxy-output-target="output"] a:visited {
    color: #7c3aed; /* Purple for visited links */
  }
}

/* Prism.js light theme for syntax highlighting */
pre[class*="language-"],
code[class*="language-"] {
  color: var(--sandbox-code-color);
  background: none;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 2;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1rem;
  margin: 0;
  overflow: auto;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
}

code[class*="language-"] {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Syntax highlighting colors */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #718096;
  font-style: italic;
}

.token.punctuation {
  color: #4a5568;
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #e53e3e;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #38a169;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #805ad5;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #3182ce;
}

.token.function,
.token.class-name {
  color: #dd6b20;
}

.token.regex,
.token.important,
.token.variable {
  color: #d69e2e;
}

.token.important,
.token.bold {
  font-weight: 600;
}

.token.italic {
  font-style: italic;
}

.token.strikethrough {
  text-decoration: line-through;
}

.token.entity {
  cursor: help;
}

/* Line highlighting */
pre[data-line] {
  position: relative;
  padding: 1rem 0;
}

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1rem;
  background: rgba(56, 161, 105, 0.08);
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

.lexxy-rich-text-editor,
.prose,
[data-lexxy-output-target="output"] {
  line-height: 2.0;
}