/* =========================================================
   APP THEME VARIABLES
   Farben, Surfaces, Text, Borders und Bulma-Variable Overrides.
   ========================================================= */

/* =========================================================
   CSS VARIABLES - THEME SYSTEM
   ========================================================= */

:root {
  /* Base Sizing */
  --size-base: 1rem;
  --default-padding: calc(var(--size-base) * 1.5);

  /* Typography */
  --family-primary: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --family-sans-serif: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --family-secondary: "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* Component Dimensions */
  --navbar-height: 3.25rem;
  --navbar-item-h-padding: calc(var(--default-padding) * 0.75);
  --navbar-avatar-size: 1.75rem;

  --aside-width: calc(var(--size-base) * 14);
  --aside-mobile-width: calc(var(--size-base) * 15);
  --aside-icon-width: calc(var(--size-base) * 3);
  --aside-submenu-font-size: calc(var(--size-base) * 0.95);
  --aside-box-shadow: none;

  --footer-logo-height: calc(var(--size-base) * 2);

  /* Icons */
  --icon-update-mark-size: calc(var(--size-base) * 0.5);
  --icon-update-mark-color: #ffdd57;

  /* Bulma base hooks */
  --bulma-family-primary: var(--family-primary);
  --bulma-family-secondary: var(--family-secondary);
  --bulma-body-family: var(--family-sans-serif);
  --bulma-body-background-color: var(--body-background-color);
  --bulma-body-color: var(--text-primary);
  --bulma-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  --bulma-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --bulma-dropdown-content-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  --bulma-hr-height: var(--hr-height);

  /* Bulma corner radius */
  --bulma-radius-small: 2px;
  --bulma-radius: 3px;
  --bulma-radius-medium: 4px;
  --bulma-radius-large: 5px;
  --bulma-radius-rounded: 9999px;

  /* Bulma shadwo more flat */
  --bulma-box-shadow: none;
  --bulma-card-shadow: none;
  --bulma-dropdown-content-shadow: 0 4px 10px rgba(0,0,0,.18);

  color-scheme: dark;
  scrollbar-gutter: stable;
}

/* =========================================================
   DARK THEME (VS CODE DARK+)
   ========================================================= */
