body {
    --bg-2: #EBE8E2;
    --bg: #F4F2EE;
    --surface: #FFFFFF;
    --surface-2: #FAF9F6;
    --surface-3: #F0EEEA;
    --surface-4: #E8E5DF;
    --border: #E5E2DC;
    --border-strong: #D6D2CB;
    --text: #1A1815;
    --text-2: #5A554D;
    --text-3: #8A847B;
    --text-disabled: #B5AFA5;

    --button-bg: var(--accent-text);

    --accent: oklch(0.38 0.14 260);
    --accent-hover: oklch(0.90 0.06 260);
    --accent-soft: oklch(0.95 0.03 260);
    --accent-text: oklch(0.28 0.11 260);


    /* SUCCESS (green) */
    --success: oklch(0.58 0.14 150);
    --success-strong: oklch(0.50 0.16 150);
    --success-soft: oklch(0.95 0.04 150);
    --success-text: oklch(0.34 0.10 150);

    /* WARNING (amber) */
    --warn: oklch(0.68 0.15 75);
    --warn-strong: oklch(0.58 0.17 75);
    --warn-soft: oklch(0.96 0.05 75);
    --warn-text: oklch(0.38 0.09 75);

    /* ERROR (red) */
    --error: oklch(0.60 0.18 25);
    --error-strong: oklch(0.52 0.20 25);
    --error-soft: oklch(0.95 0.05 25);
    --error-text: oklch(0.36 0.12 25);

    /* INFO (blue) */
    --info: oklch(0.58 0.13 235);
    --info-strong: oklch(0.50 0.15 235);
    --info-soft: oklch(0.95 0.04 235);
    --info-text: oklch(0.34 0.10 235);

    /* UNKNOWN (violet) */
    --unknown: oklch(0.60 0.14 290);
    --unknown-strong: oklch(0.52 0.16 290);
    --unknown-soft: oklch(0.95 0.04 290);
    --unknown-text: oklch(0.36 0.10 290);


    --radius: var(--rad-3);

    --shadow-sm: 0 1px 2px var(--opaque-100);
    --shadow-md: 0 1px 3px var(--opaque-100), 0 4px 12px var(--opaque-150);
    --shadow-lg: 0 24px 48px var(--opaque-200), 0 4px 12px var(--opaque-100);

    /* ROLES */
    --role-globaladmin-bg: oklch(0.93 0.05 145);
    --role-globaladmin-fg: oklch(0.38 0.10 145);
    --role-globaladmin-bd: oklch(0.82 0.08 145);

    --role-admin-bg: oklch(0.94 0.06 70);
    --role-admin-fg: oklch(0.45 0.12 60);
    --role-admin-bd: oklch(0.82 0.09 70);

    --role-user-bg: oklch(0.94 0.005 260);
    --role-user-fg: oklch(0.42 0.01 260);
    --role-user-bd: oklch(0.84 0.005 260);
}

