/* ============================================
   CSS Custom Properties (Thematische Farben)
   ============================================ */
:root {
    --bg-primary: #1e1e1e;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #252525;
    --text-primary: #e0e0e0;
    --text-secondary: #aaa;
    --text-muted: #888;
    --accent-primary: #6c5ce7;
    --accent-secondary: #5a4dd6;
    --accent-hover: #8b7ee8;
    --paper-white: #fff;
    --stamp-red: #e74c3c;
    --folder-gray: #555;
    --success: #27ae60;
    --warning: #f39c12;
    --error: #e74c3c;
    --info: #3498db;

    /* Touch Targets */
    --touch-min: 44px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-width-mobile: 260px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Borders & Outlines */
    --border-color: #444;
    --border-color-muted: #333;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);

    /* Accent Opacities */
    --accent-primary-10: rgba(108, 92, 231, 0.1);
    --accent-primary-20: rgba(108, 92, 231, 0.2);
    --accent-primary-30: rgba(108, 92, 231, 0.3);
}