/*
Theme Name: Neolune
Theme URI: https://github.com/Tetrakern/fictioneer
Template: fictioneer
Author: Tetrakern, Robbie
Author URI: https://github.com/Tetrakern
Description: Neolune — Phone-first editorial reading and commerce child theme for Fictioneer. Designed at 390px with high-density story rows, non-navigating bottom sheets, volume scrubber, zero-chrome reading dock, honest micropayments gate, and celestial Obsidian/Pearl aesthetics.
Version: 1.8.31
License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: neolune
*/

/* =============================================================================
   1. DESIGN TOKENS (Obsidian & Pearl System)
   ============================================================================= */

:root {
  /* Surface & Ink (Obsidian / Dark mode default) */
  --u-bg: #0D0D0F;
  --u-surf: #161619;
  --u-raise: #1E1E23;
  --u-sunk: #08080A;
  --u-line: rgba(255, 255, 255, 0.085);
  --u-line2: rgba(255, 255, 255, 0.18);
  --u-hair: rgba(255, 255, 255, 0.05);

  --u-t1: #F3F3F4; /* Primary / prose / titles */
  --u-t2: #A3A3AB; /* Secondary / synopsis */
  --u-t3: #68686F; /* Muted / dates / counts */

  /* Signal Hues (Purpose-driven) */
  --u-free: #7FCB9B;
  --u-free-soft: rgba(127, 203, 155, 0.13);

  --u-lock: #D9A441;
  --u-lock-soft: rgba(217, 164, 65, 0.13);

  --u-ember: #FF8A3D; /* Emberlib warm spark accent (dark) */

  --u-ac: #FFFFFF;
  --u-ac-btn: #FFFFFF;
  --u-ac-fg: #0D0D0F;
  --u-ac-soft: rgba(255, 255, 255, 0.12);

  /* Geometry & Dimensions */
  --u-r: 6px;
  --u-r-sm: 4px;
  --u-r-lg: 14px;
  --u-r-pill: 999px;
  --touch-min: 44px;
  --p-max: 1240px;
  --p-pad: clamp(14px, 3.2vw, 28px);

  /* Motion Tokens */
  --t-tap: 90ms linear;
  --t-reveal: 140ms cubic-bezier(0, 0, 0.2, 1);
  --t-sheet: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-page: 0ms;

  /* Typography */
  --font-serif: "Newsreader", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --f-serif: var(--font-serif);
  --f-sans: var(--font-sans);
  --f-ui: var(--font-sans);
  --f-mono: var(--font-mono);

  /* Input & Control Tokens (High-Contrast Defaults) */
  --input-color: #F3F3F4;
  --input-placeholder-color: #8E8E93;
  --input-background: var(--u-raise);
  --input-fill: var(--u-t2);
  --input-range-thumb: var(--u-ac);
  --input-range-thumb-hover: #FFFFFF;

  --button-secondary-background: var(--u-raise);
  --button-secondary-background-hover: var(--u-surf);
  --button-secondary-color: var(--u-t1);
  --button-secondary-color-hover: var(--u-ac);
  --button-secondary-border: 1px solid var(--u-line2);
  --button-secondary-border-hover: 1px solid var(--u-ac);

  --toggle-background: var(--u-sunk);
  --toggle-background-checked: var(--u-ac);
  --toggle-background-hover: var(--u-raise);
  --toggle-color: var(--u-t2);
  --toggle-color-hover: #FFFFFF;
  --toggle-color-checked: #FFFFFF;
  --toggle-color-checked-hover: #FFFFFF;
  --toggle-border: var(--u-line2);
  --toggle-border-checked: var(--u-ac);
  --toggle-border-hover: var(--u-ac);
  --fg-inverted: #0D0D0F;

  /* Fictioneer Parent Theme Variable Harmonization */
  --body-bg-color: var(--u-bg);
  --site-bg-color: var(--u-bg);
  --page-bg-color: var(--u-bg);
  --main-background: var(--u-bg);
  --card-bg-color: var(--u-surf);
  --card-footer-bg-color: var(--u-raise);
  --card-overlay-bg-color: var(--u-raise);
  --navigation-background: var(--u-sunk);
  --navigation-submenu-background: var(--u-surf);
  --navigation-item-background-hover: var(--u-raise);
  --modal-bg-color: var(--u-surf);
  --mobile-menu-background: var(--u-sunk);
  --comment-background: var(--u-surf);
  --blockquote-background: var(--u-raise);
  --placeholder-background: var(--u-raise);
  --micro-menu-background: var(--u-surf);
  --bg-isolated-footer: var(--u-sunk);
  --consent-banner-background: var(--u-surf);
  --tts-background: var(--u-surf);

  --fg-100: #FFFFFF;
  --fg-200: var(--u-t1);
  --fg-300: var(--u-t1);
  --fg-400: var(--u-t1);
  --fg-500: var(--u-t2);
  --fg-600: var(--u-t2);
  --fg-700: var(--u-t1);
  --fg-800: var(--u-t1);
  --fg-900: #FFFFFF;
  --fg-950: #FFFFFF;
  --text-chapter: var(--u-t1);
  --novel-text-primary: var(--u-t1);

  --bg-950: #0D0D0F;
  --bg-900: #161619;
  --bg-800: #1E1E23;
  --bg-700: #25252C;
  --bg-600: #303038;
  --bg-500: #3D3D47;
  --bg-400: #4B4B57;
  --bg-300: #5C5C6B;
  --bg-200: #737385;
  --bg-100: #8E8E9F;
  --bg-50: #A8A8BA;
}

