/* Root level for color inversion */
.inverted-colors {
    --base-bg-color: #000; /* Background color for inverted mode */
    --base-text-color: #FFF; /* Text color for inverted mode */
    --link-color: #FFD700; /* Gold color for links */
    --button-bg-color: #333; /* Dark background for buttons */
    --button-text-color: #FFF; /* White text for buttons */
    --focus-outline-color: #00F; /* Blue outline for focus states */
}

/* General body and text inversion */
.inverted-colors, 
.inverted-colors * {
    background-color: var(--base-bg-color) !important;
    color: var(--base-text-color) !important;
}

/* Images and media to retain original colors */
.inverted-colors img,
.inverted-colors video,
.inverted-colors iframe,
.inverted-colors svg {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Links */
.inverted-colors a {
    color: var(--link-color) !important;
}

/* Buttons and interactive elements */
.inverted-colors button,
.inverted-colors input[type="button"],
.inverted-colors input[type="submit"] {
    background-color: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
    border: 1px solid var(--button-text-color) !important;
}

/* Form elements */
.inverted-colors input,
.inverted-colors textarea,
.inverted-colors select {
    background-color: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
    border: 1px solid var(--button-text-color) !important;
}

/* Headings and common text elements */
.inverted-colors h1, 
.inverted-colors h2, 
.inverted-colors h3, 
.inverted-colors h4, 
.inverted-colors h5, 
.inverted-colors h6,
.inverted-colors p,
.inverted-colors span,
.inverted-colors li,
.inverted-colors div {
    color: var(--base-text-color) !important;
}

/* Focus states */
.inverted-colors input:focus,
.inverted-colors textarea:focus,
.inverted-colors select:focus,
.inverted-colors a:focus,
.inverted-colors button:focus {
    outline: 2px solid var(--focus-outline-color) !important;
}

/* Revert colors for embedded content */
.inverted-colors embed,
.inverted-colors object {
    filter: invert(1) hue-rotate(180deg) !important;
}