/* ============================================================
   COLOUR TOKENS
   Light is the default. Dark is applied in two cases:
     1. OS prefers dark AND the user has not explicitly chosen light
     2. The user has explicitly chosen dark (body[data-theme-version='dark'])
   body[data-theme-version='light'] needs no rule — light is the :root
   default, so body simply inherits it when no dark rule matches.
   ============================================================ */

:root {
    /* Palette — theme-neutral primitives */
    --bg-dark: #202020;
    --bg-light: #FFFFFF;

    /* Light theme (default) */
    --bg-color: var(--bg-light);
    --bg-app-content: var(--bg-muted);
    --accent-color: #FF5733;
    --primary-color: #0416D3;
    --primary-border-color: #0416D3;
    --primary-hover-color: #030EB3;
    --paragraph-color: #413330;
    --heading-color: #3F0E00;
    --link-color: #C70239;
    --link-hover-color: #A0012E;
    --text-color: #413330;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --prefix-icon: var(--bg-dark);
    --text-muted: #888888;
    --bg-muted: #f0f0f0;
    --bg-muted-hover: #e4e4e4;
    --border-muted: #cfcfcf;
    --bg-tooltip: #FFFFFF;
    --tooltip-text-color: #3F0E00;

    /* Status colours — same in both themes */
    --success-color: #0BD895;
    --success-hover-color: #0AC88C;
    --success-border-color: #067B55;
    --success-text-color: #161616;

    --warning-color: #F6FE05;
    --warning-hover-color: #E5E604;
    --warning-border-color: #B3B907;
    --warning-text-color: #161616;

    --danger-color: #C70239;
    --danger-hover-color: #A0012E;
    --danger-border-color: #700120;
    --danger-text-color: #FFFFFF;

    --info-color: #0416D3;
    --info-hover-color: #030EB3;
    --info-border-color: #040E7C;
    --info-text-color: #FFFFFF;
}

/* Dark theme variables — duplicated below because pure CSS has no mixins.
   Keep these two blocks in sync when changing dark theme values. */

/* Case 1: OS prefers dark, no explicit light override */
@media (prefers-color-scheme: dark) {
    body:not([data-theme-version='light']) {
        --bg-color: #202020;
        --bg-app-content: #161616;
        --primary-color: #FF5733;
        --primary-hover-color: #E04E2D;
        --primary-border-color: #FF5733;
        --paragraph-color: #CFCFCF;
        --heading-color: #FEF3F0;
        --link-color: #04B8D3;
        --link-hover-color: #00A3C4;
        --text-color: #CFCFCF;
        --box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075);
        --prefix-icon: var(--bg-light);
        --bg-muted: #383838;
        --bg-muted-hover: #484848;
        --border-muted: #555555;
        --bg-tooltip: #202020;
        --tooltip-text-color: #FEF3F0;
    }
}

/* Case 2: User explicitly chose dark, regardless of OS preference */
body[data-theme-version='dark'] {
    --bg-color: #202020;
    --bg-app-content: #161616;
    --primary-color: #FF5733;
    --primary-hover-color: #E04E2D;
    --primary-border-color: #FF5733;
    --paragraph-color: #CFCFCF;
    --heading-color: #FEF3F0;
    --link-color: #04B8D3;
    --link-hover-color: #00A3C4;
    --text-color: #CFCFCF;
    --box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075);
    --prefix-icon: var(--bg-light);
    --bg-muted: #383838;
    --bg-muted-hover: #484848;
    --border-muted: #555555;
    --bg-tooltip: #202020;
    --tooltip-text-color: #FEF3F0;
}

/* BACKGROUND UTILITIES */
.tt-bg-primary { background-color: var(--primary-color); }
.tt-bg-danger   { background-color: var(--danger-color); }
.tt-bg-warning  { background-color: var(--warning-color); }
.tt-bg-info     { background-color: var(--info-color); }
.tt-bg-success  { background-color: var(--success-color); }