html:not([data-theme]),
html[data-theme="dark"] {
  color-scheme: dark;

  /* Base */
  --base-color: #1e1e1e;
  --base-color-light: rgba(255, 255, 255, 0.06);

  /* Surfaces */
  --body-background-color: #1e1e1e; /* VS Code editor bg */
  --surface-card: #252526; /* panels/cards */
  --surface-elevated: #2d2d2d; /* hover/raised */

  /* Aside (sidebar) - VS Code */
  --aside-background-color: #252526; /* side bar */
  --aside-tools-background-color: #2d2d2d; /* top strip in sidebar */
  --aside-tools-color: #d4d4d4;

  /* Navbar - VS Code top bar */
  --navbar-background-color: #252526;
  --navbar-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  --navbar-input-color: #d4d4d4;
  --navbar-input-placeholder-color: #808080;
  --navbar-divider-border: 1px solid rgba(255, 255, 255, 0.08);

  /* Borders */
  --border-subtle-color: rgba(255, 255, 255, 0.1);
  --border-muted-color: rgba(255, 255, 255, 0.08);
  --light-border: 1px solid var(--border-subtle-color);
  --hr-height: 1px;

  /* Bulma form hooks / keep component patches thin */
  --bulma-input-shadow: none;
  --bulma-input-placeholder-color: var(--text-tertiary);
  --bulma-input-icon-color: var(--text-secondary);
  --bulma-input-icon-hover-color: var(--text-primary);
  --bulma-input-icon-focus-color: var(--bulma-primary);
  --bulma-input-focus-h: var(--bulma-primary-h);
  --bulma-input-focus-s: var(--bulma-primary-s);
  --bulma-input-focus-l: var(--bulma-primary-l);
  --bulma-input-focus-shadow-alpha: 0;

  /* Text */
  --text-primary: #d4d4d4; /* VS Code foreground */
  --text-secondary: #9da1a6; /* softer */
  --text-tertiary: #808080; /* muted */

  /* Accent + status (optional, but nice in VS Code style) */
  --icon-update-mark-color: #4fc1ff; /* VS Code blue-ish */

  /* Bulma menu overrides */
  --bulma-menu-item-hover-background-color: #2a2d2e; /* selection/hover */
  /*--bulma-menu-item-hover-background-color:rgb(30, 30, 30);*/
  --bulma-menu-item-hover-color: #ffffff;
  --bulma-menu-label-color: #c5c5c5;

  /* Primary Color */
  --bulma-primary-h: 102;
  --bulma-primary-s: 56%;
  --bulma-primary-l: 41%;
  --bulma-primary: #46a52d;
  --bulma-primary-invert: #ffffff;
  --bulma-primary-light: #5fc93f;
  --bulma-primary-dark: #3a8a26;

  /* Bulma global accent hooks: verhindert Rückfall auf Bulma-Link-Blau */
  --bulma-link-h: var(--bulma-primary-h);
  --bulma-link-s: var(--bulma-primary-s);
  --bulma-link-l: var(--bulma-primary-l);
  --bulma-link: var(--bulma-primary);
  --bulma-link-text: var(--bulma-primary);
  --bulma-link-focus-border: var(--bulma-primary);
  --bulma-focus-h: var(--bulma-primary-h);
  --bulma-focus-s: var(--bulma-primary-s);
  --bulma-focus-l: var(--bulma-primary-l);

  /* Bulma .is-light in dark theme */
  --bulma-light-h: 0;
  --bulma-light-s: 0%;
  --bulma-light-l: 18%;
  --bulma-light-invert-l: 83%;
  --bulma-light: rgba(255, 255, 255, 0.05);
  --bulma-light-invert: var(--text-primary);

  /* INFO — gedämpftes VS Code Blau (kein Neon) */
  --bulma-info-h: 204;
  --bulma-info-s: 86%;
  --bulma-info-l: 45%;
  --bulma-info: #1d8fbf;
  --bulma-info-invert: #ffffff;
  --bulma-info-light: rgba(29, 143, 191, 0.13);
  --bulma-info-dark: #136a8e;

  /* SUCCESS — etwas dunkler, weniger gesättigt */
  --bulma-success-h: 122;
  --bulma-success-s: 33%;
  --bulma-success-l: 40%;
  --bulma-success: #5a8a47;
  --bulma-success-invert: #ffffff;
  --bulma-success-light: rgba(90, 138, 71, 0.13);
  --bulma-success-dark: #3e6130;

  /* WARNING — warmgold statt hellgelb */
  --bulma-warning-h: 38;
  --bulma-warning-s: 65%;
  --bulma-warning-l: 52%;
  --bulma-warning: #c9a24e;
  --bulma-warning-invert: #000000;
  --bulma-warning-light: rgba(201, 162, 78, 0.13);
  --bulma-warning-dark: #a07a2f;

  /* DANGER — tieferes Rot, kein Knallrot */
  --bulma-danger-h: 0;
  --bulma-danger-s: 55%;
  --bulma-danger-l: 48%;
  --bulma-danger: #c94040;
  --bulma-danger-invert: #ffffff;
  --bulma-danger-light: rgba(201, 64, 64, 0.13);
  --bulma-danger-dark: #9e2f2f;

  /* Bulma scheme + generic color hooks */
  --bulma-scheme-h: 0;
  --bulma-scheme-s: 0%;
  --bulma-scheme-main-l: 12%;
  --bulma-scheme-main-bis-l: 15%;
  --bulma-scheme-main-ter-l: 18%;
  --bulma-background-l: 18%;
  --bulma-border-l: 23%;
  --bulma-border-weak-l: 18%;
  --bulma-text-l: 83%;
  --bulma-text-strong-l: 83%;
  --bulma-text-weak-l: 50%;
  --bulma-text-title-l: 83%;

  --bulma-body-background-color: var(--body-background-color);
  --bulma-body-color: var(--text-primary);
  --bulma-text: var(--text-primary);
  --bulma-text-strong: var(--text-primary);
  --bulma-text-weak: var(--text-tertiary);
  --bulma-background: var(--surface-elevated);
  --bulma-border: var(--border-subtle-color);
  --bulma-border-weak: var(--border-muted-color);

  /* Bulma component hooks */
  --bulma-box-background-color: var(--surface-card);
  --bulma-box-color: var(--text-primary);
  --bulma-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

  --bulma-card-background-color: var(--surface-card);
  --bulma-card-color: var(--text-primary);
  --bulma-card-header-background-color: var(--surface-card);
  --bulma-card-header-color: var(--text-primary);
  --bulma-card-header-shadow: none;
  --bulma-card-content-background-color: transparent;

  /* Tables - VS Code / Tabulator aligned */
  --bulma-table-background-color: var(--surface-card);
  --bulma-table-color: var(--text-primary);

  --bulma-table-cell-heading-color: var(--text-secondary);
  --bulma-table-cell-border-color: var(--border-muted-color);
  --bulma-table-cell-border-style: solid;
  --bulma-table-cell-border-width: 0 0 1px;
  --bulma-table-cell-padding: 0.42rem 0.65rem;

  --bulma-table-head-background-color: #2d2d2d;
  --bulma-table-head-cell-color: var(--text-secondary);
  --bulma-table-head-cell-border-width: 0 0 1px;

  --bulma-table-body-background-color: transparent;

  --bulma-table-foot-background-color: #2d2d2d;
  --bulma-table-foot-cell-color: var(--text-secondary);
  --bulma-table-foot-cell-border-width: 1px 0 0;

  --bulma-table-row-hover-background-color: #2a2d2e;
  --bulma-table-row-active-background-color: rgba(70, 165, 45, 0.28);
  --bulma-table-row-active-color: var(--text-primary);

  --bulma-table-striped-row-even-background-color: rgba(255, 255, 255, 0.025);
  --bulma-table-striped-row-even-hover-background-color: #2a2d2e;

  --bulma-title-color: var(--text-primary);
  --bulma-subtitle-color: var(--text-primary);
  --bulma-label-color: var(--text-primary);

  /* Forms: Bulma 1.x Variablen */
  --bulma-input-h: 0;
  --bulma-input-s: 0%;
  --bulma-input-background-l: 15.7%; /* #282828 */
  --bulma-input-color-l: 83.1%; /* #d4d4d4 */
  --bulma-input-border-l: 26%;
  --bulma-input-border-color: rgba(255, 255, 255, 0.16);
  --bulma-input-placeholder-color: var(--text-tertiary);
  --bulma-input-icon-color: #777b82;
  --bulma-input-icon-hover-color: var(--text-secondary);
  --bulma-input-icon-focus-color: var(--bulma-primary);
  --bulma-input-disabled-background-color: #262626;
  --bulma-input-disabled-border-color: rgba(255, 255, 255, 0.09);
  --bulma-input-disabled-color: #777b82;
  --bulma-input-disabled-placeholder-color: rgba(119, 123, 130, 0.76);
  --bulma-input-arrow: var(--bulma-primary);

  --bulma-button-disabled-background-color: #242424;
  --bulma-button-disabled-border-color: rgba(255, 255, 255, 0.09);
  --bulma-button-disabled-opacity: 0.65;

  /* Buttons: normale .button Basis */
  --bulma-button-h: 0;
  --bulma-button-s: 0%;
  --bulma-button-background-l: 15%; /* ca. #2e2e2e */
  --bulma-button-background-l-delta: 0%;
  --bulma-button-color-l: 83%;
  --bulma-button-border-l: 26%;
  --bulma-button-border-color: rgba(255, 255, 255, 0.14);

  --bulma-button-hover-background-l-delta: 3%;
  --bulma-button-hover-border-l-delta: 8%;
  --bulma-button-hover-color-l-delta: 0%;

  --bulma-button-active-background-l-delta: 1%;
  --bulma-button-active-border-l-delta: 12%;
  --bulma-button-active-color-l-delta: 0%;

  --bulma-button-focus-border-color: var(--bulma-primary);
  --bulma-button-focus-box-shadow-size: 0 0 0 0.125em;
  --bulma-button-focus-box-shadow-color: rgba(70, 165, 45, 0.25);

  --bulma-dropdown-content-background-color: var(--surface-elevated);
  --bulma-dropdown-item-background-l: 18%;
  --bulma-dropdown-item-color-l: 83%;
  --bulma-dropdown-item-hover-background-l-delta: -3%;
  --bulma-dropdown-divider-background-color: var(--border-subtle-color);

  --bulma-message-background-l: 15%;
  --bulma-message-border-l: 23%;
  --bulma-message-color-l: 83%;
  --bulma-message-body-color: var(--text-primary);
  --bulma-message-header-background-l: 18%;
  --bulma-message-header-color-l: 83%;

  --bulma-notification-background-l: 15%;
  --bulma-notification-color-l: 83%;
  --bulma-notification-code-background-color: var(--surface-elevated);

  --bulma-tabs-border-bottom-color: var(--border-subtle-color);
  --bulma-tabs-link-color: var(--text-secondary);
  --bulma-tabs-link-hover-color: var(--text-primary);
  --bulma-tabs-link-hover-border-bottom-color: rgba(255, 255, 255, 0.18);
  --bulma-tabs-link-active-color: var(--text-primary);
  --bulma-tabs-link-active-border-bottom-color: var(--bulma-primary);

  --bulma-breadcrumb-item-color: var(--text-secondary);
  --bulma-breadcrumb-item-hover-color: var(--text-primary);
  --bulma-breadcrumb-item-active-color: var(--text-primary);
  --bulma-breadcrumb-item-separator-color: var(--border-subtle-color);

  --bulma-pagination-color: var(--text-primary);
  --bulma-pagination-background-color: var(--surface-elevated);
  --bulma-pagination-border-color: var(--border-subtle-color);
  --bulma-pagination-hover-color: var(--text-primary);
  --bulma-pagination-hover-background-color: var(--surface-card);
  --bulma-pagination-hover-border-color: var(--border-subtle-color);
  --bulma-pagination-current-background-color: var(--icon-update-mark-color);
  --bulma-pagination-current-border-color: var(--icon-update-mark-color);
  --bulma-pagination-current-color: #111;
  --bulma-pagination-item-l: 18%;
  --bulma-pagination-item-color-l: 83%;
  --bulma-pagination-item-border-l: 23%;

  --bulma-panel-shadow: none;
  --bulma-panel-block-color: var(--text-primary);
  --bulma-panel-block-hover-background-color: var(--surface-elevated);

  --bulma-hr-background-color: var(--border-subtle-color);
  --bulma-hr-height: var(--hr-height);
}