/* Obsidian / Dark Theme Mode Explicit Rule */
:root[data-mode="dark"],
:root[data-ui="dark"],
:root[data-theme="obsidian"] {
  --u-bg: #0D0D0F;
  --u-surf: #161619;
  --u-raise: #1E1E23;
  --u-sunk: #08080A;
  --u-line: rgba(255, 255, 255, 0.085);
  --u-line2: rgba(255, 255, 255, 0.18);
  --u-hair: rgba(255, 255, 255, 0.05);

  --u-t1: #F4F4F6;
  --u-t2: #C4C4CD;
  --u-t3: #8E8E98;
  --text-chapter: #F4F4F6;
  --novel-text-primary: #F4F4F6;

  --fg-100: #FFFFFF;
  --fg-200: #F4F4F6;
  --fg-300: #F4F4F6;
  --fg-400: #E4E4E7;
  --fg-500: #C4C4CD;
  --fg-600: #A3A3AB;
  --fg-700: #F4F4F6;
  --fg-800: #F4F4F6;
  --fg-900: #FFFFFF;
  --fg-950: #FFFFFF;

  --u-free: #7FCB9B;
  --u-free-soft: rgba(127, 203, 155, 0.13);

  --u-lock: #D9A441;
  --u-lock-soft: rgba(217, 164, 65, 0.13);

  --u-ac: #FFFFFF;
  --u-ac-btn: #FFFFFF;
  --u-ac-fg: #0D0D0F;
  --u-ac-soft: rgba(255, 255, 255, 0.12);

  --input-color: #F3F3F4;
  --input-placeholder-color: #8E8E93;
  --input-background: #1E1E23;
  --input-fill: #A3A3AB;
  --input-range-thumb: #FFFFFF;
  --input-range-thumb-hover: #E4E4E7;

  --button-secondary-background: #1E1E23;
  --button-secondary-background-hover: #161619;
  --button-secondary-color: #F3F3F4;
  --button-secondary-color-hover: #FFFFFF;
  --button-secondary-border: 1px solid rgba(255, 255, 255, 0.18);
  --button-secondary-border-hover: 1px solid #FFFFFF;

  --toggle-background: #08080A;
  --toggle-background-checked: #FFFFFF;
  --toggle-background-hover: #1E1E23;
  --toggle-color: #A3A3AB;
  --toggle-color-hover: #FFFFFF;
  --toggle-color-checked: #0D0D0F;
  --toggle-color-checked-hover: #0D0D0F;
  --toggle-border: rgba(255, 255, 255, 0.18);
  --toggle-border-checked: #FFFFFF;
  --toggle-border-hover: #FFFFFF;
  --fg-inverted: #0D0D0F;

  --body-bg-color: #0D0D0F;
  --site-bg-color: #0D0D0F;
  --page-bg-color: #0D0D0F;
  --main-background: #0D0D0F;
  --card-bg-color: #161619;
  --card-footer-bg-color: #1E1E23;
  --card-overlay-bg-color: #1E1E23;
  --navigation-background: #08080A;
  --navigation-submenu-background: #161619;
  --navigation-item-background-hover: #1E1E23;
  --modal-bg-color: #161619;
  --mobile-menu-background: #08080A;
  --comment-background: #161619;
  --blockquote-background: #1E1E23;
  --placeholder-background: #1E1E23;
  --micro-menu-background: #161619;
  --bg-isolated-footer: #08080A;
  --consent-banner-background: #161619;
  --tts-background: #161619;

  --bg-950: #0D0D0F;
  --bg-900: #161619;
  --bg-800: #1E1E23;
  --bg-700: #25252C;
  --bg-600: #303038;
  --bg-500: #3D3D47;
  --bg-400: #4B4B57;
  --bg-300: #5C5C6B;
  --bg-200: #737385;
  --bg-100: #8E8E9F;
  --bg-50: #A8A8BA;
}

