html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Map theme-specific variables to generic tokens */

html[data-theme="light"] {
    --tmt-bg: var(--tmt-light-bg);
    --tmt-text: var(--tmt-light-text);
    --tmt-accent: var(--tmt-light-accent);
    --tmt-accent-text: var(--tmt-light-accent-text);
    --tmt-card-bg: var(--tmt-light-card-bg);
    --tmt-border: var(--tmt-light-border);
    --tmt-link: var(--tmt-light-link);
    --tmt-link-hover: var(--tmt-light-link-hover);
    --tmt-button-bg: var(--tmt-light-button-bg);
    --tmt-button-text: var(--tmt-light-button-text);
}

html[data-theme="dark"] {
    --tmt-bg: var(--tmt-dark-bg);
    --tmt-text: var(--tmt-dark-text);
    --tmt-accent: var(--tmt-dark-accent);
    --tmt-accent-text: var(--tmt-dark-accent-text);
    --tmt-card-bg: var(--tmt-dark-card-bg);
    --tmt-border: var(--tmt-dark-border);
    --tmt-link: var(--tmt-dark-link);
    --tmt-link-hover: var(--tmt-dark-link-hover);
    --tmt-button-bg: var(--tmt-dark-button-bg);
    --tmt-button-text: var(--tmt-dark-button-text);
}

html[data-theme="sepia"] {
    --tmt-bg: var(--tmt-sepia-bg);
    --tmt-text: var(--tmt-sepia-text);
    --tmt-accent: var(--tmt-sepia-accent);
    --tmt-accent-text: var(--tmt-sepia-accent-text);
    --tmt-card-bg: var(--tmt-sepia-card-bg);
    --tmt-border: var(--tmt-sepia-border);
    --tmt-link: var(--tmt-sepia-link);
    --tmt-link-hover: var(--tmt-sepia-link-hover);
    --tmt-button-bg: var(--tmt-sepia-button-bg);
    --tmt-button-text: var(--tmt-sepia-button-text);
}

html[data-theme="high-contrast"] {
    --tmt-bg: var(--tmt-hc-bg);
    --tmt-text: var(--tmt-hc-text);
    --tmt-accent: var(--tmt-hc-accent);
    --tmt-accent-text: var(--tmt-hc-accent-text);
    --tmt-card-bg: var(--tmt-hc-card-bg);
    --tmt-border: var(--tmt-hc-border);
    --tmt-link: var(--tmt-hc-link);
    --tmt-link-hover: var(--tmt-hc-link-hover);
    --tmt-button-bg: var(--tmt-hc-button-bg);
    --tmt-button-text: var(--tmt-hc-button-text);
}

/* Base usage of tokens */

body {
    background-color: var(--tmt-bg, #ffffff);
    color: var(--tmt-text, #111111);
}

/* Links */

a {
    color: var(--tmt-link, #0066cc);
}

a:hover,
a:focus {
    color: var(--tmt-link-hover, #004999);
}

/* Buttons */

button,
input[type="button"],
input[type="submit"],
.tmt-button {
    background-color: var(--tmt-button-bg, #4a90e2);
    color: var(--tmt-button-text, #ffffff);
    border: none;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.tmt-button:hover {
    filter: brightness(1.05);
}

/* Cards / panels */

.card,
.widget,
.section,
.box {
    background-color: var(--tmt-card-bg, #f7f7f7);
    border: 1px solid var(--tmt-border, #dddddd);
}

/* Accent elements */

.badge,
.tag,
.highlight {
    background-color: var(--tmt-accent, #4a90e2);
    color: var(--tmt-accent-text, #ffffff);
}

/* Floating toggle */

.tmt-button.tmt-floating {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}