/* =========================================
   CSS Variables & Root Configuration
   ========================================= */
:root {
    /* Basic Colors */
    --app-bg-light: #f9f9f9;
    --app-bg-dark: #1b1b1b;
    --app-text-light: #333333;
    --app-text-dark: #e0e0e0;
    
    /* Editor Colors */
    --editor-bg-light: #ffffff;
    --editor-bg-dark: #282c34;
    --editor-gutter-bg-light: #f0f0f0;
    --editor-gutter-bg-dark: #21252b;
    --editor-border-light: #dcdcdc;
    --editor-border-dark: #444444;
    --editor-caret-light: #000000;
    --editor-caret-dark: #ffffff;

    /* Syntax Highlighting Colors (Default/Light) - High Contrast */
    --sh-comment: #2e7d32;
    --sh-keyword: #0d47a1;
    --sh-string: #b71c1c;
    --sh-number: #004d40;
    --sh-function: #3e2723;
    --sh-operator: #1a1a1a;

    /* Console Colors */
    --console-bg-light: #ffffff;
    --console-bg-dark: #282c34;
    --console-info-bg: #e8f4fd;
    --console-error-bg: #fff0f0;
    --console-error-text: #d32f2f;
    --console-alert-bg: #fff3cd; 
    --console-alert-text: #856404;
    --console-security-bg: #e3f2fd; /* Light Blue for blocked actions */
    --console-security-text: #0d47a1;
    --console-log-text: #24292e;
    
    /* Dark Mode Overrides */
    --console-log-text-dark: #abb2bf;
    --console-info-bg-dark: #1e3a5f;
    --console-error-bg-dark: #4b1a1a;
    --console-error-text-dark: #ff6b6b;
    --console-alert-bg-dark: #4d3e14;
    --console-alert-text-dark: #ffd966;
    --console-security-bg-dark: #102a43;
    --console-security-text-dark: #82cfff;

    /* Suggest Widget Colors */
    --suggest-bg-light: #f3f3f3;
    --suggest-bg-dark: #252526;
    --suggest-hover-light: #0060c0;
    --suggest-hover-dark: #094771;
    --suggest-text-light: #333333;
    --suggest-text-dark: #cccccc;
    --suggest-desc-light: #666666;
    --suggest-desc-dark: #888888;

    /* Accent & UI */
    --accent-color: #149eff88;
    --accent-color-solid: #149eff;
    --btn-hover-bg: rgba(20, 158, 255, 0.1);
    
    /* Dimensions */
    --header-height: 60px;
    --spacing-unit: 1rem;

    /* Typography */
    --code-font-family: 'Menlo', 'Consolas', 'Monaco', 'Courier New', monospace;
    --code-font-size: 14px;
    --code-font-weight: 600; 
    --code-line-height: 1.5;
    --code-padding: 10px;
}

/* Default Light Mode */
body {
    --app-bg: var(--app-bg-light);
    --app-text: var(--app-text-light);
    --editor-bg: var(--editor-bg-light);
    --editor-gutter-bg: var(--editor-gutter-bg-light);
    --editor-border: var(--editor-border-light);
    --console-bg: var(--console-bg-light);
    --console-text: var(--console-log-text);
    --editor-caret: var(--editor-caret-light);
    --suggest-bg: var(--suggest-bg-light);
    --suggest-text: var(--suggest-text-light);
    --suggest-hover: var(--suggest-hover-light);
    --suggest-hover-text: #ffffff;
    --suggest-desc: var(--suggest-desc-light);
}

/* Dark Mode */
body.dark-mode {
    --app-bg: var(--app-bg-dark);
    --app-text: var(--app-text-dark);
    --editor-bg: var(--editor-bg-dark);
    --editor-gutter-bg: var(--editor-gutter-bg-dark);
    --editor-border: var(--editor-border-dark);
    --console-bg: var(--console-bg-dark);
    --console-text: var(--console-log-text-dark);
    --editor-caret: var(--editor-caret-dark);
    --suggest-bg: var(--suggest-bg-dark);
    --suggest-text: var(--suggest-text-dark);
    --suggest-hover: var(--suggest-hover-dark);
    --suggest-hover-text: #ffffff;
    --suggest-desc: var(--suggest-desc-dark);

    --sh-comment: #6a9955;
    --sh-keyword: #569cd6;
    --sh-string: #ce9178;
    --sh-number: #b5cea8;
    --sh-function: #dcdcaa;
    --sh-operator: #d4d4d4;
}

/* =========================================
   Global Resets
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--app-bg);
    color: var(--app-text);
    transition: background-color 0.3s, color 0.3s;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.js-playground-hidden { display: none !important; }

/* Generic code block style (e.g. for descriptions) */
code {
    background-color: rgba(0,0,0,0.05);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: var(--code-font-family);
}
body.dark-mode code {
    background-color: rgba(255,255,255,0.1);
}