/* Pearl / Light Theme Mode */
:root[data-mode="light"],
:root[data-ui="light"],
:root[data-theme="pearl"] {
  --u-bg: #ECECEE;
  --u-surf: #FFFFFF;
  --u-raise: #F5F5F7;
  --u-sunk: #E0E0E4;
  --u-line: rgba(16, 16, 18, 0.11);
  --u-line2: rgba(16, 16, 18, 0.22);
  --u-hair: rgba(16, 16, 18, 0.06);

  --u-t1: #101012;
  --u-t2: #53535C;
  --u-t3: #85858D;

  --u-free: #2C7549;
  --u-free-soft: rgba(44, 117, 73, 0.10);

  --u-lock: #8A6008;
  --u-lock-soft: rgba(138, 96, 8, 0.10);

  --u-ember: #B8431B; /* Emberlib spark accent (light) */

  --u-ac: #09090B;
  --u-ac-btn: #18181B;
  --u-ac-fg: #FFFFFF;
  --u-ac-soft: rgba(0, 0, 0, 0.08);

  --input-color: #101012;
  --input-placeholder-color: #767680;
  --input-background: #F5F5F7;
  --input-fill: #53535C;
  --input-range-thumb: #09090B;
  --input-range-thumb-hover: #18181B;

  --button-secondary-background: #F5F5F7;
  --button-secondary-background-hover: #FFFFFF;
  --button-secondary-color: #101012;
  --button-secondary-color-hover: #09090B;
  --button-secondary-border: 1px solid rgba(16, 16, 18, 0.22);
  --button-secondary-border-hover: 1px solid #09090B;

  --toggle-background: #E0E0E4;
  --toggle-background-checked: #09090B;
  --toggle-background-hover: #F5F5F7;
  --toggle-color: #53535C;
  --toggle-color-hover: #101012;
  --toggle-color-checked: #FFFFFF;
  --toggle-color-checked-hover: #FFFFFF;
  --toggle-border: rgba(16, 16, 18, 0.22);
  --toggle-border-checked: #09090B;
  --toggle-border-hover: #09090B;
  --fg-inverted: #FFFFFF;

  --body-bg-color: #ECECEE;
  --site-bg-color: #ECECEE;
  --page-bg-color: #ECECEE;
  --main-background: #ECECEE;
  --card-bg-color: #FFFFFF;
  --card-footer-bg-color: #F5F5F7;
  --card-overlay-bg-color: #F5F5F7;
  --navigation-background: #E0E0E4;
  --navigation-submenu-background: #FFFFFF;
  --navigation-item-background-hover: #F5F5F7;
  --modal-bg-color: #FFFFFF;
  --mobile-menu-background: #E0E0E4;
  --comment-background: #FFFFFF;
  --blockquote-background: #F5F5F7;
  --placeholder-background: #ECECEE;
  --micro-menu-background: #FFFFFF;
  --bg-isolated-footer: #E0E0E4;
  --consent-banner-background: #FFFFFF;
  --tts-background: #FFFFFF;

  --bg-950: #FFFFFF;
  --bg-900: #F5F5F7;
  --bg-800: #ECECEE;
  --bg-700: #E0E0E4;
  --bg-600: #D2D2D8;
  --bg-500: #BEBEC6;
  --bg-400: #A8A8B2;
  --bg-300: #8E8E9A;
  --bg-200: #70707D;
  --bg-100: #50505D;
  --bg-50: #30303D;
}

