/* src/main/resources/static/frontend/shared/colors/colors.css */

/* Global Color Variables */
:root {
    /* Typography for comfortable reading */
    --font-sans:
        "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
    --font-mono: "Roboto Mono", "Consolas", "Monaco", "Courier New", monospace;
    --font-size-base: 15px;
    --line-height-base: 1.6;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Layout Sizing - Ultrawide Default */
    --content-width: 1920px;
    --visualization-width: 1920px;
    --content-padding: 24px;

    /* Base Theme Variables - Will be overridden by theme classes */
    --sidebar-bg: #0a0c10;
    --sidebar-header-bg: #0a0c10;
    --sidebar-text: #e5e7eb;
    --sidebar-border: #1e293b;
    --sidebar-hover: #1e293b;
    --sidebar-active: #3b82f6;

    /* Main Toolbar - Same as Sidebar Header */
    --toolbar-bg: #0a0c10;
    --toolbar-text: #e5e7eb;
    --toolbar-border: #1e293b;
    --toolbar-button-bg: #0f172a;
    --toolbar-button-hover: #1e293b;

    /* Content Area - Light Background */
    --content-bg: #f8f9fa;
    --content-text: #0f172a;

    /* Visualization - Light Background */
    --visualization-bg: #f8f9fa;
    --visualization-text: #0f172a;

    /* Tables */
    --table-header-bg: #000000;
    --table-header-text: #ffffff;
    --table-cell-bg: #ffffff;
    --table-cell-text: #000000;
    --table-border: #cccccc;
    --table-stripe-bg: #f3f4f6;
    --table-hover-bg: #f9fafb;

    /* Lists */
    --list-item-bg: transparent;
    --list-item-hover: #f3f4f6;
    --list-item-active: #e5e7eb;
    --list-border: #e5e7eb;

    /* Typography */
    --heading1-color: #111111;
    --heading2-color: #222222;
    --heading3-color: #333333;
    --paragraph-color: #222222;
    --link-color: #2563eb;
    --link-visited-color: #7c3aed;

    /* Buttons */
    --button-primary-bg: #3b82f6;
    --button-primary-text: #ffffff;
    --button-primary-hover: #2563eb;
    --button-secondary-bg: #6b7280;
    --button-secondary-text: #ffffff;
    --button-secondary-hover: #4b5563;

    /* Forms */
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --input-border: #d1d5db;
    --input-focus-border: #3b82f6;

    /* Code */
    --code-bg: #f3f4f6;
    --code-text: #0f172a;
    --code-border: #d1d5db;
    --inline-code-text: #0f172a; /* Inline code default (not in pre blocks) */

    /* Blockquotes */
    --blockquote-bg: rgba(59, 130, 246, 0.08);
    --blockquote-border: #3b82f6;
    --blockquote-text: #0f172a;

    /* Status Colors */
    --success-color: #22c55e;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;

    /* Unified soft text tone for inline code and subdued text */
    --text-soft: #f8f8ff;
    --text-dark-modern: #FFFAFA;
    --text-dark-professional: #f8f8ff;
}

/* Global typography settings for comfortable reading */
body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Theme 1: Dark Modern */
body.theme-dark-modern,
body.feature-workitemmanager.theme-dark-modern,
body.feature-home.theme-dark-modern {
    --sidebar-bg: #1b1e26 !important;
    --sidebar-header-bg: #22252d !important;
    --sidebar-text: var(--text-dark-modern) !important;
    --sidebar-border: #2b2e36 !important;
    --sidebar-hover: #22252d !important;
    --sidebar-active: #3b82f6 !important;

    --toolbar-bg: #22252d !important;
    --toolbar-text: var(--text-dark-modern) !important;
    --toolbar-border: #2b2e36 !important;
    --toolbar-button-bg: #1b1e26 !important;
    --toolbar-button-hover: #22252d !important;

    /* Dark gray slate with balanced blue-gray mix */
    --content-bg: #1b1e26 !important;
    --content-text: var(--text-dark-modern) !important; /* comfortable readability */

    --visualization-bg: #1b1e26 !important;
    --visualization-text: var(--text-dark-modern) !important; /* matches body text */

    --heading1-color: var(--text-dark-modern) !important; /* H1 */
    --heading2-color: var(--text-dark-modern) !important; /* H2 */
    --heading3-color: var(--text-dark-modern) !important; /* H3 */
    --paragraph-color: var(--text-dark-modern) !important; /* body text */

    --button-primary-bg: #3b82f6 !important;
    --button-primary-hover: #2563eb !important;

    --link-color: #60a5fa !important;
    --link-visited-color: #93c5fd !important;

    /* Code blocks */
    --code-bg: #121722 !important;
    --code-text: #e6eaf2 !important; /* Code blocks (pre > code) stay light */
    --code-border: #2a3242 !important;
    --inline-code-text: var(--text-dark-modern) !important; /* Inline code uses softer gray */

    /* Text color variables */
    --text-on-dark-bg: var(--text-dark-modern) !important; /* comfortable on dark */
    --text-on-light-bg: #c9cdd3 !important; /* consistent with body */

    /* Blockquotes - Dark theme */
    --blockquote-bg: rgba(59, 130, 246, 0.15) !important;
    --blockquote-border: #3b82f6 !important;
    --blockquote-text: var(--text-dark-modern) !important;
}

