/* Theme variable definitions per ARCHITECTURE.md Section 2.
   Light is the default; dark mode is applied via [data-theme="dark"] on the root element. */

:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --text-secondary: #5a5a6e;
    --panel-bg: #f4f4f4;
    --panel-border: rgba(0, 0, 0, 0.08);
    --accent-color: #6200ee;
    --accent-soft: rgba(98, 0, 238, 0.10);
    /* Purple text token, used for standalone accent TEXT (sidebar links, section
       header labels, badges) as opposed to --accent-color, which also floors the
       solid accent buttons. In light mode it matches --accent-color (#6200ee on
       white already clears WCAG AA at ~8.6:1); dark mode lightens it below. */
    --accent-text: #6200ee;
    --success-color: #1b7a43;
    --error-color: #b3261e;
    --locked-color: #9b9ba8;
    --header-bg: #fafafa;
    --shadow-color: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --text-secondary: #9aa0b0;
    --panel-bg: #1e1e1e;
    --panel-border: rgba(255, 255, 255, 0.08);
    --accent-color: #bb86fc;
    --accent-soft: rgba(187, 134, 252, 0.12);
    /* A lighter pastel violet for raw accent TEXT in dark mode. #c5a3ff lands
       ~8.9:1 against the #121212 surface (and stays above 4.5:1 on --panel-bg and
       the --accent-soft wash), comfortably clearing WCAG AA. --accent-color
       (#bb86fc) stays the button-background floor so dark text on a purple button
       is untouched. */
    --accent-text: #c5a3ff;
    --success-color: #38c172;
    --error-color: #f2746b;
    --locked-color: #5c5c6a;
    --header-bg: #181818;
    --shadow-color: rgba(0, 0, 0, 0.4);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}