html[data-theme="dark"] body {
    --bg-2: #070A0D;
    --bg: #0D1014;
    --surface: #15191F;
    --surface-2: #1A1F26;
    --surface-3: #232931;
    --surface-4: #2D343E;
    --border: #2A313B;
    --border-strong: #3A4250;
    --text: #ECEAE5;
    --text-2: #A8A49B;
    --text-3: #6E6A60;
    --text-disabled: #4A463F;

    --button-bg: var(--accent-text);

    --accent: oklch(0.72 0.13 258);
    --accent-hover: oklch(0.30 0.09 258);
    --accent-soft: oklch(0.24 0.05 258);
    --accent-text: oklch(0.82 0.12 258);

    /* SUCCESS */
    --success: oklch(0.74 0.13 150);
    --success-strong: oklch(0.80 0.15 150);
    --success-soft: oklch(0.28 0.05 150);
    --success-text: oklch(0.84 0.10 150);

    /* WARNING */
    --warn: oklch(0.78 0.14 75);
    --warn-strong: oklch(0.84 0.16 75);
    --warn-soft: oklch(0.30 0.05 75);
    --warn-text: oklch(0.88 0.09 75);

    /* ERROR */
    --error: oklch(0.72 0.16 25);
    --error-strong: oklch(0.79 0.18 25);
    --error-soft: oklch(0.27 0.06 25);
    --error-text: oklch(0.84 0.12 25);

    /* INFO */
    --info: oklch(0.75 0.13 235);
    --info-strong: oklch(0.82 0.15 235);
    --info-soft: oklch(0.27 0.05 235);
    --info-text: oklch(0.86 0.10 235);

    /* UNKNOWN */
    --unknown: oklch(0.76 0.14 290);
    --unknown-strong: oklch(0.83 0.16 290);
    --unknown-soft: oklch(0.28 0.05 290);
    --unknown-text: oklch(0.87 0.10 290);

    --shadow-sm: 0 1px 0 var(--opaque-400), 0 1px 2px var(--opaque-400);
    --shadow-md: 0 4px 14px var(--opaque-400), 0 1px 3px var(--opaque-300);
    --shadow-lg: 0 24px 56px var(--opaque-600), 0 4px 12px var(--opaque-400);

    /* ROLES */
    --role-globaladmin-bg: oklch(0.30 0.06 145);
    --role-globaladmin-fg: oklch(0.82 0.10 145);
    --role-globaladmin-bd: oklch(0.40 0.08 145);

    --role-admin-bg: oklch(0.32 0.07 70);
    --role-admin-fg: oklch(0.85 0.11 75);
    --role-admin-bd: oklch(0.42 0.09 70);

    --role-user-bg: oklch(0.25 0.005 260);
    --role-user-fg: oklch(0.78 0.005 260);
    --role-user-bd: oklch(0.36 0.005 260);
}

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

html[data-theme="dark"] #content {
    background: transparent;
}

/* Accent variants — driven by html[data-accent]. Default (no attribute) is blue. */

/* ---- TEAL ---- */
html[data-accent="teal"],
div[data-accent="teal"],
html[data-accent="teal"] body,
div[data-accent="teal"] body {
    --accent: oklch(0.56 0.11 195);
    --accent-hover: oklch(0.90 0.05 195);
    --accent-soft: oklch(0.95 0.03 195);
    --accent-text: oklch(0.40 0.11 195);
}

html[data-accent="teal"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="teal"],
html[data-accent="teal"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="teal"] body {
    --accent: oklch(0.74 0.11 195);
    --accent-hover: oklch(0.30 0.08 195);
    --accent-soft: oklch(0.24 0.04 195);
    --accent-text: oklch(0.83 0.10 195);
}

/* ---- ROSE ---- */
html[data-accent="rose"],
div[data-accent="rose"],
html[data-accent="rose"] body,
div[data-accent="rose"] body {
    --accent: oklch(0.57 0.16 25);
    --accent-hover: oklch(0.91 0.06 25);
    --accent-soft: oklch(0.95 0.03 25);
    --accent-text: oklch(0.48 0.15 25);
}

html[data-accent="rose"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="rose"],
html[data-accent="rose"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="rose"] body {
    --accent: oklch(0.72 0.15 25);
    --accent-hover: oklch(0.30 0.10 25);
    --accent-soft: oklch(0.24 0.05 25);
    --accent-text: oklch(0.83 0.13 25);
}

/* ---- BLUE ---- */
html[data-accent="blue"],
div[data-accent="blue"],
html[data-accent="blue"] body,
div[data-accent="blue"] body {
    --accent: oklch(0.38 0.14 260);
    --accent-hover: oklch(0.90 0.06 260);
    --accent-soft: oklch(0.95 0.03 260);
    --accent-text: oklch(0.28 0.11 260);
}

html[data-accent="blue"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="blue"],
html[data-accent="blue"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="blue"] body {
    --accent: oklch(0.72 0.13 258);
    --accent-hover: oklch(0.30 0.09 258);
    --accent-soft: oklch(0.24 0.05 258);
    --accent-text: oklch(0.82 0.12 258);
}

