/*
 * 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;
}

/* -------------------------------------------------------------------------
   Pagination — overrides Pagy's gem stylesheet (loaded immediately before this
   file). The gem is variable-driven; we retheme it to the app palette and swap
   the pill/circle shape for rounded rectangles.
   ------------------------------------------------------------------------- */
.pagy-nav-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin: var(--space-6, 1.5rem) 0 var(--space-4, 1rem);
}

.pagy {
  --rounding: 0.75rem;      /* rounded rectangles, not circles */
  --border-width: 1px;
  --padding: 0.9rem;
  --spacing: 0.375rem;
  --font-size: var(--text-sm);
  --text: var(--color-ink);
  --text-hover: var(--color-primary-700);
  --text-current: #fff;
  --background: transparent;
  --background-hover: var(--color-primary-50);
  --background-current: var(--color-primary-600);
}

nav.pagy {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

nav.pagy a:not([role="separator"]) {
  min-width: 2.5rem;
  text-align: center;
  border-color: var(--color-border);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

nav.pagy a[aria-current] {
  border-color: var(--color-primary-600);
}

.pagy.info {
  display: block;
  text-align: center;
  color: var(--color-ink-light);
  font-size: var(--text-sm);
}