:root {
    --bg-color: #c0c0c0;
    --desktop-bg: linear-gradient(135deg, #000080, #000000);
    --window-bg: #c0c0c0;
    --window-border: #000080;
    --text-color: #000;
    --highlight: #000080;
    --button-bg: #c0c0c0;
    --button-border: #808080;
    --scanline-color: rgba(0, 0, 0, 0.1);
    --font-ui: "MS Sans Serif", "Microsoft Sans Serif", "Tahoma", "Geneva", sans-serif;
    --font-body: "Share Tech Mono", "Consolas", "Lucida Console", monospace;
    --font-title: "Pixel Operator", "VT323", "Share Tech Mono", monospace;
    --base-font-size: 0.9rem;
    --border-raised: 2px solid var(--button-border);
    --border-inset: 2px inset var(--button-border);
    --border-top-left: 2px solid var(--color-white);
    --box-shadow: 2px 2px 0px var(--shadow-dark);
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --z-desktop: 1;
    --z-window: 10;
    --z-taskbar: 1000;
    --z-boot: 2000;

    /* Common colors */
    --color-black: #000;
    --color-white: #fff;
    --color-gray-dark: #555;
    --color-gray-light: #f0f0f0;

    /* CRT Green theme colors */
    --crt-green-bg: #001100;
    --crt-green-fg: #00ff00;
    --crt-green-dark: #002200;
    --crt-green-mid: #008800;

    /* Vaporwave Pink theme colors */
    --vaporwave-pink: #ff71ce;
    --vaporwave-cyan: #01cdfe;
    --vaporwave-mint: #05ffa1;
    --vaporwave-purple: #b967ff;

    /* Midnight Blue theme colors */
    --midnight-blue-primary: #000080;
    --midnight-blue-black: #000000;
    --midnight-blue-gray: #c0c0c0;
    --midnight-blue-border: #808080;

    /* Shadow and overlay colors */
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --white-semi-transparent: rgba(255, 255, 255, 0.7);
    --white-more-transparent: rgba(255, 255, 255, 0.9);

    /* Common transitions */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.2s ease;
    --transition-slow: all 0.3s ease;
}

/* ===== Reusable Border Utilities ===== */
.border-raised {
    border: 2px outset var(--button-border);
}

.border-inset {
    border: 2px inset var(--button-border);
}

.border-3d-light {
    border-top: 2px solid var(--color-white);
    border-left: 2px solid var(--color-white);
}

.border-3d-dark {
    border-bottom: 2px solid var(--shadow-dark);
    border-right: 2px solid var(--shadow-dark);
}

/* ===== Reusable Hover States ===== */
.hover-highlight:hover {
    background-color: var(--highlight);
    color: var(--color-white);
}

.hover-invert:hover {
    background-color: var(--highlight);
    color: var(--color-white);
    cursor: pointer;
}

/* ===== Common Interactive Elements ===== */
.interactive-element {
    cursor: pointer;
    transition: var(--transition-normal);
    user-select: none;
    -webkit-user-select: none;
}

.clickable-box {
    border: 2px outset var(--button-border);
    background-color: var(--button-bg);
    cursor: pointer;
    transition: var(--transition-normal);
}

.clickable-box:hover {
    border: 2px inset var(--button-border);
    background-color: var(--highlight);
    color: var(--color-white);
}

.clickable-box:active {
    border: 2px inset var(--button-border);
}

/* ===== Common Flex Layouts ===== */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* ===== Window Chrome Pattern ===== */
.window-chrome {
    border: 2px solid var(--button-border);
    border-top: 2px solid var(--color-white);
    border-left: 2px solid var(--color-white);
    box-shadow: var(--box-shadow);
}

/* ===== Text Utilities ===== */
.text-highlight-color {
    color: var(--highlight);
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}