@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    --u-bg: #ECECEE;
    --u-surf: #FFFFFF;
    --u-raise: #F5F5F7;
    --u-sunk: #E0E0E4;
    --u-line: rgba(16, 16, 18, 0.11);
    --u-line2: rgba(16, 16, 18, 0.22);
    --u-hair: rgba(16, 16, 18, 0.06);
    --u-t1: #101012;
    --u-t2: #53535C;
    --u-t3: #85858D;
    --u-free: #2C7549;
    --u-free-soft: rgba(44, 117, 73, 0.10);
    --u-lock: #8A6008;
    --u-lock-soft: rgba(138, 96, 8, 0.10);
    --u-ac: #09090B;
    --u-ac-btn: #18181B;
    --u-ac-fg: #FFFFFF;
    --u-ac-soft: rgba(0, 0, 0, 0.08);

    --input-color: #101012;
    --input-placeholder-color: #767680;
    --input-background: #F5F5F7;
    --input-fill: #53535C;
    --input-range-thumb: #09090B;
    --input-range-thumb-hover: #18181B;

    --button-secondary-background: #F5F5F7;
    --button-secondary-background-hover: #FFFFFF;
    --button-secondary-color: #101012;
    --button-secondary-color-hover: #09090B;
    --button-secondary-border: 1px solid rgba(16, 16, 18, 0.22);
    --button-secondary-border-hover: 1px solid #09090B;

    --toggle-background: #E0E0E4;
    --toggle-background-checked: #09090B;
    --toggle-background-hover: #F5F5F7;
    --toggle-color: #53535C;
    --toggle-color-hover: #101012;
    --toggle-color-checked: #FFFFFF;
    --toggle-color-checked-hover: #FFFFFF;
    --toggle-border: rgba(16, 16, 18, 0.22);
    --toggle-border-checked: #09090B;
    --toggle-border-hover: #09090B;
    --fg-inverted: #FFFFFF;
  }
}

/* =============================================================================
   2. GLOBAL BASE & RESET
   ============================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto !important;
  background-color: var(--u-bg);
  color: var(--u-t1);
}

body {
  margin: 0;
  padding: 0;
  scroll-behavior: auto !important;
  background: var(--u-bg) !important;
  color: var(--u-t1);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Eradicate parent background polygons, textures, and heavy shadows */
