/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ===== Lexxy dark theme — matches DaisyUI "dark" theme ===== */
[data-theme="dark"] {
  /* Core ink scale (inverted for dark mode) */
  --lexxy-color-ink: oklch(96% 0 0);
  --lexxy-color-ink-medium: oklch(75% 0 0);
  --lexxy-color-ink-light: oklch(50% 0 0);
  --lexxy-color-ink-lighter: oklch(32% 0 0);
  --lexxy-color-ink-lightest: oklch(25% .016 252);
  --lexxy-color-ink-inverted: oklch(25.33% .016 252.42);

  /* Accent colors (slightly brighter for legibility on dark bg) */
  --lexxy-color-accent-dark: oklch(70% 0.19 260);
  --lexxy-color-accent-medium: oklch(65% 0.196 258);
  --lexxy-color-accent-light: oklch(35% 0.04 254);
  --lexxy-color-accent-lightest: oklch(30% 0.03 254);

  /* Named colors (brighter variants for dark bg) */
  --lexxy-color-red: oklch(70% 0.15 27);
  --lexxy-color-green: oklch(70% 0.15 145);
  --lexxy-color-blue: oklch(72% 0.196 258);
  --lexxy-color-purple: oklch(70% 0.15 305);

  /* Code syntax tokens (GitHub dark-ish palette) */
  --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: #c9d1d9;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  /* Text color highlights (lighter/brighter for dark bg) */
  --highlight-1: rgb(229, 223, 80);
  --highlight-2: rgb(255, 185, 87);
  --highlight-3: rgb(255, 118, 118);
  --highlight-4: rgb(248, 137, 216);
  --highlight-5: rgb(190, 165, 255);
  --highlight-6: rgb(124, 192, 252);
  --highlight-7: rgb(140, 255, 129);
  --highlight-8: rgb(221, 170, 123);
  --highlight-9: rgb(180, 180, 180);

  --highlight-bg-1: rgba(229, 223, 6, 0.2);
  --highlight-bg-2: rgba(255, 185, 87, 0.2);
  --highlight-bg-3: rgba(255, 118, 118, 0.2);
  --highlight-bg-4: rgba(248, 137, 216, 0.2);
  --highlight-bg-5: rgba(190, 165, 255, 0.2);
  --highlight-bg-6: rgba(124, 192, 252, 0.2);
  --highlight-bg-7: rgba(140, 255, 129, 0.2);
  --highlight-bg-8: rgba(221, 170, 123, 0.2);
  --highlight-bg-9: rgba(200, 200, 200, 0.15);

  /* Canvas and text (dark background, light text) */
  --lexxy-color-canvas: oklch(25.33% .016 252.42);
  --lexxy-color-text: oklch(96% 0 0);
  --lexxy-color-text-subtle: oklch(75% 0 0);
  --lexxy-color-link: oklch(72% 0.196 258);

  /* Code blocks (darker background for dark theme) */
  --lexxy-color-code-bg: oklch(22% 0.01 252);

  /* Selection (darker for dark theme) */
  --lexxy-color-selected: oklch(35% 0.04 254);
  --lexxy-color-selected-50: color-mix(in oklch, oklch(65% 0.196 258) 50%, transparent);
  --lexxy-color-selected-hover: oklch(38% 0.04 254);
  --lexxy-color-selected-dark: oklch(65% 0.196 258);

  /* Tables (darker backgrounds for dark theme) */
  --lexxy-color-table-header-bg: oklch(28% 0.01 252);
  --lexxy-color-table-cell-border: oklch(35% 0 0);
  --lexxy-color-table-cell-selected: oklch(35% 0.04 254);
  --lexxy-color-table-cell-selected-bg: oklch(35% 0.04 254);
  --lexxy-color-table-cell-selected-border: oklch(65% 0.196 258);
  --lexxy-color-table-cell-toggle: oklch(35% 0.04 254);
  --lexxy-color-table-cell-add: color-mix(in oklch, oklch(65% 0.196 258) 50%, transparent);
  --lexxy-color-table-cell-remove: oklch(60% 0.15 27 / 0.2);

  /* Shadow (darker, more subtle on dark bg) */
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.lexxy-content {
  /* Basic list styling for rendered content */
  ul, ol {
    margin: 0.25em 0;
    padding-left: 2em;
  }

  ul {
    list-style-type: disc;
  }

  ul ul {
    list-style-type: circle;
  }

  ul ul ul {
    list-style-type: square;
  }

  ol {
    list-style-type: decimal;
  }

  ol ol {
    list-style-type: lower-alpha;
  }

  ol ol ol {
    list-style-type: lower-roman;
  }

  /* Add some spacing between list items */
  li {
    margin: 0.5em 0;
  }
}