/* =========================================================
      LIGHT THEME (VS CODE LIGHT+)
      ========================================================= */
html[data-theme="light"] {
  color-scheme: light;

  /* Base */
  --base-color: #ffffff;
  --base-color-light: rgba(0, 0, 0, 0.06);

  /* Surfaces */
  --body-background-color: #ffffff; /* VS Code editor bg */
  --surface-card: #f3f3f3; /* panels */
  --surface-elevated: #eaeaea; /* hover/raised */

  /* Aside (sidebar) - VS Code */
  --aside-background-color: #f3f3f3;
  --aside-tools-background-color: #eaeaea;
  --aside-tools-color: #1e1e1e;

  /* Navbar */
  --navbar-background-color: #f3f3f3;
  --navbar-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  --navbar-input-color: #1e1e1e;
  --navbar-input-placeholder-color: rgba(30, 30, 30, 0.45);
  --navbar-divider-border: 1px solid rgba(0, 0, 0, 0.1);

  /* Borders */
  --border-subtle-color: rgba(0, 0, 0, 0.1);
  --border-muted-color: rgba(0, 0, 0, 0.08);
  --light-border: 1px solid var(--border-subtle-color);
  --hr-height: 1px;

  /* Bulma form hooks / keep component patches thin */
  --bulma-input-shadow: none;
  --bulma-input-placeholder-color: var(--text-tertiary);
  --bulma-input-icon-color: var(--text-secondary);
  --bulma-input-icon-hover-color: var(--text-primary);
  --bulma-input-icon-focus-color: var(--bulma-primary);
  --bulma-input-focus-h: var(--bulma-primary-h);
  --bulma-input-focus-s: var(--bulma-primary-s);
  --bulma-input-focus-l: var(--bulma-primary-l);
  --bulma-input-focus-shadow-alpha: 0;

  /* Text */
  --text-primary: #1e1e1e;
  --text-secondary: #4d4d4d;
  --text-tertiary: #6f6f6f;

  /* Accent */
  --icon-update-mark-color: #007acc; /* VS Code primary blue */

  /* Bulma menu overrides */
  --bulma-menu-item-hover-background-color: #e1e1e1;
  --bulma-menu-item-hover-color: #1e1e1e;
  --bulma-menu-label-color: #4d4d4d;

  /* Primary Color */
  --bulma-primary-h: 102;
  --bulma-primary-s: 56%;
  --bulma-primary-l: 41%;
  --bulma-primary: #46a52d;
  --bulma-primary-invert: #ffffff;
  --bulma-primary-light: #5fc93f;
  --bulma-primary-dark: #3a8a26;

  /* Bulma global accent hooks: verhindert Rückfall auf Bulma-Link-Blau */
  --bulma-link-h: var(--bulma-primary-h);
  --bulma-link-s: var(--bulma-primary-s);
  --bulma-link-l: var(--bulma-primary-l);
  --bulma-link: var(--bulma-primary);
  --bulma-link-text: var(--bulma-primary);
  --bulma-link-focus-border: var(--bulma-primary);
  --bulma-focus-h: var(--bulma-primary-h);
  --bulma-focus-s: var(--bulma-primary-s);
  --bulma-focus-l: var(--bulma-primary-l);

  /* Bulma .is-light in light theme */
  --bulma-light-h: 0;
  --bulma-light-s: 0%;
  --bulma-light-l: 92%;
  --bulma-light-invert-l: 12%;
  --bulma-light: rgba(0, 0, 0, 0.05);
  --bulma-light-invert: var(--text-primary);

  /* Bulma scheme + generic color hooks */
  --bulma-scheme-h: 0;
  --bulma-scheme-s: 0%;
  --bulma-scheme-main-l: 100%;
  --bulma-scheme-main-bis-l: 95%;
  --bulma-scheme-main-ter-l: 92%;
  --bulma-background-l: 92%;
  --bulma-border-l: 84%;
  --bulma-border-weak-l: 90%;
  --bulma-text-l: 12%;
  --bulma-text-strong-l: 12%;
  --bulma-text-weak-l: 44%;
  --bulma-text-title-l: 12%;

  --bulma-body-background-color: var(--body-background-color);
  --bulma-body-color: var(--text-primary);
  --bulma-text: var(--text-primary);
  --bulma-text-strong: var(--text-primary);
  --bulma-text-weak: var(--text-tertiary);
  --bulma-background: var(--surface-elevated);
  --bulma-border: var(--border-subtle-color);
  --bulma-border-weak: var(--border-muted-color);

  /* Bulma component hooks */
  --bulma-box-background-color: var(--surface-card);
  --bulma-box-color: var(--text-primary);
  --bulma-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

  --bulma-card-background-color: var(--surface-card);
  --bulma-card-color: var(--text-primary);
  --bulma-card-header-background-color: var(--surface-card);
  --bulma-card-header-color: var(--text-primary);
  --bulma-card-header-shadow: none;
  --bulma-card-content-background-color: transparent;

  /* Tables - VS Code / Tabulator aligned */
  --bulma-table-background-color: var(--surface-card);
  --bulma-table-color: var(--text-primary);

  --bulma-table-cell-heading-color: var(--text-secondary);
  --bulma-table-cell-border-color: var(--border-muted-color);
  --bulma-table-cell-border-style: solid;
  --bulma-table-cell-border-width: 0 0 1px;
  --bulma-table-cell-padding: 0.42rem 0.65rem;

  --bulma-table-head-background-color: #eaeaea;
  --bulma-table-head-cell-color: var(--text-secondary);
  --bulma-table-head-cell-border-width: 0 0 1px;

  --bulma-table-body-background-color: transparent;

  --bulma-table-foot-background-color: #eaeaea;
  --bulma-table-foot-cell-color: var(--text-secondary);
  --bulma-table-foot-cell-border-width: 1px 0 0;

  --bulma-table-row-hover-background-color: #e8f2e4;
  --bulma-table-row-active-background-color: rgba(70, 165, 45, 0.22);
  --bulma-table-row-active-color: var(--text-primary);

  --bulma-table-striped-row-even-background-color: rgba(0, 0, 0, 0.025);
  --bulma-table-striped-row-even-hover-background-color: #e8f2e4;

  --bulma-title-color: var(--text-primary);
  --bulma-subtitle-color: var(--text-primary);
  --bulma-label-color: var(--text-primary);

  /* Forms: Bulma 1.x Variablen */
  --bulma-input-h: 0;
  --bulma-input-s: 0%;
  --bulma-input-background-l: 98.4%; /* #fbfbfb */
  --bulma-input-color-l: 12%;
  --bulma-input-border-l: 82%;
  --bulma-input-border-color: rgba(0, 0, 0, 0.18);
  --bulma-input-placeholder-color: var(--text-tertiary);
  --bulma-input-icon-color: rgba(30, 30, 30, 0.48);
  --bulma-input-icon-hover-color: var(--text-secondary);
  --bulma-input-icon-focus-color: var(--bulma-primary);
  --bulma-input-disabled-background-color: #eeeeee;
  --bulma-input-disabled-border-color: rgba(0, 0, 0, 0.13);
  --bulma-input-disabled-color: rgba(30, 30, 30, 0.48);
  --bulma-input-disabled-placeholder-color: rgba(30, 30, 30, 0.34);
  --bulma-input-arrow: var(--bulma-primary);

  --bulma-button-disabled-background-color: rgba(0, 0, 0, 0.075);
  --bulma-button-disabled-border-color: rgba(0, 0, 0, 0.1);
  --bulma-button-disabled-opacity: 0.65;

  /* Buttons: normale .button Basis */
  --bulma-button-h: 0;
  --bulma-button-s: 0%;
  --bulma-button-background-l: 96%;
  --bulma-button-background-l-delta: 0%;
  --bulma-button-color-l: 12%;
  --bulma-button-border-l: 82%;
  --bulma-button-border-color: rgba(0, 0, 0, 0.14);

  --bulma-button-hover-background-l-delta: -3%;
  --bulma-button-hover-border-l-delta: -8%;
  --bulma-button-hover-color-l-delta: 0%;

  --bulma-button-active-background-l-delta: -5%;
  --bulma-button-active-border-l-delta: -12%;
  --bulma-button-active-color-l-delta: 0%;

  --bulma-button-focus-border-color: var(--bulma-primary);
  --bulma-button-focus-box-shadow-size: 0 0 0 0.125em;
  --bulma-button-focus-box-shadow-color: rgba(70, 165, 45, 0.25);

  --bulma-dropdown-content-background-color: var(--surface-elevated);
  --bulma-dropdown-item-background-l: 92%;
  --bulma-dropdown-item-color-l: 12%;
  --bulma-dropdown-item-hover-background-l-delta: -3%;
  --bulma-dropdown-divider-background-color: var(--border-subtle-color);

  --bulma-message-background-l: 95%;
  --bulma-message-border-l: 84%;
  --bulma-message-color-l: 12%;
  --bulma-message-body-color: var(--text-primary);
  --bulma-message-header-background-l: 92%;
  --bulma-message-header-color-l: 12%;

  --bulma-notification-background-l: 95%;
  --bulma-notification-color-l: 12%;
  --bulma-notification-code-background-color: var(--surface-elevated);

  --bulma-tabs-border-bottom-color: var(--border-subtle-color);
  --bulma-tabs-link-color: var(--text-secondary);
  --bulma-tabs-link-hover-color: var(--text-primary);
  --bulma-tabs-link-hover-border-bottom-color: rgba(0, 0, 0, 0.18);
  --bulma-tabs-link-active-color: var(--text-primary);
  --bulma-tabs-link-active-border-bottom-color: var(--bulma-primary);

  --bulma-breadcrumb-item-color: var(--text-secondary);
  --bulma-breadcrumb-item-hover-color: var(--text-primary);
  --bulma-breadcrumb-item-active-color: var(--text-primary);
  --bulma-breadcrumb-item-separator-color: var(--border-subtle-color);

  --bulma-pagination-color: var(--text-primary);
  --bulma-pagination-background-color: var(--surface-elevated);
  --bulma-pagination-border-color: var(--border-subtle-color);
  --bulma-pagination-hover-color: var(--text-primary);
  --bulma-pagination-hover-background-color: var(--surface-card);
  --bulma-pagination-hover-border-color: var(--border-subtle-color);
  --bulma-pagination-current-background-color: var(--icon-update-mark-color);
  --bulma-pagination-current-border-color: var(--icon-update-mark-color);
  --bulma-pagination-current-color: #fff;
  --bulma-pagination-item-l: 92%;
  --bulma-pagination-item-color-l: 12%;
  --bulma-pagination-item-border-l: 84%;

  --bulma-panel-shadow: none;
  --bulma-panel-block-color: var(--text-primary);
  --bulma-panel-block-hover-background-color: var(--surface-elevated);

  --bulma-hr-background-color: var(--border-subtle-color);
  --bulma-hr-height: var(--hr-height);
}