.site,
.site.background-texture,
.background-texture,
.main__background,
.polygon,
.polygon--main,
.polygon::before,
.polygon::after {
  background: var(--u-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.site.background-texture::before,
.site.background-texture::after,
.background-texture::before,
.background-texture::after {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-tap);
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--u-ac);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Container wrapper */
.neolune-wrap {
  max-width: var(--p-max);
  margin: 0 auto;
  padding: 0 var(--p-pad);
  width: 100%;
}

.neolune-screen-content {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* =============================================================================
   3. UNIVERSAL HIGH-CONTRAST MODAL ARCHITECTURE & CONTROLS
   ============================================================================= */

/* Universal Modal Backdrop & Surfaces */
.modal,
.dialog-modal,
.fictioneer-modal,
#formatting-modal,
#site-settings-modal,
#bbcodes-modal,
#login-modal,
#suggestions-modal,
#fictioneer-chapter-index-dialog,
.report-modal {
  color: var(--u-t1) !important;
}

.modal__wrapper,
.dialog-modal__wrapper,
.modal-wrapper {
  background: var(--u-surf) !important;
  color: var(--u-t1) !important;
  border: 1px solid var(--u-line2) !important;
  border-radius: var(--u-r-lg) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
}

/* Modal Headers & Headings */
.modal__title,
.modal__header h2,
.modal__header h3,
.dialog-modal h2,
.dialog-modal h3,
#formatting-modal h3,
#site-settings-modal h3 {
  color: var(--u-t1) !important;
  font-weight: 600 !important;
}

/* Labels across all settings & formatting dialogs */
.modal label,
.dialog-modal label,
.reader-settings label,
#formatting-modal label,
#site-settings-modal label,
.optrow > label,
.fictioneer-formatting-tool label {
  color: var(--u-t1) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Number inputs, Text inputs, and Range sliders in Dark & Light Modes */
.modal input[type="number"],
.modal input[type="text"],
.modal input[type="search"],
.dialog-modal input[type="number"],
.dialog-modal input[type="text"],
#formatting-modal input[type="number"],
#formatting-modal input[type="text"],
#site-settings-modal input[type="number"],
#site-settings-modal input[type="text"],
.reader-settings input[type="number"] {
  background: var(--u-sunk) !important;
  color: var(--u-t1) !important;
  border: 1px solid var(--u-line2) !important;
  border-radius: var(--u-r-sm) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  outline: none !important;
  padding: 6px 10px !important;
}

.modal input[type="number"]:focus,
.modal input[type="text"]:focus,
#formatting-modal input[type="number"]:focus,
#formatting-modal input[type="text"]:focus {
  border-color: var(--u-ac) !important;
  box-shadow: 0 0 0 2px var(--u-ac-soft) !important;
}

/* Select Dropdowns & Options (Eradicating Parent Theme's Hardcoded ) */
.modal select,
.dialog-modal select,
#formatting-modal select,
#site-settings-modal select,
.reader-settings select,
.neolune-select {
  background: var(--u-sunk) !important;
  color: var(--u-t1) !important;
  border: 1px solid var(--u-line2) !important;
  border-radius: var(--u-r-sm) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
}

.modal select:focus,
#formatting-modal select:focus {
  border-color: var(--u-ac) !important;
}

select option {
  background-color: var(--u-surf) !important;
  color: var(--u-t1) !important;
  font-weight: normal !important;
}

:root[data-mode="dark"] select option,
:root:not([data-mode="light"]) select option {
  background-color: #161619 !important;
  color: #F3F3F4 !important;
}

:root[data-mode="light"] select option {
  background-color: #FFFFFF !important;
  color: #101012 !important;
}

/* Stepper Buttons (- and + buttons in formatting tool) */
.font-stepper,
.font-color-stepper,
.stepper-btn,
.button--left,
.button--right,
#formatting-modal .button--left,
#formatting-modal .button--right {
  background: var(--u-raise) !important;
  color: var(--u-t1) !important;
  border: 1px solid var(--u-line2) !important;
  font-weight: 600 !important;
  transition: all var(--t-tap) !important;
}

.font-stepper:hover,
.font-color-stepper:hover,
.button--left:hover,
.button--right:hover {
  background: var(--u-surf) !important;
  color: var(--u-ac) !important;
  border-color: var(--u-ac) !important;
}

/* In-Chapter Font Resize Quick Buttons */
#decrease-font,
#reset-font,
#increase-font {
  background: var(--u-raise) !important;
  color: var(--u-t1) !important;
  border: 1px solid var(--u-line2) !important;
  border-radius: var(--u-r-sm) !important;
  font-weight: 600 !important;
  transition: all var(--t-tap) !important;
}

#decrease-font:hover,
#reset-font:hover,
#increase-font:hover {
  background: var(--u-surf) !important;
  color: var(--u-ac) !important;
  border-color: var(--u-ac) !important;
}

/* Fictioneer Chapter Formatting 7 Toggle Buttons */
.reader-settings__toggles {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 !important;
}

.reader-settings__toggle.toggle {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.reader-settings__toggle.toggle::before,
.reader-settings__toggle.toggle::after {
  content: none !important;
  display: none !important;
}

.reader-settings__toggle-icon[class] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--u-sunk) !important;
  color: var(--u-t2) !important;
  border: 1.5px solid var(--u-line2) !important;
  font-size: 11.5px !important;
  transition: all var(--t-tap) !important;
  box-sizing: border-box !important;
}

