/*
 * Theme overrides for forced light/dark mode
 *
 * data-theme="light" → force light regardless of OS preference
 * data-theme="dark"  → force dark regardless of OS preference
 * data-theme absent  → follow OS preference (system mode)
 *
 * html[data-theme] specificity (0,1,1) beats :root (0,1,0) inside
 * media queries, so these overrides always win when present.
 */


/* ============================================
   FORCED DARK THEME
   ============================================ */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Color variables (colors.css) */
  --lch-black: 100% 0 0;
  --lch-white: 0% 0 0;
  --lch-gray: 25.2% 0 0;
  --lch-gray-dark: 30.12% 0 0;
  --lch-gray-darker: 44.95% 0 0;
  --lch-blue: 72.25% 0.16 248;
  --lch-blue-light: 28.11% 0.053 248;
  --lch-blue-dark: 42.25% 0.07 248;
  --lch-red: 73.8% 0.184 29.18;
  --lch-green: 75% 0.21 141.89;

  /* Code highlighting (code.css) */
  --keyword: oklch(73.45% 0.163 25.78);
  --entity: oklch(80.05% 0.127 305.86);
  --constant: oklch(78.57% 0.115 246.66);
  --string: oklch(78.57% 0.115 246.66);
  --variable: oklch(79.91% 0.141 60.1);
  --comment: oklch(66.25% 0.018 250.92);
  --entity-tag: oklch(84.16% 0.164 145.75);
  --markup-heading: oklch(56.86% 0.202 259.67);
  --markup-list: oklch(85.74% 0.133 89.95);
  --markup-inserted: oklch(90.72% 0.112 146.34);
  --markup-deleted: oklch(92.23% 0.04 27.49);
}


/* ============================================
   FORCED LIGHT THEME
   ============================================ */

html[data-theme="light"] {
  color-scheme: light;

  /* Color variables (colors.css) */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.005 96;
  --lch-gray-dark: 92% 0.005 96;
  --lch-gray-darker: 75% 0.005 96;
  --lch-blue: 54% 0.23 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-red: 51% 0.2 31;
  --lch-green: 65.59% 0.234 142.49;

  /* Code highlighting (code.css) */
  --keyword: oklch(58.79% 0.193 20.47);
  --entity: oklch(50.15% 0.188 294.99);
  --constant: oklch(49.49% 0.18 257.6);
  --string: oklch(31.08% 0.101 255.87);
  --variable: oklch(64.82% 0.18 45.87);
  --comment: oklch(55.14% 0.019 250.98);
  --entity-tag: oklch(54.64% 0.144 147.32);
  --markup-heading: oklch(49.49% 0.18 257.6);
  --markup-list: oklch(48.46% 0.093 90.48);
  --markup-inserted: oklch(54.64% 0.144 147.32);
  --markup-deleted: oklch(49.59% 0.183 24.19);
}


/* ============================================
   FILTER INVERSIONS — colorize utilities
   ============================================ */

html[data-theme="dark"] .colorize--white { filter: invert(0%); }
html[data-theme="dark"] .colorize--black { filter: invert(100%); }

html[data-theme="light"] .colorize--white { filter: invert(100%); }
html[data-theme="light"] .colorize--black { filter: invert(0%); }


/* ============================================
   FILTER INVERSIONS — buttons
   ============================================ */

/* Default icon images in buttons */
html[data-theme="dark"] .btn:where(:has(img):not(.avatar)) img:not([class]) {
  filter: invert(100%);
}

html[data-theme="light"] .btn:where(:has(img):not(.avatar)) img:not([class]) {
  filter: invert(0);
}

/* Checked toggle buttons */
html[data-theme="dark"] .btn:has(input:checked) img {
  filter: invert(0);
}

html[data-theme="light"] .btn:has(input:checked) img {
  filter: invert(100%);
}

/* Reversed/negative/positive button icons */
html[data-theme="dark"] :is(.btn--reversed, .btn--negative, .btn--positive) img:not(.avatar) {
  filter: invert(0%);
}

html[data-theme="light"] :is(.btn--reversed, .btn--negative, .btn--positive) img:not(.avatar) {
  filter: invert(100%);
}


