/* CDE Theme - Core Motif Widget Styling */

@font-face {
    font-family: 'Terminus';
    src: url('../assets/fonts/TerminusTTF-4.49.3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --cde-bg-light: #adb1c1;
    --cde-bg-medium: #adb1c1;
    --cde-bg-dark: #7c7c7c;
    --cde-shadow-dark: #5c5c5c;
    --cde-shadow-light: #e0e0e0;
    --cde-highlight: #ffffff;
    --cde-titlebar-active: #b04f79;
    --cde-titlebar-inactive: #adb0c1;
    --cde-text: #000000;
    --cde-menu-bg: #adb1c1;
    --cde-select-bg: #4c6c8c;
    --cde-border-width: 1px;
    --cde-scale: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Terminus", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    overflow: hidden;
    color: var(--cde-text);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    text-rendering: optimizeSpeed;
}

.desktop-scale {
    transform-origin: top left;
    transform: scale(var(--cde-scale));
}

/* Responsive scaling for high-res displays */
@media screen and (min-width: 1920px) {
    :root { --cde-scale: 1.5; }
}

@media screen and (min-width: 2560px) {
    :root { --cde-scale: 2; }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
    :root { --cde-scale: 1.25; }
}

/* CDE Button Style - Raised 3D Effect */
.cde-button, button:not(.window-btn):not(.panel-button):not(.panel-workspace) {
    background: var(--cde-bg-light);
    border: none;
    padding: 4px 16px;
    font-size: 12px;
    font-family: "Helvetica", "Arial", sans-serif;
    cursor: pointer;
    position: relative;
    
    /* Outer raised border */
    box-shadow: 
        inset 1px 1px 0 var(--cde-highlight),
        inset -1px -1px 0 var(--cde-shadow-dark),
        inset 1px 1px 0 var(--cde-shadow-light),
        inset -1px -1px 0 var(--cde-shadow-dark);
}

.cde-button:active {
    /* Pressed/sunken effect */
    box-shadow: 
        inset -1px -1px 0 var(--cde-highlight),
        inset 1px 1px 0 var(--cde-shadow-dark),
        inset -1px -1px 0 var(--cde-shadow-light),
        inset 1px 1px 0 var(--cde-shadow-dark);
}

.cde-button:hover {
    background: #c4c4c4;
}

/* Menu Bar Items */
.menu-item {
    padding: 2px 12px;
    cursor: pointer;
    display: inline-block;
}

.menu-item:hover {
    background: var(--cde-select-bg);
    color: white;
}

/* Links in CDE style */
a.help-link {
    color: #000080;
    text-decoration: underline;
    cursor: pointer;
}

a.help-link:hover {
    color: #0000ff;
}

/* Scrollbars - Simplified CDE style */
::-webkit-scrollbar {
    width: 18px;
    height: 18px;
    background: var(--cde-bg-medium);
}

::-webkit-scrollbar-thumb {
    background: var(--cde-bg-light);
    border: var(--cde-border-width) solid;
    border-color: var(--cde-highlight) var(--cde-shadow-dark) var(--cde-shadow-dark) var(--cde-highlight);
}

::-webkit-scrollbar-button {
    background: var(--cde-bg-light);
    border: var(--cde-border-width) solid;
    border-color: var(--cde-highlight) var(--cde-shadow-dark) var(--cde-shadow-dark) var(--cde-highlight);
    height: 18px;
    width: 18px;
}

/* Text Selection */
::selection {
    background: var(--cde-select-bg);
    color: white;
}