.reader-settings__toggle.toggle:hover .reader-settings__toggle-icon[class] {
  color: #FFFFFF !important;
  border-color: var(--u-ac) !important;
  background: var(--u-raise) !important;
}

.reader-settings__toggle.toggle[aria-checked="true"] .reader-settings__toggle-icon[class] {
  background: var(--u-ac) !important;
  color: var(--u-ac-fg, #0D0D0F) !important;
  border-color: var(--u-ac) !important;
  box-shadow: 0 0 8px var(--u-ac-soft) !important;
}

/* Comment Formatting Toolbar (Eradicating Opacity .3 Dimming) */
.fictioneer-comment-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 38px !important;
  padding: 0 8px !important;
  background: var(--u-raise) !important;
  border: 1px solid var(--u-line) !important;
  border-bottom: 0 !important;
  border-radius: var(--u-r-sm) var(--u-r-sm) 0 0 !important;
}

.fictioneer-comment-toolbar > :is(span, label) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 3px !important;
  color: var(--u-t2) !important;
  opacity: 0.85 !important;
  cursor: pointer !important;
  transition: all var(--t-tap) !important;
}

.fictioneer-comment-toolbar > :is(span, label):hover {
  color: var(--u-ac) !important;
  background: var(--u-surf) !important;
  opacity: 1 !important;
}

/* =============================================================================
   1.8.18 — EMBERLIB MONO DESIGN SYSTEM
   A restrained, neutral UI layer shared by Neolune and Fictioneer surfaces.
   ============================================================================= */
:root,
:root[data-mode="dark"],
:root[data-ui="dark"],
:root[data-theme="obsidian"] {
  --u-bg: #0f0f10;
  --u-surf: #151516;
  --u-raise: #1b1b1d;
  --u-sunk: #0a0a0b;
  --u-line: rgba(255, 255, 255, 0.085);
  --u-line2: rgba(255, 255, 255, 0.16);
  --u-hair: rgba(255, 255, 255, 0.045);
  --u-t1: #efeff0;
  --u-t2: #b2b2b6;
  --u-t3: #77777d;
  --u-free: #c6c6c9;
  --u-free-soft: rgba(255, 255, 255, 0.07);
  --u-lock: #9d9da3;
  --u-lock-soft: rgba(255, 255, 255, 0.045);
  --u-ember: #d8d8db;
  --u-ac: #efeff0;
  --u-ac-btn: #efeff0;
  --u-ac-fg: #111112;
  --u-ac-soft: rgba(255, 255, 255, 0.08);
  --u-r-sm: 7px;
  --u-r: 10px;
  --u-r-lg: 18px;
  --u-shadow-1: 0 1px 1px rgba(0, 0, 0, 0.18);
  --u-shadow-2: 0 14px 40px rgba(0, 0, 0, 0.22);
  --body-bg-color: var(--u-bg);
  --site-bg-color: var(--u-bg);
  --page-bg-color: var(--u-bg);
  --main-background: var(--u-bg);
  --card-bg-color: var(--u-surf);
  --card-footer-bg-color: var(--u-raise);
  --card-overlay-bg-color: var(--u-raise);
  --navigation-background: var(--u-sunk);
  --navigation-submenu-background: var(--u-surf);
  --navigation-item-background-hover: var(--u-raise);
  --modal-bg-color: var(--u-surf);
  --mobile-menu-background: var(--u-sunk);
  --comment-background: var(--u-surf);
  --blockquote-background: var(--u-raise);
  --placeholder-background: var(--u-raise);
  --micro-menu-background: var(--u-surf);
  --bg-isolated-footer: var(--u-sunk);
  --consent-banner-background: var(--u-surf);
  --tts-background: var(--u-surf);
}