/* Theme 2: Dark Professional */
body.theme-dark-professional,
body.feature-workitemmanager.theme-dark-professional,
body.feature-home.theme-dark-professional {
    --sidebar-bg: #0f1419 !important;
    --sidebar-header-bg: #16181d !important;
    --sidebar-text: var(--text-dark-professional) !important;
    --sidebar-border: #1e2228 !important;
    --sidebar-hover: #16181d !important;
    --sidebar-active: #6b7280 !important;

    --toolbar-bg: #16181d !important;
    --toolbar-text: var(--text-dark-professional) !important;
    --toolbar-border: #1e2228 !important;
    --toolbar-button-bg: #0f1419 !important;
    --toolbar-button-hover: #16181d !important;

    --content-bg: #0f1419 !important;
    --content-text: var(--text-dark-professional) !important; /* centralized soft tone */

    --visualization-bg: #0f1419 !important;
    --visualization-text: var(--text-dark-professional) !important; /* centralized soft tone */

    --heading1-color: var(--text-dark-professional) !important; /* softer than pure white */
    --heading2-color: var(--text-dark-professional) !important; /* centralized soft tone */
    --heading3-color: var(--text-dark-professional) !important;
    --paragraph-color: var(--text-dark-professional) !important; /* centralized soft tone */

    --button-primary-bg: #6b7280 !important;
    --button-primary-hover: #4b5563 !important;

    --link-color: #60a5fa !important;
    --link-visited-color: #a78bfa !important;

    /* Code blocks */
    --code-bg: #000000 !important;
    --code-text: #e6eaf2 !important; /* Code blocks (pre > code) stay light */
    --code-border: #1a212e !important;
    --inline-code-text: var(--text-dark-professional) !important; /* Inline code uses softer gray */

    --text-on-dark-bg: var(--text-dark-professional) !important; /* softer gray instead of harsh white */
    /* CHANGEMENT PRINCIPAL: */
    --text-on-light-bg: var(--text-dark-professional) !important; /* comfortable reading color */

    /* Blockquotes - Dark Professional theme */
    --blockquote-bg: rgba(107, 114, 128, 0.15) !important;
    --blockquote-border: #6b7280 !important;
    --blockquote-text: var(--text-dark-professional) !important;
}

/* Theme 3: Light Clean */
body.theme-light-clean,
body.feature-workitemmanager.theme-light-clean,
body.feature-home.theme-light-clean {
    --sidebar-bg: #f8f9fa !important;
    --sidebar-header-bg: #f1f3f5 !important;
    --sidebar-text: #2c3e50 !important;
    --sidebar-border: #e1e4e8 !important;
    --sidebar-hover: #f1f3f5 !important;
    --sidebar-active: #6366f1 !important;

    --toolbar-bg: #f1f3f5 !important;
    --toolbar-text: #2c3e50 !important;
    --toolbar-border: #e1e4e8 !important;
    --toolbar-button-bg: #f8f9fa !important;
    --toolbar-button-hover: #f1f3f5 !important;

    --content-bg: #ffffff !important;
    --content-text: #5a6c7d !important; /* medium gray, very comfortable for reading */

    --visualization-bg: #ffffff !important;
    --visualization-text: #5a6c7d !important; /* medium gray, very comfortable for reading */

    --heading1-color: #2d3748 !important; /* softer than harsh black */
    --heading2-color: #4a5568 !important; /* comfortable dark gray */
    --heading3-color: #5a6c7d !important; /* medium gray */
    --paragraph-color: #5a6c7d !important; /* comfortable medium gray for body text */

    --button-primary-bg: #6366f1 !important;
    --button-primary-hover: #4f46e5 !important;

    --link-color: #6366f1 !important;
    --link-visited-color: #8b5cf6 !important;

    /* Text color variables for edit mode */
    --text-on-dark-bg: #ffffff !important;
    --text-on-light-bg: #5a6c7d !important; /* medium gray, comfortable for reading */

    /* Code - Light theme specific */
    --code-bg: #000000 !important; /* Code blocks stay dark */
    --code-text: #e6eaf2 !important; /* Code blocks (pre > code) text stays light */
    --code-border: #1a212e !important;
    --inline-code-text: #5a6c7d !important; /* Inline code uses comfortable medium gray like paragraphs */

    /* Blockquotes - Light Clean theme */
    --blockquote-bg: rgba(99, 102, 241, 0.08) !important;
    --blockquote-border: #6366f1 !important;
    --blockquote-text: #2c3e50 !important;
}