html[data-theme="light"] body {
  background: var(--body-background-color);
  color: var(--text-primary);
}

/* =========================================================
   BULMA COMPONENT VARIABLE HOOKS
   Bulma setzt viele Component-Variablen direkt auf .input/.select/.tabs.
   Darum müssen diese Werte ebenfalls auf dem Component-Selector stehen,
   nicht nur auf html[data-theme].
   ========================================================= */

html:not([data-theme]) .input,
html:not([data-theme]) .textarea,
html:not([data-theme]) .select,
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select {
  --bulma-input-h: 0;
  --bulma-input-s: 0%;
  --bulma-input-background-l: 15.7%; /* #282828 */
  --bulma-input-color-l: 83.1%; /* #d4d4d4 */
  --bulma-input-border-l: 26%;
  --bulma-input-border-color: rgba(255, 255, 255, 0.16);
  --bulma-input-placeholder-color: var(--text-tertiary);
  --bulma-input-icon-color: #777b82;
  --bulma-input-icon-hover-color: var(--text-secondary);
  --bulma-input-icon-focus-color: var(--bulma-primary);
  --bulma-input-focus-h: var(--bulma-primary-h);
  --bulma-input-focus-s: var(--bulma-primary-s);
  --bulma-input-focus-l: var(--bulma-primary-l);
  --bulma-input-focus-shadow-alpha: 0;
  --bulma-input-disabled-background-color: #262626;
  --bulma-input-disabled-border-color: rgba(255, 255, 255, 0.09);
  --bulma-input-disabled-color: #777b82;
  --bulma-input-disabled-placeholder-color: rgba(119, 123, 130, 0.76);
  --bulma-input-arrow: var(--bulma-primary);
}

