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 */

    /* ============================================ */
    /* SENTIENT BRIDGE VARIABLES                   */
    /* For Sheet, Docs, Slides theme support       */
    /* ============================================ */

    /* Backgrounds */
    --sentient-bg-primary: hsl(var(--background));
    --sentient-bg-secondary: hsl(var(--card));
    --sentient-bg-tertiary: hsl(var(--muted));
    --sentient-bg-hover: hsla(var(--primary) / 0.08);
    --sentient-bg-active: hsla(var(--primary) / 0.15);

    /* Text */
    --sentient-text-primary: hsl(var(--foreground));
    --sentient-text-secondary: hsl(var(--muted-foreground));
    --sentient-text-tertiary: hsla(var(--muted-foreground) / 0.7);
    --sentient-text-muted: hsla(var(--muted-foreground) / 0.5);

    /* Accent Colors */
    --sentient-accent: hsl(var(--primary));
    --sentient-accent-hover: hsl(var(--primary) / 0.85);
    --sentient-accent-light: hsla(var(--primary) / 0.1);
    --sentient-accent-dark: hsl(var(--primary) / 0.7);

    /* Borders */
    --sentient-border: hsl(var(--border));
    --sentient-border-light: hsla(var(--border) / 0.5);
    --sentient-border-accent: hsla(var(--primary) / 0.3);

    /* Surfaces */
    --sentient-surface: hsl(var(--card));
    --sentient-surface-hover: hsla(var(--primary) / 0.08);
    --sentient-surface-active: hsla(var(--primary) / 0.15);
    --sentient-surface-elevated: hsl(var(--popover));

    /* Inputs */
    --sentient-input-bg: hsl(var(--input));
    --sentient-input-border: hsl(var(--border));
    --sentient-input-focus: hsl(var(--ring));

    /* Status Colors */
    --sentient-success: hsl(142 76% 36%);
    --sentient-success-bg: hsla(142 76% 36% / 0.15);
    --sentient-warning: hsl(38 92% 50%);
    --sentient-warning-bg: hsla(38 92% 50% / 0.15);
    --sentient-error: hsl(var(--destructive));
    --sentient-error-bg: hsla(var(--destructive) / 0.15);

    /* Typography */
    --sentient-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Shadows */
    --sentient-shadow-sm: 0 1px 2px 0 hsla(var(--foreground) / 0.05);
    --sentient-shadow-md: 0 4px 6px -1px hsla(var(--foreground) / 0.1), 0 2px 4px -1px hsla(var(--foreground) / 0.06);
    --sentient-shadow-lg: 0 10px 15px -3px hsla(var(--foreground) / 0.1), 0 4px 6px -2px hsla(var(--foreground) / 0.05);

    /* Border Radius */
    --sentient-radius: var(--radius);
    --sentient-radius-sm: calc(var(--radius) * 0.5);
    --sentient-radius-md: var(--radius);
    --sentient-radius-lg: calc(var(--radius) * 1.5);
    --sentient-radius-xl: calc(var(--radius) * 2);
}

/* 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;
}