:root[data-mode="light"],
:root[data-ui="light"],
:root[data-theme="pearl"] {
  --u-bg: #f1f1f0;
  --u-surf: #fbfbfa;
  --u-raise: #f6f6f5;
  --u-sunk: #e8e8e7;
  --u-line: rgba(18, 18, 19, 0.10);
  --u-line2: rgba(18, 18, 19, 0.18);
  --u-hair: rgba(18, 18, 19, 0.055);
  --u-t1: #171718;
  --u-t2: #5b5b60;
  --u-t3: #8b8b90;
  --u-free: #454549;
  --u-free-soft: rgba(0, 0, 0, 0.055);
  --u-lock: #707075;
  --u-lock-soft: rgba(0, 0, 0, 0.035);
  --u-ember: #333337;
  --u-ac: #171718;
  --u-ac-btn: #171718;
  --u-ac-fg: #fbfbfa;
  --u-ac-soft: rgba(0, 0, 0, 0.06);
  --u-shadow-1: 0 1px 1px rgba(0, 0, 0, 0.045);
  --u-shadow-2: 0 18px 45px rgba(0, 0, 0, 0.09);
  --body-bg-color: var(--u-bg);
  --site-bg-color: var(--u-bg);
  --page-bg-color: var(--u-bg);
  --main-background: var(--u-bg);
  --card-bg-color: var(--u-surf);
  --card-footer-bg-color: var(--u-raise);
  --card-overlay-bg-color: var(--u-raise);
  --navigation-background: var(--u-sunk);
  --navigation-submenu-background: var(--u-surf);
  --navigation-item-background-hover: var(--u-raise);
  --modal-bg-color: var(--u-surf);
  --mobile-menu-background: var(--u-sunk);
  --comment-background: var(--u-surf);
  --blockquote-background: var(--u-raise);
  --placeholder-background: var(--u-raise);
  --micro-menu-background: var(--u-surf);
  --bg-isolated-footer: var(--u-sunk);
  --consent-banner-background: var(--u-surf);
  --tts-background: var(--u-surf);
}

@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]):not([data-ui="dark"]) {
    --u-bg: #f1f1f0;
    --u-surf: #fbfbfa;
    --u-raise: #f6f6f5;
    --u-sunk: #e8e8e7;
    --u-line: rgba(18, 18, 19, 0.10);
    --u-line2: rgba(18, 18, 19, 0.18);
    --u-hair: rgba(18, 18, 19, 0.055);
    --u-t1: #171718;
    --u-t2: #5b5b60;
    --u-t3: #8b8b90;
    --u-free: #454549;
    --u-free-soft: rgba(0, 0, 0, 0.055);
    --u-lock: #707075;
    --u-lock-soft: rgba(0, 0, 0, 0.035);
    --u-ember: #333337;
    --u-ac: #171718;
    --u-ac-btn: #171718;
    --u-ac-fg: #fbfbfa;
    --u-ac-soft: rgba(0, 0, 0, 0.06);
  }
}

::selection {
  background: color-mix(in srgb, var(--u-t1) 18%, transparent);
  color: var(--u-t1);
}

/* =============================================================================
   1.8.22 — PEARL TRUE-NEUTRAL LIGHT MODE
   Brighter, untinted grayscale surfaces. Sepia remains the warm reading option.
   ============================================================================= */