html[data-theme="light"] .input,
html[data-theme="light"] .textarea,
html[data-theme="light"] .select {
  --bulma-input-h: 0;
  --bulma-input-s: 0%;
  --bulma-input-background-l: 98.4%; /* #fbfbfb */
  --bulma-input-color-l: 12%;
  --bulma-input-border-l: 82%;
  --bulma-input-border-color: rgba(0, 0, 0, 0.18);
  --bulma-input-placeholder-color: var(--text-tertiary);
  --bulma-input-icon-color: rgba(30, 30, 30, 0.48);
  --bulma-input-icon-hover-color: var(--text-secondary);
  --bulma-input-icon-focus-color: var(--bulma-primary);
  --bulma-input-focus-h: var(--bulma-primary-h);
  --bulma-input-focus-s: var(--bulma-primary-s);
  --bulma-input-focus-l: var(--bulma-primary-l);
  --bulma-input-focus-shadow-alpha: 0;
  --bulma-input-disabled-background-color: #eeeeee;
  --bulma-input-disabled-border-color: rgba(0, 0, 0, 0.13);
  --bulma-input-disabled-color: rgba(30, 30, 30, 0.48);
  --bulma-input-disabled-placeholder-color: rgba(30, 30, 30, 0.34);
  --bulma-input-arrow: var(--bulma-primary);
}

