/*
 * Fish Application Styles
 *
 * Stylesheets are linked individually in the layout.
 * This file can be used for page-specific overrides if needed.
 */

/* Lexxy dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    --lexxy-color-ink: oklch(90% 0 0);
    --lexxy-color-ink-medium: oklch(70% 0 0);
    --lexxy-color-ink-light: oklch(55% 0 0);
    --lexxy-color-ink-lighter: oklch(35% 0 0);
    --lexxy-color-ink-lightest: oklch(20% 0 0);
    --lexxy-color-ink-inverted: oklch(15% 0 0);

    --lexxy-color-canvas: var(--color-canvas);
    --lexxy-color-text: var(--lexxy-color-ink);
    --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
    --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

    --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
    --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);

    --lexxy-color-selected: oklch(35% 0.08 260);
    --lexxy-color-selected-hover: oklch(45% 0.10 260);

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

:root[data-color-scheme="dark"] {
  --lexxy-color-ink: oklch(90% 0 0);
  --lexxy-color-ink-medium: oklch(70% 0 0);
  --lexxy-color-ink-light: oklch(55% 0 0);
  --lexxy-color-ink-lighter: oklch(35% 0 0);
  --lexxy-color-ink-lightest: oklch(20% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  --lexxy-color-canvas: var(--color-canvas);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);

  --lexxy-color-selected: oklch(35% 0.08 260);
  --lexxy-color-selected-hover: oklch(45% 0.10 260);

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