/* ============================================
   FILTER INVERSIONS — notifications help
   ============================================ */

html[data-theme="dark"] .notifications-help img {
  filter: invert(100);
}

html[data-theme="light"] .notifications-help img {
  filter: none;
}


/* ============================================
   FILTER INVERSIONS — sidebar toggle (mobile)
   ============================================ */

@media (max-width: 100ch) {
  html[data-theme="dark"] .open .sidebar__toggle img {
    filter: invert(100%);
  }

  html[data-theme="light"] .open .sidebar__toggle img {
    filter: invert(0);
  }
}


/* ============================================
   FILTER INVERSIONS — action text (trix)
   ============================================ */

html[data-theme="dark"] :is(.trix-button-group, .trix-button)::before {
  filter: invert(100);
}

html[data-theme="dark"] :is(.trix-button-group, .trix-button).trix-active::before {
  filter: invert(0);
}

html[data-theme="light"] :is(.trix-button-group, .trix-button)::before {
  filter: none;
}

html[data-theme="light"] :is(.trix-button-group, .trix-button).trix-active::before {
  filter: invert(100);
}


/* ============================================
   FILTER INVERSIONS — composer attachment remove icon
   ============================================ */

html[data-theme="dark"] .composer__file-caption::after {
  filter: invert(100%);
}

html[data-theme="light"] .composer__file-caption::after {
  filter: none;
}


/* ============================================
   FILTER INVERSIONS — wizard pill images
   ============================================ */

html[data-theme="dark"] .wizard-pill img {
  filter: invert(0);
}

html[data-theme="light"] .wizard-pill img {
  filter: invert(100%);
}


/* ============================================
   PROPERTY OVERRIDES — admin nav background
   ============================================ */

html[data-theme="dark"] .admin-nav {
  background-color: oklch(var(--lch-black) / 0.8);
}

html[data-theme="light"] .admin-nav {
  background-color: oklch(var(--lch-white) / 0.8);
}


/* ============================================
   PROPERTY OVERRIDES — shadow utility
   ============================================ */

html[data-theme="dark"] .shadow {
  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.42),
    0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
    0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
    0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
    0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
}

html[data-theme="light"] .shadow {
  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.02),
    0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
    0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
    0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
    0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
}


/* ============================================
   PROPERTY OVERRIDES — toast shadow
   ============================================ */

html[data-theme="dark"] .toast__inner {
  box-shadow:
    0 0 0 1px oklch(100% 0 0 / 8%),
    0 0.5em 1em oklch(0% 0 0 / 30%),
    0 1em 2em oklch(0% 0 0 / 20%);
}

html[data-theme="light"] .toast__inner {
  box-shadow:
    0 0 0 1px oklch(0% 0 0 / 8%),
    0 0.5em 1em oklch(0% 0 0 / 12%),
    0 1em 2em oklch(0% 0 0 / 8%);
}


/* ============================================
   PROPERTY OVERRIDES — todo sticky note
   ============================================ */

html[data-theme="dark"] .todo-note {
  --todo-bg: oklch(28% 0.05 97);
  --todo-border: oklch(35% 0.06 97);
  --todo-text: oklch(85% 0.05 97);
  --todo-item-hover: oklch(33% 0.06 97);

  box-shadow: 0.15em 0.3em 0.8em oklch(var(--lch-always-black) / 0.4);
}

html[data-theme="light"] .todo-note {
  --todo-bg: oklch(95% 0.07 97);
  --todo-border: oklch(87% 0.09 97);
  --todo-text: oklch(30% 0.04 97);
  --todo-item-hover: oklch(91% 0.08 97);

  box-shadow: 0.15em 0.3em 0.8em oklch(var(--lch-always-black) / 0.12);
}


/* ============================================
   PROPERTY OVERRIDES — message mention highlight
   ============================================ */

html[data-theme="dark"] .message--mentioned .message__body-content {
  --message-background: oklch(var(--lch-red) / 0.2);
}

html[data-theme="light"] .message--mentioned .message__body-content {
  --message-background: oklch(var(--lch-red) / 0.1);
}