:root {
    /* High-Density Material Design Tokens */

    /* Surfaces - Obsidian/Basalt Theme */
    --md-sys-color-background: #0f1011;
    --md-sys-color-surface: #151619;
    --md-sys-color-surface-variant: #1e1f22;
    --md-sys-color-surface-hover: #27282c;
    --md-sys-color-surface-active: #323339;

    /* Primary Accent (Neon Cyan - Deluge Wave) */
    --md-sys-color-primary: #00f0ff;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-hover: #00d0dd;

    /* Secondary Accent / Neutrals */
    --md-sys-color-secondary: #27282c;
    --md-sys-color-on-secondary: #eeeeee;
    --md-sys-color-secondary-hover: #323339;

    /* Tertiary Accent (Neon Orange - Forge Heat) */
    --md-sys-color-tertiary: #ff6b00;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-hover: #e05e00;

    --md-sys-color-error: #ff3b30; /* Zoho Red style */
    --md-sys-color-success: #50fa7b; /* Dracula green style */

    /* Typography / Text */
    --md-sys-color-on-surface: #cccccc; /* Standard text */
    --md-sys-color-on-surface-variant: #888888; /* Muted text / labels */
    --md-sys-color-on-surface-strong: #eeeeee; /* Headings */

    /* Borders */
    --md-sys-color-outline: #25262a;
    --md-sys-color-outline-variant: #35363c;

    /* Layout Dimensions (High Density) */
    --md-sys-spacing-0: 0px;
    --md-sys-spacing-1: 2px;
    --md-sys-spacing-2: 4px;
    --md-sys-spacing-3: 8px;
    --md-sys-spacing-4: 12px;
    --md-sys-spacing-5: 16px;

    /* Shape Radii */
    --md-sys-shape-corner-extra-small: 4px; /* Slightly smoother */
    --md-sys-shape-corner-small: 6px;
    --md-sys-shape-corner-medium: 10px;

    --md-sys-typescale-body-small: 10px;
    --md-sys-typescale-body-medium: 11px;
    --md-sys-typescale-body-large: 12px;
    --md-sys-typescale-title-small: 13px;

    /* Specific Component Tokens */
    --header-height: 35px;
    --footer-height: 150px;
    --sidebar-width: 50px;
    --sidebar-expanded-width: 200px;
    --left-sidebar-width: 250px;

    /* Glassmorphism Design Tokens */
    --glass-bg: rgba(21, 22, 25, 0.7);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);

    /* Body Background Gradients (Cyan to Orange) */
    --body-bg-gradient-1: rgba(0, 240, 255, 0.06);
    --body-bg-gradient-2: rgba(255, 107, 0, 0.04);
    --body-bg-base: #0f1011;

    /* Scrollbar Tokens */
    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb-border: rgba(255, 255, 255, 0.03);
}

[data-theme="vs-light"] {
    --md-sys-color-background: #f5f5f7;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-variant: #eef1f6;
    --md-sys-color-surface-hover: #e0e4ec;
    --md-sys-color-surface-active: #d0d6e2;
    --md-sys-color-on-surface: #1c1c1e;
    --md-sys-color-on-surface-variant: #6b6e76;
    --md-sys-color-on-surface-strong: #000000;
    --md-sys-color-outline: #d2d2d7;
    --md-sys-color-outline-variant: #c7c7cc;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);

    --body-bg-gradient-1: rgba(25, 127, 230, 0.04);
    --body-bg-gradient-2: rgba(80, 250, 123, 0.03);
    --body-bg-base: #f5f5f7;

    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.15);
    --scrollbar-thumb-border: rgba(0, 0, 0, 0.05);
    --md-sys-color-success: #16a34a; /* Light theme green success style */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 5% 5%, var(--body-bg-gradient-1) 0%, transparent 45%),
                radial-gradient(circle at 95% 95%, var(--body-bg-gradient-2) 0%, transparent 45%),
                var(--body-bg-base);
    color: var(--md-sys-color-on-surface);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--md-sys-typescale-body-large);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: 10px;
    border: 1px solid var(--scrollbar-thumb-border);
    transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-primary, #197fe6);
    box-shadow: 0 0 6px rgba(25, 127, 230, 0.5);
}

/* High-Contrast Monaco Diff Editor Highlights */
.monaco-diff-editor .line-delete,
.monaco-editor .line-delete,
.monaco-editor .line-delete-sign,
.monaco-diff-editor .line-delete-sign,
.line-delete,
.ced-document-diff-change-removed,
[class*="removedLineBackground"] {
    background-color: rgba(255, 85, 85, 0.35) !important;
}
.monaco-diff-editor .line-insert,
.monaco-editor .line-insert,
.monaco-editor .line-insert-sign,
.monaco-diff-editor .line-insert-sign,
.line-insert,
.ced-document-diff-change-inserted,
[class*="insertedLineBackground"] {
    background-color: rgba(80, 250, 123, 0.35) !important;
}
.monaco-diff-editor .char-delete,
.monaco-editor .char-delete,
.char-delete,
[class*="removedTextBackground"] {
    background-color: rgba(255, 85, 85, 0.6) !important;
    border: 1px solid rgba(255, 85, 85, 0.8) !important;
    border-radius: 2px;
}
.monaco-diff-editor .char-insert,
.monaco-editor .char-insert,
.char-insert,
[class*="insertedTextBackground"] {
    background-color: rgba(80, 250, 123, 0.6) !important;
    border: 1px solid rgba(80, 250, 123, 0.8) !important;
    border-radius: 2px;
}

/* Monaco Glyph Margin Addition Decoration */
.monaco-addition-glyph {
    position: relative;
}
.monaco-addition-glyph::before {
    content: "+";
    color: #50fa7b; /* success green */
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-family: monospace;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}