botui/ui/suite/public/themes/3dbevel.css

:root {
    /* 3D Bevel Theme - Windows 95/Classic Mac style */
    --background: 0 0% 75%; /* #c0c0c0 - Classic gray */
    --foreground: 0 0% 0%; /* Black text */
    --card: 0 0% 88%; /* #e0e0e0 - Lighter gray */
    --card-foreground: 0 0% 0%; /* Black */
    --popover: 0 0% 82%; /* #d0d0d0 */
    --popover-foreground: 0 0% 0%; /* Black */
    --primary: 240 100% 33%; /* #0000aa - Classic blue */
    --primary-foreground: 0 0% 100%; /* White */
    --secondary: 0 0% 88%; /* #e0e0e0 */
    --secondary-foreground: 0 0% 0%; /* Black */
    --muted: 0 0% 75%; /* #c0c0c0 */
    --muted-foreground: 0 0% 25%; /* #404040 */
    --accent: 240 100% 50%; /* Blue accent */
    --accent-foreground: 0 0% 100%; /* White */
    --destructive: 0 100% 40%; /* Red */
    --destructive-foreground: 0 0% 100%; /* White */
    --border: 0 0% 25%; /* #404040 - Dark border */
    --input: 0 0% 100%; /* White input bg */
    --ring: 240 100% 50%; /* Blue focus ring */
    --radius: 0rem; /* No border radius - sharp corners */
    --chart-1: 240 100% 33%; /* Blue */
    --chart-2: 120 100% 25%; /* Green */
    --chart-3: 0 100% 40%; /* Red */
    --chart-4: 300 100% 33%; /* Purple */
    --chart-5: 60 100% 40%; /* Yellow */

    /* 3D Bevel specific - raised/sunken effects */
    --bevel-light: 0 0% 100%; /* White highlight */
    --bevel-dark: 0 0% 25%; /* Dark shadow */
}

/* 3D Bevel effect for buttons and raised elements */
.button,
button,
.btn,
.btn-icon,
.btn-primary,
.btn-secondary,
input[type="button"],
input[type="submit"] {
    border-style: solid;
    border-width: 2px;
    border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
        hsl(var(--bevel-dark)) hsl(var(--bevel-light));
    box-shadow: none;
}

.button:active,
button:active,
.btn:active,
.btn-icon:active,
input[type="button"]:active,
input[type="submit"]:active {
    border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
        hsl(var(--bevel-light)) hsl(var(--bevel-dark));
}

/* Sunken effect for inputs */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not(
        [type="radio"]
    ),
textarea,
select {
    border-style: solid;
    border-width: 2px;
    border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
        hsl(var(--bevel-light)) hsl(var(--bevel-dark));
    box-shadow: none;
}

/* Cards and panels - raised */
.card,
.modal-content,
.popover,
.dropdown-menu,
.context-menu {
    border-style: solid;
    border-width: 2px;
    border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
        hsl(var(--bevel-dark)) hsl(var(--bevel-light));
    box-shadow: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 16px;
    background: hsl(var(--muted));
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-style: solid;
    border-width: 2px;
    border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
        hsl(var(--bevel-dark)) hsl(var(--bevel-light));
}
::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

/* Font override for retro feel */
body {
    font-family: "IBM Plex Mono", "Courier New", monospace;
}

/* Links - classic blue underlined */
a {
    color: hsl(var(--primary));
    text-decoration: underline;
}
a:visited {
    color: hsl(300 100% 33%);
}

/* Horizontal rules */
hr {
    border: none;
    border-top: 2px solid hsl(var(--bevel-dark));
    margin: 8px 0;
}