/* 
  Design System Variables 
  Theme: Professional Modern Freelancing Platform
*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

:root {
    /* Brand Colors */
    --primary-color: #2563EB;
    /* Royal Blue */
    --primary-dark: #1E40AF;
    /* Darker Blue for hover */
    --primary-light: #60A5FA;
    /* Lighter Blue */

    --secondary-color: #10B981;
    /* Emerald Green - Success/Action */
    --secondary-dark: #059669;
    --accent-color: #F59E0B;
    /* Amber - Highlights/Warnings */
    /* Neutral Colors */
    --text-main: #111827;
    /* Almost Black - Headings */
    --text-body: #4B5563;
    /* Dark Gray - Body Text */
    --text-muted: #9CA3AF;
    /* Light Gray - Placeholders */
    --text-light: #F9FAFB;
    /* White-ish - Text on Dark bg */

    --bg-body: #F3F4F6;
    /* Light Gray Background */
    --bg-card: #FFFFFF;
    /* White Card Background */
    --bg-input: #F9FAFB;
    --border-color: #E5E7EB;
    /* Light Border */
    --border-focus: #2563EB;
    /* Primary Color Border */

    --navbar-bg: rgba(255, 255, 255, 0.95);
    --footer-bg: #1F2937;
    /* Typography */
    --font-main: 'Cairo', sans-serif;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Dark Mode Support - Premium Palette */
[data-theme="dark"] {
    /* Backgrounds: Deep Slate Blue tones for a rich, modern feel */
    --bg-body: #0F172A;
    /* Slate 900 - Deepest background */
    --bg-card: #1E293B;
    /* Slate 800 - Slightly lighter for cards */
    --bg-input: #334155;
    /* Slate 700 - Distinct input background */
    /* Text: Soft whites to maintain readability without harsh contrast */
    --text-main: #F8FAFC;
    /* Slate 50 */
    --text-body: #CBD5E1;
    /* Slate 300 */
    --text-muted: #94A3B8;
    /* Slate 400 */
    /* Borders & Dividers */
    --border-color: #334155;
    /* Slate 700 */
    --border-focus: #3B82F6;
    /* Blue 500 */
    /* Premium Dark Shadows (Subtle Glows) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    /* Specialized Backgrounds */
    --navbar-bg: rgba(30, 41, 59, 0.95);
    /* Matches card bg with blur */
    --footer-bg: #020617;
    /* Slate 950 - Grounding footer */
}