/* ---- GREEN ---- */
html[data-accent="green"],
div[data-accent="green"],
html[data-accent="green"] body,
div[data-accent="green"] body {
    --accent: oklch(0.55 0.13 150);
    --accent-soft: oklch(0.95 0.03 150);
    --accent-text: oklch(0.40 0.13 150);
    --accent-hover: oklch(0.92 0.05 150);
}

html[data-accent="green"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="green"],
html[data-accent="green"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="green"] body {
    --accent: oklch(0.72 0.13 150);
    --accent-soft: oklch(0.24 0.04 150);
    --accent-text: oklch(0.82 0.12 150);
    --accent-hover: oklch(0.30 0.09 150);
}

/* ---- PLUM ---- */
html[data-accent="plum"],
div[data-accent="plum"],
html[data-accent="plum"] body,
div[data-accent="plum"] body {
    --accent: oklch(0.55 0.14 320);
    --accent-soft: oklch(0.95 0.03 320);
    --accent-text: oklch(0.40 0.14 320);
    --accent-hover: oklch(0.91 0.05 320);
}

html[data-accent="plum"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="plum"],
html[data-accent="plum"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="plum"] body {
    --accent: oklch(0.72 0.14 320);
    --accent-soft: oklch(0.24 0.05 320);
    --accent-text: oklch(0.82 0.12 320);
    --accent-hover: oklch(0.30 0.09 320);
}

/* ---- AMBER ---- */
html[data-accent="amber"],
div[data-accent="amber"],
html[data-accent="amber"] body,
div[data-accent="amber"] body {
    --accent: oklch(0.68 0.15 70);
    --accent-soft: oklch(0.95 0.04 70);
    --accent-text: oklch(0.45 0.13 70);
    --accent-hover: oklch(0.91 0.08 70);
}

html[data-accent="amber"][data-theme="dark"],
html[data-theme="dark"] div[data-accent="amber"],
html[data-accent="amber"][data-theme="dark"] body,
html[data-theme="dark"] div[data-accent="amber"] body {
    --accent: oklch(0.78 0.14 70);
    --accent-soft: oklch(0.40 0.09 70);
    --accent-text: oklch(0.85 0.13 70);
    --accent-hover: oklch(0.30 0.09 70);
}


/* --------------------
    Theming Panel
-------------------- */

.theming-button-list {
    display: inline-flex;
    background: var(--surface-3);
    border-radius: var(--rad-2);
    padding: var(--p1);
    gap: var(--g1);
    border: 1px solid var(--border-strong);

}

.theming-button-list>i,
.theming-panel-button {
    display: inline-flex;
    box-sizing: content-box;
    justify-content: center;
    padding: var(--p1);
    border-radius: var(--rad-2);
    border: 1px solid var(--surface-3);
    color: var(--text-2);
}

.theming-panel-button {
    padding: var(--p2);
}

.theming-button-list>i:hover,
.theming-panel-button:hover {
    cursor: pointer;
    color: var(--text);
    background-color: var(--surface-3);
}

.theming-button-list>i[data-active="true"] {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

#theming-panel-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120vh;
    width: 100vw;
    position: absolute;
    z-index: 2048;
    top: -20vh;
    background: rgba(0, 0, 0, 0.5);
}

#theming-panel-overlay[hidden] {
    display: none;
}

.theming-panel {
    margin: 0 auto;
    width: 300px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--rad-3);
    box-shadow: var(--shadow-md);
}


.theming-panel .card-body {
    display: inline-flex;
    flex-direction: column;
    gap: var(--g3);
    padding: var(--p4);
}

.theming-option-list {
    display: flex;
    flex-flow: row wrap;
    gap: var(--g3);
    justify-content: space-evenly;
}

.theming-option {
    display: inline-flex;
    min-height: 48px;
    min-width: 48px;
    height: 25%;
    width: 25%;
    background: var(--accent);
    border-radius: var(--radius);
}

.theming-option:hover {
    cursor: pointer;
    transform: translateY(-2px);
}

.theming-option:active {
    transform: scale(0.95);
}