:root {
    --icon-stroke-width: 1px;

    --bg-color-hover: var(--text-color);
    --text-color-hover: var(--bg-color);

    --border-color: var(--text-color);
    --border-color-hover: var(--text-color);

    --selected-activator-bg-color: var(--border-color);
    --selected-activator-text-color: var(--text-color-hover);

    --selected-cell-bg-color: rgb(from var(--bg-color-hover) r g b / 1.0);
    --selected-cell-text-color: var(--text-color-hover);
    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 12.5%, var(--bg-color));

    --summary-bg-mix-percentage: 25%;
    --summary-hover-bg-mix-percentage: 20%;
}

/* ************************************************** */
/* #region LIGHT                                      */
/* ************************************************** */

:root[data-theme="light"] {
    --bg-color: #f5f5f5;
    --bg-color-hover: #e1e1e1;

    --border-color: #bcbcbc;
    --border-color-hover: #bcbcbc;

    --text-color: #333333;
    --text-color-hover: #333333;

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 50%, var(--bg-color));
    --selected-cell-bg-color: #cccccc;
    --selected-cell-text-color: #000000;

    --summary-bg-mix-percentage: 10%;
    --summary-hover-bg-mix-percentage: 5%;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region DARK                                       */
/* ************************************************** */

:root[data-theme="dark"] {
    --border-color: #7c7f94;
    --border-color-hover: #7c7f94;

    --bg-color: #1f1f2a;
    --bg-color-hover: #373849;

    --text-color: #b7b5af;
    --text-color-hover: #b7b5af;

    --selected-activator-bg-color: var(--border-color);
    --selected-activator-text-color: var(--bg-color);

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 70%, var(--bg-color));
    --selected-cell-bg-color: #666666;
    --selected-cell-text-color: #ffffff;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--bg-color);
}

/* #endregion */

/* ************************************************** */
/* #region LIGHT - HC                                 */
/* ************************************************** */

:root[data-theme="light-hc"] {
    --border-color: #000000;
    --border-color-hover: #ffffff;

    --bg-color: #ffffff;
    --bg-color-hover: #000000;

    --text-color: #000000;
    --text-color-hover: #ffffff;

    --selected-activator-bg-color: var(--border-color);
    --selected-activator-text-color: var(--text-color-hover);

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 10%, var(--bg-color));
    --selected-cell-bg-color: #666666;
    --selected-cell-text-color: #ffffff;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region DARK - HC                                  */
/* ************************************************** */

:root[data-theme="dark-hc"] {
    --border-color: #ffffff;
    --border-color-hover: #000000;

    --bg-color: #000000;
    --bg-color-hover: #ffffff;

    --text-color: #ffffff;
    --text-color-hover: #000000;

    --selected-activator-bg-color: var(--border-color);
    --selected-activator-text-color: var(--text-color-hover);

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 25%, var(--bg-color));
    --selected-cell-bg-color: #cccccc;
    --selected-cell-text-color: #000000;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--bg-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - FERMAT                            */
/* ************************************************** */

:root[data-theme="fermat"] {
    --bg-color: #006bba;
    --text-color: #e9ffad;

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 25%, var(--bg-color));

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - CURIE                             */
/* ************************************************** */

:root[data-theme="curie"] {
    --bg-color: #000;
    --text-color: #73ff00;

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 25%, var(--bg-color));

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - LAVOISIER                         */
/* ************************************************** */

:root[data-theme="lavoisier"] {
    --bg-color: #e9d476;
    --text-color: #002837;

    --summary-bg-mix-percentage: 12.5%;
    --summary-hover-bg-mix-percentage: 15%;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - DALTON                            */
/* ************************************************** */

:root[data-theme="dalton"] {
    --bg-color: #00ff00;
    --text-color: #350da3;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - MACKAY                            */
/* ************************************************** */

:root[data-theme="mackay"] {
    --bg-color: #240064;
    --text-color: #d4efab;

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 17.5%, var(--bg-color));

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - BORODIN                           */
/* ************************************************** */

:root[data-theme="borodin"] {
    --bg-color: #26020e;
    --text-color: #f2cf00;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - HOFMANN                           */
/* ************************************************** */

:root[data-theme="hofmann"] {
    --bg-color: #faff00;
    --text-color: #ff00c8;

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PRESET - PAULING                           */
/* ************************************************** */

:root[data-theme="pauling"] {
    --bg-color: #9ff2bc;
    --text-color: #3f0d5c;

    --alternating-row-color: color-mix(in srgb, var(--bg-color-hover) 5%, var(--bg-color));

    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region CUSTOM                                     */
/* ************************************************** */

/*
 * The 2 core color variables below are NOT set here — they are applied as inline styles on :root by ThemeManager.applyCustomColors() so the user's color-picker values win via specificity.
 *
 *   --bg-color ← color picker
 *   --text-color ← color picker

 * Everything else below is derived from those using var(), so the whole theme stays coherent automatically as the user tweaks colors.
 */

:root[data-theme="custom"] {
    --highlight-bg-color: #ffdc00;
    --highlight-text-color: var(--text-color);
}

/* #endregion */