/*
  Palette — the only place hex values belong.
  Screens must use var(--color-*) from here.
*/
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-red: #b40e0e;

  --color-bg-page: #e8e9ec;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f4f5f7;
  --color-bg-subtle: #fafafb;
  --color-bg-night: #1a1a1a;
  --color-bg-inverse: var(--color-bg-night);
  --color-bg: var(--color-bg-page);
  --color-line: #e8e9ec;

  --color-brand: var(--color-red);
  --color-brand-strong: var(--color-black);
  --color-brand-soft: var(--color-white);

  --color-text: #111111;
  --color-text-secondary: #3a3b43;
  --color-text-muted: #6a6b73;
  --color-text-faint: #8a8b93;
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-red);
  --color-text-link-hover: var(--color-red);

  --color-border: #e0e1e6;
  --color-border-strong: #cfd0d6;
  --color-hover: #eceef3;
  --color-focus: var(--color-red);
  --color-focus-ring: var(--color-red);

  --color-success: #1a7f37;
  --color-success-soft: #e8f6ec;
  --color-warning: #a15c00;
  --color-warning-soft: #fdf6e3;
  --color-danger: var(--color-red);
  --color-danger-soft: #fceaea;
  --color-info: #1a56a8;
  --color-info-soft: #eef6ff;
  --color-move: #3a3a42;
  --color-move-soft: #ececf2;

  --color-chrome: var(--color-black);
  --color-chrome-hover: #111111;
  --color-chrome-active: #222222;
  --color-chrome-text: #d0d0d0;

  --color-overlay: var(--color-black);
  --color-shadow: var(--color-black);
  --color-scrollbar: #c5c6cc;
  --color-scrollbar-hover: #b8b9c0;

  --gradient-page: var(--color-bg-page);
}

html {
  background: var(--color-bg);
}

html.on-dark {
  color-scheme: dark;
}

html.on-dark,
[data-surface="dark"] {
  --color-bg-page: #121214;
  --color-bg-elevated: #1c1c1f;
  --color-bg-muted: #242428;
  --color-bg-subtle: #1c1c1f;
  --color-bg-night: #121214;
  --color-bg-inverse: #e8e9ec;
  --color-bg: #121214;
  --color-line: #2e2e34;

  --color-brand-strong: var(--color-white);
  --color-brand-soft: #1c1c1f;

  --color-text: #f2f2f4;
  --color-text-secondary: #d2d2d8;
  --color-text-muted: #9a9aa3;
  --color-text-faint: #9a9aa3;
  --color-text-inverse: #111111;

  --color-border: #2e2e34;
  --color-border-strong: #3c3c44;
  --color-hover: #2a2a32;

  --color-success: #8ee0ad;
  --color-success-soft: #1a3a24;
  --color-warning: #d4a04a;
  --color-warning-soft: #32280a;
  --color-danger: #f0a3a3;
  --color-danger-soft: #3a1818;
  --color-info: #9bb8f0;
  --color-info-soft: #1e2a3a;
  --color-move: #c9d0e8;
  --color-move-soft: #2a2d3a;

  --color-chrome-text: #d0d0d0;
  --color-scrollbar: #3c3c44;
  --color-scrollbar-hover: #4a4a54;
  --gradient-page: #121214;
}