:root[data-mode="light"],
:root[data-ui="light"],
:root[data-theme="pearl"] {
  --u-bg: #FAFAFA;
  --u-surf: #FFFFFF;
  --u-raise: #F5F5F5;
  --u-sunk: #EEEEEE;
  --u-line: rgba(0, 0, 0, 0.10);
  --u-line2: rgba(0, 0, 0, 0.18);
  --u-hair: rgba(0, 0, 0, 0.05);
  --u-t1: #171717;
  --u-t2: #575757;
  --u-t3: #888888;
  --u-free: #444444;
  --u-free-soft: rgba(0, 0, 0, 0.05);
  --u-lock: #707070;
  --u-lock-soft: rgba(0, 0, 0, 0.035);
  --u-ember: #333333;
  --u-ac: #171717;
  --u-ac-btn: #171717;
  --u-ac-fg: #FFFFFF;
  --u-ac-soft: rgba(0, 0, 0, 0.055);

  --input-color: #171717;
  --input-placeholder-color: #777777;
  --input-background: #FFFFFF;
  --input-fill: #575757;
  --input-range-thumb: #171717;
  --input-range-thumb-hover: #000000;

  --button-secondary-background: #FFFFFF;
  --button-secondary-background-hover: #F5F5F5;
  --button-secondary-color: #171717;
  --button-secondary-color-hover: #000000;
  --button-secondary-border: 1px solid rgba(0, 0, 0, 0.16);
  --button-secondary-border-hover: 1px solid rgba(0, 0, 0, 0.32);

  --toggle-background: #EDEDED;
  --toggle-background-checked: #171717;
  --toggle-background-hover: #F5F5F5;
  --toggle-color: #575757;
  --toggle-color-hover: #171717;
  --toggle-color-checked: #FFFFFF;
  --toggle-color-checked-hover: #FFFFFF;
  --toggle-border: rgba(0, 0, 0, 0.16);
  --toggle-border-checked: #171717;
  --toggle-border-hover: rgba(0, 0, 0, 0.32);
  --fg-inverted: #FFFFFF;

  --body-bg-color: #FAFAFA;
  --site-bg-color: #FAFAFA;
  --page-bg-color: #FAFAFA;
  --main-background: #FAFAFA;
  --card-bg-color: #FFFFFF;
  --card-footer-bg-color: #F5F5F5;
  --card-overlay-bg-color: #F5F5F5;
  --navigation-background: #FFFFFF;
  --navigation-submenu-background: #FFFFFF;
  --navigation-item-background-hover: #F5F5F5;
  --modal-bg-color: #FFFFFF;
  --mobile-menu-background: #FFFFFF;
  --comment-background: #FFFFFF;
  --blockquote-background: #F5F5F5;
  --placeholder-background: #F5F5F5;
  --micro-menu-background: #FFFFFF;
  --bg-isolated-footer: #F5F5F5;
  --consent-banner-background: #FFFFFF;
  --tts-background: #FFFFFF;

  --bg-950: #FFFFFF;
  --bg-900: #FAFAFA;
  --bg-800: #F5F5F5;
  --bg-700: #EEEEEE;
  --bg-600: #E5E5E5;
  --bg-500: #D4D4D4;
  --bg-400: #B8B8B8;
  --bg-300: #999999;
  --bg-200: #737373;
  --bg-100: #525252;
  --bg-50: #2F2F2F;
}

@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]):not([data-ui="dark"]) {
    --u-bg: #FAFAFA;
    --u-surf: #FFFFFF;
    --u-raise: #F5F5F5;
    --u-sunk: #EEEEEE;
    --u-line: rgba(0, 0, 0, 0.10);
    --u-line2: rgba(0, 0, 0, 0.18);
    --u-hair: rgba(0, 0, 0, 0.05);
    --u-t1: #171717;
    --u-t2: #575757;
    --u-t3: #888888;
    --u-free: #444444;
    --u-free-soft: rgba(0, 0, 0, 0.05);
    --u-lock: #707070;
    --u-lock-soft: rgba(0, 0, 0, 0.035);
    --u-ember: #333333;
    --u-ac: #171717;
    --u-ac-btn: #171717;
    --u-ac-fg: #FFFFFF;
    --u-ac-soft: rgba(0, 0, 0, 0.055);
    --body-bg-color: #FAFAFA;
    --site-bg-color: #FAFAFA;
    --page-bg-color: #FAFAFA;
    --main-background: #FAFAFA;
    --card-bg-color: #FFFFFF;
    --card-footer-bg-color: #F5F5F5;
    --card-overlay-bg-color: #F5F5F5;
    --navigation-background: #FFFFFF;
    --navigation-submenu-background: #FFFFFF;
    --navigation-item-background-hover: #F5F5F5;
    --modal-bg-color: #FFFFFF;
    --mobile-menu-background: #FFFFFF;
    --comment-background: #FFFFFF;
    --blockquote-background: #F5F5F5;
    --placeholder-background: #F5F5F5;
    --micro-menu-background: #FFFFFF;
    --bg-isolated-footer: #F5F5F5;
    --consent-banner-background: #FFFFFF;
    --tts-background: #FFFFFF;
  }
}