html:not([data-theme]) .tabs,
html[data-theme="dark"] .tabs {
  --bulma-tabs-border-bottom-color: var(--border-subtle-color);
  --bulma-tabs-link-color: var(--text-secondary);
  --bulma-tabs-link-hover-color: var(--text-primary);
  --bulma-tabs-link-hover-border-bottom-color: rgba(255, 255, 255, 0.18);
  --bulma-tabs-link-active-color: var(--bulma-primary);
  --bulma-tabs-link-active-border-bottom-color: var(--bulma-primary);
}

html[data-theme="light"] .tabs {
  --bulma-tabs-border-bottom-color: var(--border-subtle-color);
  --bulma-tabs-link-color: var(--text-secondary);
  --bulma-tabs-link-hover-color: var(--text-primary);
  --bulma-tabs-link-hover-border-bottom-color: rgba(0, 0, 0, 0.18);
  --bulma-tabs-link-active-color: var(--bulma-primary);
  --bulma-tabs-link-active-border-bottom-color: var(--bulma-primary);
}

/* =========================================================
   BUTTON COMPONENT VARIABLE HOOKS
   Nur normale .button, keine Bulma-Farbmodifier.
   ========================================================= */

   html:not([data-theme]) .button:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-light):not(.is-dark):not(.is-text):not(.is-ghost),
   html[data-theme="dark"] .button:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-light):not(.is-dark):not(.is-text):not(.is-ghost) {
     --bulma-button-h: 0;
     --bulma-button-s: 0%;
     --bulma-button-background-l: 15%;
     --bulma-button-background-l-delta: 0%;
     --bulma-button-color-l: 83%;
     --bulma-button-border-l: 26%;
     --bulma-button-border-color: rgba(255, 255, 255, 0.14);
   
     --bulma-button-hover-background-l-delta: 3%;
     --bulma-button-hover-border-l-delta: 8%;
     --bulma-button-hover-color-l-delta: 0%;
   
     --bulma-button-active-background-l-delta: 1%;
     --bulma-button-active-border-l-delta: 12%;
     --bulma-button-active-color-l-delta: 0%;
   
     --bulma-button-focus-border-color: var(--bulma-primary);
     --bulma-button-focus-box-shadow-size: 0 0 0 0.125em;
     --bulma-button-focus-box-shadow-color: rgba(70, 165, 45, 0.25);
   }
   
   html[data-theme="light"] .button:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-light):not(.is-dark):not(.is-text):not(.is-ghost) {
     --bulma-button-h: 0;
     --bulma-button-s: 0%;
     --bulma-button-background-l: 96%;
     --bulma-button-background-l-delta: 0%;
     --bulma-button-color-l: 12%;
     --bulma-button-border-l: 82%;
     --bulma-button-border-color: rgba(0, 0, 0, 0.14);
   
     --bulma-button-hover-background-l-delta: -3%;
     --bulma-button-hover-border-l-delta: -8%;
     --bulma-button-hover-color-l-delta: 0%;
   
     --bulma-button-active-background-l-delta: -5%;
     --bulma-button-active-border-l-delta: -12%;
     --bulma-button-active-color-l-delta: 0%;
   
     --bulma-button-focus-border-color: var(--bulma-primary);
     --bulma-button-focus-box-shadow-size: 0 0 0 0.125em;
     --bulma-button-focus-box-shadow-color: rgba(70, 165, 45, 0.25);
   }

   /* =========================================================
   TABLE COMPONENT VARIABLE HOOKS
   Bulma setzt Table-Variablen direkt auf .table.
   Darum spiegeln wir die Theme-Werte auf dem Component-Selector.
   ========================================================= */

