/*
 * Kulmi Pay design tokens. Load this first on any page using the new UI.
 * ui/theme.js sets <html data-theme="light|dark"> from the visitor's saved
 * choice, falling back to the OS setting. Without JavaScript the OS setting
 * applies directly. See ui/README.md.
 */
:root {
  --kp-ember: #F56E0F;
  --kp-ember-hover: #FF8126;
  --kp-on-ember: #141210;

  --kp-page: #FFFFFF;
  --kp-art-bg: #F6F1EC;
  --kp-art-strength: 1;
  --kp-text: #1A1A2E;
  --kp-muted: #6B6B80;
  --kp-field: #FFFFFF;
  --kp-field-line: #E6DED6;
  --kp-field-line-hover: #D5CBC1;
  --kp-link: #C2410C;
  --kp-divider: #EFE9E3;
  --kp-focus-ring: rgba(245, 110, 15, 0.22);
  --kp-danger: #B42318;
  --kp-danger-bg: #FEF3F2;
  --kp-info-bg: #FFF7F0;
  --kp-ok: #15803D;
  --kp-ok-bg: #ECFDF5;
  --kp-warn: #8A4B0B;
  --kp-warn-bg: #FFF8ED;            /* soft cream, with a hairline (--kp-warn-line) */
  --kp-warn-line: #F6E3C4;
  --kp-warn-edge: #E2B26A;          /* outlines and status dots */
  --kp-note-bg: #F8F7F5;            /* plain notes and info: quiet neutral */
  --kp-note-line: #EEECE8;
  --kp-panel: #FFFFFF;
  --kp-chart-1: #EA580C;   /* validated for both themes (dataviz check) */
  --kp-scroll: rgba(26, 26, 46, 0.18);
  --kp-popover: #FFFFFF;
  --kp-sidebar: #FBFAF8;
  --kp-sidebar-active: rgba(245, 110, 15, 0.09);
  --kp-option-hover: #F2F2F3;     /* cool neutral: never the warm page colour */
  --kp-row-hover: #F8F8F9;        /* table and list rows: lighter than the page */
  --kp-popover-shadow: 0 16px 36px -12px rgba(26, 26, 46, 0.22), 0 2px 6px rgba(26, 26, 46, 0.06);
  --kp-scroll-hover: rgba(26, 26, 46, 0.32);
  --kp-logo-light: block;
  --kp-logo-dark: none;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --kp-page: #141210;
  --kp-art-bg: #0E0C0B;
  --kp-art-strength: 1.25;
  --kp-text: #F5F5F4;
  --kp-muted: #A8A29E;
  --kp-field: #1C1916;
  --kp-field-line: rgba(255, 255, 255, 0.10);
  --kp-field-line-hover: rgba(255, 255, 255, 0.18);
  --kp-link: #FF9A4D;
  --kp-divider: rgba(255, 255, 255, 0.07);
  --kp-focus-ring: rgba(245, 110, 15, 0.30);
  --kp-danger: #FDA29B;
  --kp-danger-bg: rgba(240, 68, 56, 0.12);
  --kp-info-bg: rgba(245, 110, 15, 0.10);
  --kp-ok: #4ADE80;
  --kp-ok-bg: rgba(34, 197, 94, 0.12);
  --kp-warn: #FCD34D;
  --kp-warn-bg: rgba(245, 158, 11, 0.14);
  --kp-warn-line: transparent;
  --kp-warn-edge: #FCD34D;
  --kp-note-bg: rgba(255, 255, 255, 0.06);
  --kp-note-line: transparent;
  --kp-panel: #191614;
  --kp-scroll: rgba(255, 255, 255, 0.14);
  --kp-popover: #1F1B18;
  --kp-sidebar: #110F0E;
  --kp-sidebar-active: rgba(245, 110, 15, 0.14);
  --kp-option-hover: rgba(255, 255, 255, 0.06);
  --kp-row-hover: rgba(255, 255, 255, 0.035);
  --kp-popover-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  --kp-scroll-hover: rgba(255, 255, 255, 0.26);
  --kp-logo-light: none;
  --kp-logo-dark: block;
  color-scheme: dark;
}

/* No JavaScript: follow the OS directly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --kp-page: #141210;
    --kp-art-bg: #0E0C0B;
    --kp-art-strength: 1.25;
    --kp-text: #F5F5F4;
    --kp-muted: #A8A29E;
    --kp-field: #1C1916;
    --kp-field-line: rgba(255, 255, 255, 0.10);
    --kp-field-line-hover: rgba(255, 255, 255, 0.18);
    --kp-link: #FF9A4D;
    --kp-divider: rgba(255, 255, 255, 0.07);
    --kp-focus-ring: rgba(245, 110, 15, 0.30);
    --kp-danger: #FDA29B;
    --kp-danger-bg: rgba(240, 68, 56, 0.12);
    --kp-info-bg: rgba(245, 110, 15, 0.10);
    --kp-ok: #4ADE80;
    --kp-ok-bg: rgba(34, 197, 94, 0.12);
    --kp-warn: #FCD34D;
    --kp-warn-bg: rgba(245, 158, 11, 0.14);
    --kp-warn-line: transparent;
    --kp-warn-edge: #FCD34D;
    --kp-note-bg: rgba(255, 255, 255, 0.06);
    --kp-note-line: transparent;
    --kp-panel: #191614;
    --kp-scroll: rgba(255, 255, 255, 0.14);
    --kp-popover: #1F1B18;
    --kp-sidebar: #110F0E;
    --kp-sidebar-active: rgba(245, 110, 15, 0.14);
    --kp-option-hover: rgba(255, 255, 255, 0.06);
    --kp-row-hover: rgba(255, 255, 255, 0.035);
    --kp-popover-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
    --kp-scroll-hover: rgba(255, 255, 255, 0.26);
    --kp-logo-light: none;
    --kp-logo-dark: block;
    color-scheme: dark;
  }
}

/* ---------- scrollbar ----------
 * A thin pill with no arrows and no track.
 * Chrome and Safari use the -webkit- rules below, but Chrome ignores them
 * whenever scrollbar-color/scrollbar-width are set anywhere up the tree
 * (daisyUI sets scrollbar-color on :root), so those are reset to auto here.
 * Firefox has no -webkit- support and gets the standard thin scrollbar.
 */
@supports selector(::-webkit-scrollbar) {
  html.kp-ui, html.kp-ui * { scrollbar-color: auto; scrollbar-width: auto; }
}
@supports not selector(::-webkit-scrollbar) {
  html.kp-ui, html.kp-ui * { scrollbar-width: thin; scrollbar-color: var(--kp-scroll) transparent; }
}

html.kp-ui ::-webkit-scrollbar, html.kp-ui::-webkit-scrollbar { width: 10px; height: 10px; }
html.kp-ui ::-webkit-scrollbar-track, html.kp-ui::-webkit-scrollbar-track { background: transparent; }
html.kp-ui ::-webkit-scrollbar-button, html.kp-ui::-webkit-scrollbar-button { display: none; }
html.kp-ui ::-webkit-scrollbar-thumb, html.kp-ui::-webkit-scrollbar-thumb {
  background: var(--kp-scroll); border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}
html.kp-ui ::-webkit-scrollbar-thumb:hover, html.kp-ui::-webkit-scrollbar-thumb:hover { background-color: var(--kp-scroll-hover); }
html.kp-ui ::-webkit-scrollbar-corner, html.kp-ui::-webkit-scrollbar-corner { background: transparent; }

/* Visually hidden, still read by screen readers */
.kp-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; left: 0; top: 0; }