/**
 * NoSpace Theme Engine
 * Centralized variables for Light (default) and Dark modes.
 */

:root {
    /* --- Light Theme (Default) --- */
    
    /* Backgrounds */
    --bg-body: #ffffff;
    --bg-surface: #f8f9fa;      /* Cards, sidebars */
    --bg-surface-hover: #e9ecef;
    
    /* Typography */
    --text-main: #1a1a1a;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-inverse: #ffffff;

    /* Brand / Accents */
    --color-primary: #224faa;   /* Legacy ref */
    --brand-primary: #224faa;
    --brand-accent: #667eea;
    
    /* Borders */
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.2);
    
    /* UI States */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);

    /* Header / Topbar */
    --bg-header: #ffffff;
    --text-header: #1a1a1a;
    --text-header-secondary: #4a5568;
    --border-header: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    /* --- Dark Theme Overrides --- */

    /* Backgrounds */
    --bg-body: #1a1a2e;
    --bg-surface: #1e1e2e;
    --bg-surface-hover: #252537;
    
    /* Typography */
    --text-main: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-inverse: #1a1a2e;

    /* Brand / Accents */
    --color-primary: #8b7bea;   /* Lightened for dark mode */
    --brand-primary: #8b7bea;
    --brand-accent: #9b6bc2;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    
    /* UI States */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);

    /* Header / Topbar */
    --bg-header: #000000;
    --text-header: #ffffff;
    --text-header-secondary: #a1a1aa;
    --border-header: rgba(255, 255, 255, 0.1);

    /* Misc */
    --link-color: #e2bc8a;
  
}

/* Apply Base Styles */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}