html.on-dark body {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

html.on-dark .fin,
html.on-dark .fin__stage,
html.on-dark .fin__settings,
html.on-dark .trf,
html.on-dark .tm,
html.on-dark .cab,
html.on-dark .module,
html.on-dark .srv,
html.on-dark .fin-sub,
html.on-dark .cf,
html.on-dark .fa,
html.on-dark .fcal,
html.on-dark .fdoc,
html.on-dark .fctr,
html.on-dark .fset {
  background-color: var(--color-bg-elevated);
  color: var(--color-text);
}

html.on-dark .fin__title,
html.on-dark .fin__panel-title,
html.on-dark .module__title,
html.on-dark .srv__title,
html.on-dark .trf__title,
html.on-dark .tm__title,
html.on-dark .cab__title {
  color: var(--color-text);
}

html.on-dark .fin__tab {
  color: var(--color-text-muted);
}
html.on-dark .fin__tab:hover,
html.on-dark .fin__tab.is-active,
html.on-dark .fin__tab.is-locked:hover,
html.on-dark .fin__tab.is-locked.is-active {
  color: var(--color-text);
}
html.on-dark .fin__tabs {
  border-bottom-color: var(--color-border);
}

html.on-dark .fin__panel-lead,
html.on-dark .srv__sub,
html.on-dark .module__lead,
html.on-dark .cf__stat-label,
html.on-dark .cf__stat-company,
html.on-dark .cf__stat-hint,
html.on-dark .cf__widgets-title {
  color: var(--color-text-muted);
}

html.on-dark :is(
  .cf__stat,
  .cf__table-wrap,
  .cf__tx,
  .cf__cal-btn,
  .cf__cal-pop,
  .cf__tx-search,
  .cf__btn,
  .cf__debt-more-btn,
  .cf__debt-more-menu,
  .cf__modal-card,
  .fa__card,
  .fa__btn,
  .fa__modal-card,
  .fa__search,
  .fcal__card,
  .fcal__btn,
  .fcal__modal-card,
  .fcal__cal-btn,
  .fcal__cal-pop,
  .fdoc__card,
  .fdoc__btn,
  .fdoc__modal-card,
  .fdoc__cal-btn,
  .fdoc__cal-pop,
  .fctr__card,
  .fctr__btn,
  .fctr__modal-card,
  .fctr__cal-btn,
  .fctr__cal-pop,
  .fset__layout,
  .fset__nav,
  .fset__content,
  .fimp__card,
  .srv__card,
  .srv__btn,
  .srv__table,
  .srv__nav,
  .srv__db-col,
  .srv__db-health,
  .trf__card,
  .cab__card,
  .cab__btn,
  .cab__table,
  .cab__modal-card,
  .cab__fly,
  .tm__card,
  .tm__btn,
  .tm__table,
  .tm__modal-card,
  .tm__fly
) {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

html.on-dark .cf__stat--slot {
  background-color: var(--color-bg-page);
  border-color: var(--color-border-strong);
}

html.on-dark .cf__table thead th,
html.on-dark .srv__table th,
html.on-dark .cab__table th,
html.on-dark .tm__table th,
html.on-dark .fdoc__table th,
html.on-dark .fcal__table th,
html.on-dark .fctr__table th,
html.on-dark .fa__table th {
  background: var(--color-bg-page);
  color: var(--color-text-muted);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

html.on-dark .cf__table th,
html.on-dark .cf__table td,
html.on-dark .srv__table th,
html.on-dark .srv__table td {
  border-bottom-color: var(--color-border);
}

html.on-dark .cf__table th,
html.on-dark .srv__table td,
html.on-dark .srv__table th {
  color: var(--color-text);
}

html.on-dark .fin :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
html.on-dark .trf :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
html.on-dark .tm :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
html.on-dark .cab :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
html.on-dark .srv :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

html.on-dark .fin button,
html.on-dark .trf button,
html.on-dark .tm button,
html.on-dark .cab button,
html.on-dark .srv button {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

html.on-dark :is(
  .cf__btn--primary,
  .srv__btn--primary,
  .cab__btn--primary,
  .tm__btn--primary,
  .trf__btn--primary,
  .fdoc__btn--primary,
  .fa__btn--primary,
  .fcal__btn--primary,
  .fctr__btn--primary,
  .fset__btn--primary
) {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

html.on-dark .fin button.fin__tab,
html.on-dark .fin .fin__tab {
  background: transparent;
  color: var(--color-text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  box-shadow: none;
}

html.on-dark .fin .fin__tab:hover,
html.on-dark .fin .fin__tab.is-active,
html.on-dark .fin .fin__tab.is-locked:hover,
html.on-dark .fin .fin__tab.is-locked.is-active {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

html.on-dark .fin .fin__tab.is-active,
html.on-dark .fin .fin__tab.is-locked.is-active {
  border-bottom-color: var(--color-red);
}

html.on-dark .fin .cf__period {
  background: var(--color-bg-page);
  border-color: var(--color-border);
}

html.on-dark .fin .cf__period-btn,
html.on-dark .fin .cf__period-btn.is-on,
html.on-dark .fin .cf__period-btn:hover:not(:disabled),
html.on-dark .fin .cf__status-field.is-readonly .cf__period-btn:not(.is-on) {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  box-shadow: none;
}

html.on-dark .fin .cf__period-btn.is-on,
html.on-dark .fin .cf__period-btn:hover:not(:disabled) {
  background: var(--color-hover);
  color: var(--color-text);
}

html.on-dark .fin .cf__period-btn.is-on small {
  color: var(--color-text-muted);
}

html.on-dark .fin .cf__stat,
html.on-dark .fin .cf__stat.is-clickable,
html.on-dark .fin .cf__stat.is-clickable:hover,
html.on-dark .fin .cf__debt-item,
html.on-dark .fin .cf__debt-schedule-preview,
html.on-dark .fin .cf__debt-schedule-table-wrap {
  background: var(--color-bg-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.on-dark .fin .cf__stat.is-plan-locked {
  background: var(--color-bg-page);
  border-color: var(--color-border);
}

html.on-dark .fin .cf__debt-schedule-table th {
  background: var(--color-bg-page);
  color: var(--color-text-muted);
}

html.on-dark .fin .cf__field input,
html.on-dark .fin .cf__field select,
html.on-dark .fin .cf__field textarea,
html.on-dark .fin .cf__combo-trigger,
html.on-dark .fin .cf__combo-search,
html.on-dark .fin .cf__cal-field input,
html.on-dark .cf__modal-card input,
html.on-dark .cf__modal-card select,
html.on-dark .cf__modal-card textarea {
  background: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

html.on-dark .fin .cf__field.is-readonly input,
html.on-dark .fin .cf__field.is-readonly select,
html.on-dark .fin .cf__field.is-readonly textarea {
  background: var(--color-bg-page);
  color: var(--color-text-muted);
}

html.on-dark .fin .cf__badge--in,
html.on-dark .fcal__badge--in {
  background: var(--color-success-soft);
  color: var(--color-success);
}

html.on-dark .fin .cf__badge--out,
html.on-dark .fcal__badge--out {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

html.on-dark .fin .cf__badge--move,
html.on-dark .fcal__badge--move {
  background: var(--color-move-soft);
  color: var(--color-move);
}

html.on-dark .fin .cf__plan-icon {
  color: var(--color-warning);
}

html.on-dark .cf__amt.is-move {
  color: var(--color-move);
}

html.on-dark .fset__nav-btn,
html.on-dark .srv__nav-btn {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

html.on-dark .fset__nav-btn.is-active,
html.on-dark .srv__nav-btn.is-active {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

html.on-dark :is(
  .fin__veil,
  .fset__veil,
  .cf__tx-veil,
  .fa__veil,
  .fcal__veil,
  .fdoc__veil,
  .fctr__veil,
  .cab__veil
) {
  background: var(--color-bg-elevated);
}

html.on-dark :is(
  .cf__modal-card,
  .fa__modal-card,
  .fcal__modal-card,
  .fdoc__modal-card,
  .fctr__modal-card,
  .fimp__card,
  .cab__modal-card,
  .tm__modal-card
) {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

html.on-dark .cf__stat-value.is-neg,
html.on-dark .cf__stat-value.is-pos,
html.on-dark .cf__stat-value.is-warn {
  background: transparent;
}

html.on-dark .cf__table tbody tr.cf__tx-row:hover,
html.on-dark .cf__table tbody tr.cf__tx-row:hover td,
html.on-dark .cf__table tbody tr.cf__tx-row.is-confirm,
html.on-dark .cf__table tbody tr.cf__tx-row.is-confirm td,
html.on-dark .fa__table tbody tr:hover,
html.on-dark .fa__table tbody tr:hover td,
html.on-dark .fctr__table tbody tr:hover,
html.on-dark .fctr__table tbody tr:hover td,
html.on-dark .fdoc__table tbody tr:hover td {
  background: var(--color-hover);
}

html.on-dark .cf__cal-btn:hover,
html.on-dark .cf__stat.is-clickable:hover,
html.on-dark .cf__debt-more-btn:hover,
html.on-dark .cf__debt-more-item:hover,
html.on-dark .cf__combo-option:hover,
html.on-dark .fa__company:hover,
html.on-dark .fcal__cell:hover,
html.on-dark .fcal__item:hover,
html.on-dark .fcal__today-btn:hover,
html.on-dark .fdoc__cal-btn:hover,
html.on-dark .fdoc__link-result:hover,
html.on-dark .fctr__cal-btn:hover,
html.on-dark .fctr__more-item:hover,
html.on-dark .cab__fly-item:hover,
html.on-dark .tm__fly-item:hover,
html.on-dark .srv__db-item:hover,
html.on-dark .srv__db-item.is-on {
  background: var(--color-hover);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

html.on-dark .cf__combo-panel,
html.on-dark .cf__combo-search-wrap,
html.on-dark .cf__cal-pop,
html.on-dark .cf__debt-more-menu {
  background: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

html.on-dark .cf__combo-search-wrap {
  background: var(--color-bg-page);
  border-bottom-color: var(--color-border);
}

html.on-dark {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar) var(--color-bg-elevated);
}

html.on-dark *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.on-dark *::-webkit-scrollbar-track {
  background: var(--color-bg-elevated);
}

html.on-dark *::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar);
  border-radius: 999px;
}

html.on-dark *::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-hover);
}