/**
 * Theme Variables
 *
 * CSS custom properties (variables) for theming
 * These are overridden by dark-theme.css and light-theme.css
 */

:root {
    /* =============================================== */
    /*              COLOR VARIABLES                   */
    /* =============================================== */

    /* Background Colors */
    --color-bg-primary: #1a202c;           /* Main background */
    --color-bg-secondary: #1f2937;         /* Panels, cards */
    --color-bg-tertiary: #2d3748;          /* Hover states, inputs */
    --color-bg-overlay: rgba(0, 0, 0, 0.75); /* Modals, dropdowns */

    /* Text Colors */
    --color-text-primary: #e2e8f0;         /* Main text */
    --color-text-secondary: #9ca3af;       /* Muted text */
    --color-text-tertiary: #6b7280;        /* Even more muted */
    --color-text-inverse: #1f2937;         /* Text on light backgrounds */

    /* Border Colors */
    --color-border-primary: #374151;       /* Main borders */
    --color-border-secondary: #4b5563;     /* Subtle borders */
    --color-border-focus: #3b82f6;         /* Focus states */

    /* Accent Colors */
    --color-accent-primary: #3b82f6;       /* Primary blue */
    --color-accent-success: #10b981;       /* Success green */
    --color-accent-warning: #f59e0b;       /* Warning amber */
    --color-accent-error: #ef4444;         /* Error red */
    --color-accent-info: #06b6d4;          /* Info cyan */

    /* Golden Layout */
    --color-gl-background: #0f172a;
    --color-gl-header: #1e293b;
    --color-gl-tab: #1e293b;
    --color-gl-tab-active: #0f172a;
    --color-gl-tab-text: #e2e8f0;
    --color-gl-tab-text-active: #f1f5f9;
    --color-gl-splitter: #334155;
    --color-gl-content: #1f2937;

    /* Console/Terminal */
    --color-console-bg: #1a202c;
    --color-console-text: #e2e8f0;
    --color-console-error: #ef4444;
    --color-console-warning: #f59e0b;
    --color-console-success: #10b981;
    --color-console-info: #06b6d4;

    /* File Browser */
    --color-file-hover: #2d3748;
    --color-file-active: #374151;
    --color-file-text: #e2e8f0;

    /* Buttons */
    --color-btn-primary-bg: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --color-btn-primary-hover: linear-gradient(135deg, #059669 0%, #047857 100%);
    --color-btn-secondary-bg: transparent;
    --color-btn-secondary-hover: rgba(75, 85, 99, 0.5);

    /* =============================================== */
    /*              SPACING & LAYOUT                  */
    /* =============================================== */

    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */

    /* =============================================== */
    /*              TYPOGRAPHY                        */
    /* =============================================== */

    --font-family-base: 'Inter', sans-serif;
    --font-family-mono: 'Inconsolata', monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* =============================================== */
    /*              BORDERS & RADIUS                  */
    /* =============================================== */

    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.375rem;  /* 6px */
    --border-radius-lg: 0.5rem;    /* 8px */
    --border-radius-xl: 0.75rem;   /* 12px */

    --border-width: 1px;
    --border-width-thick: 2px;

    /* =============================================== */
    /*              SHADOWS                           */
    /* =============================================== */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);

    /* =============================================== */
    /*              TRANSITIONS                       */
    /* =============================================== */

    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;

    /* =============================================== */
    /*              Z-INDEX LAYERS                    */
    /* =============================================== */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}