html:not([data-theme]) .table,
html[data-theme="dark"] .table {
  --bulma-table-background-color: var(--surface-card);
  --bulma-table-color: var(--text-primary);

  --bulma-table-cell-heading-color: var(--text-secondary);
  --bulma-table-cell-border-color: var(--border-muted-color);
  --bulma-table-cell-border-style: solid;
  --bulma-table-cell-border-width: 0 0 1px;
  --bulma-table-cell-padding: 0.42rem 0.65rem;

  --bulma-table-head-background-color: #2d2d2d;
  --bulma-table-head-cell-color: var(--text-secondary);
  --bulma-table-head-cell-border-width: 0 0 1px;

  --bulma-table-body-background-color: transparent;

  --bulma-table-foot-background-color: #2d2d2d;
  --bulma-table-foot-cell-color: var(--text-secondary);
  --bulma-table-foot-cell-border-width: 1px 0 0;

  --bulma-table-row-hover-background-color: #2a2d2e;
  --bulma-table-row-active-background-color: rgba(70, 165, 45, 0.28);
  --bulma-table-row-active-color: var(--text-primary);

  --bulma-table-striped-row-even-background-color: rgba(255, 255, 255, 0.025);
  --bulma-table-striped-row-even-hover-background-color: #2a2d2e;
}

