/* ==========================================================================
   DataCleanse Studio - Base CSS (Design System & Theme Tokens)
   ========================================================================== */

:root {
    --bg-main: #0b0f19;
    --bg-card: #151c2c;
    --bg-card-hover: #1c263c;
    --bg-nav: #111827;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-focus: #6366f1;
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --accent-indigo: #6366f1;
    --accent-violet: #8b5cf6;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;
    --accent-blue: #3b82f6;
    --accent-teal: #14b8a6;
    
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-emerald: linear-gradient(135deg, #10b981 0%, #059669 100%);
    
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.dark-theme {
    --bg-main: #0b0f19;
    --bg-card: #151c2c;
    --bg-card-hover: #1c263c;
    --bg-nav: #111827;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-focus: #6366f1;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --table-header-bg: #1e293b;
    --table-header-text: #f8fafc;
    --form-bg: #0f172a;

    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.light-theme {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-nav: #ffffff;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-focus: #6366f1;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --table-header-bg: #f1f5f9;
    --table-header-text: #0f172a;
    --form-bg: #ffffff;

    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Utilities for Spacing */
.mb-1 { margin-bottom: 0.4rem !important; }
.mb-2 { margin-bottom: 0.8rem !important; }
.mb-3 { margin-bottom: 1.2rem !important; }
.mb-4 { margin-bottom: 1.8rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }

.mt-1 { margin-top: 0.4rem !important; }
.mt-2 { margin-top: 0.8rem !important; }
.mt-3 { margin-top: 1.2rem !important; }
.mt-4 { margin-top: 1.8rem !important; }
.mt-5 { margin-top: 2.5rem !important; }

.pt-3 { padding-top: 1.2rem !important; }
.pt-4 { padding-top: 1.8rem !important; }

.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.text-emerald { color: var(--accent-emerald) !important; }
.text-blue { color: var(--accent-blue) !important; }
.text-indigo { color: var(--accent-indigo) !important; }
.text-amber { color: var(--accent-amber) !important; }
.text-rose { color: var(--accent-rose) !important; }

.p-0 { padding: 0 !important; }