:root, [data-theme="light"] {
    --bg-color: #f7fafc;
    --card-bg: #ffffff;
    --text-color: black;
    --text-muted: #4e5560;

    --hover-color: #ebf8ff;
    --hover-text: #2b6cb0;

    --color-1: #2b6cb0;
    --color-1-hover: #2c5282;

    --color-2: #cfa704;

    --border: #c8caca;
    --text-pane: #ffffff;

    --verse-line-active-background: #ebf4ff;
    --verse-line-active-border: #bee3f8;

    --box-shadow: rgba(0,0,0,0.2);

    --header-bg: white;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --card-bg: #292929;
    --text-color: #e2e8f0;
    --text-muted: #e9eaeb;

    --hover-color: #363636;
    --hover-text: #3585db;

    --color-1: #488dd6;
    --color-1-hover: #2c5282;

    --border: #e2e8f0;
    --text-pane: #292929;

    --verse-line-active-background: #404041;
    --verse-line-active-border: #113346;

    --box-shadow: rgba(250, 250, 250, 0.2);

    --header-bg: black;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}