html[data-theme="light"] .table {
  --bulma-table-background-color: var(--surface-card);
  --bulma-table-color: var(--text-primary);

  --bulma-table-cell-heading-color: var(--text-secondary);
  --bulma-table-cell-border-color: var(--border-muted-color);
  --bulma-table-cell-border-style: solid;
  --bulma-table-cell-border-width: 0 0 1px;
  --bulma-table-cell-padding: 0.42rem 0.65rem;

  --bulma-table-head-background-color: #eaeaea;
  --bulma-table-head-cell-color: var(--text-secondary);
  --bulma-table-head-cell-border-width: 0 0 1px;

  --bulma-table-body-background-color: transparent;

  --bulma-table-foot-background-color: #eaeaea;
  --bulma-table-foot-cell-color: var(--text-secondary);
  --bulma-table-foot-cell-border-width: 1px 0 0;

  --bulma-table-row-hover-background-color: #e8f2e4;
  --bulma-table-row-active-background-color: rgba(70, 165, 45, 0.22);
  --bulma-table-row-active-color: var(--text-primary);

  --bulma-table-striped-row-even-background-color: rgba(0, 0, 0, 0.025);
  --bulma-table-striped-row-even-hover-background-color: #e8f2e4;
}

/* =========================================================
   TAG COMPONENT VARIABLE HOOKS
   Light-Tags im Dark Theme: helle Schrift erzwingen.
   ========================================================= */

   html:not([data-theme]) .tag.is-light,
   html[data-theme="dark"] .tag.is-light,
   html:not([data-theme]) .tag.is-info.is-light,
   html[data-theme="dark"] .tag.is-info.is-light,
   html:not([data-theme]) .tag.is-link.is-light,
   html[data-theme="dark"] .tag.is-link.is-light,
   html:not([data-theme]) .tag.is-primary.is-light,
   html[data-theme="dark"] .tag.is-primary.is-light,
   html:not([data-theme]) .tag.is-success.is-light,
   html[data-theme="dark"] .tag.is-success.is-light,
   html:not([data-theme]) .tag.is-warning.is-light,
   html[data-theme="dark"] .tag.is-warning.is-light,
   html:not([data-theme]) .tag.is-danger.is-light,
   html[data-theme="dark"] .tag.is-danger.is-light {
     --bulma-tag-color-l: var(--bulma-light-invert-l);
   }