/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Dalal Energy Brand ─────────────────────────────────────── */
    --primary:       #ffb300;      /* Vibrant Solar Yellow/Orange */
    --primary-light: #ffc94d;
    --primary-dark:  #e69a00;
    --primary-50:    #fffdf5;
    --primary-100:   #ffeecc;
    --primary-200:   #ffdd99;
    --primary-rgba:  rgba(255, 179, 0, 0.2);

    --accent:        #003366;      /* Deep Trust Blue */
    --accent-light:  #004b99;
    --accent-dark:   #001c38;

    /* ── Neutrals ────────────────────────────────────────────── */
    --bg:            #ffffff;
    --bg-card:       #ffffff;
    --bg-sidebar:    #0f172a;
    --bg-sidebar-hover:   rgba(255,255,255,0.06);
    --bg-sidebar-active:  rgba(255,179,0,0.18);
    --bg-input:      #f8fafc;
    --bg-hover:      #f8fafc;
    --bg-modal:      rgba(15,23,42,0.85);
    
    --bg-section-alt: #f4f6fa;
    --bg-section-dark:#111827;

    --text:           #1e293b;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-sidebar:         rgba(255,255,255,0.7);
    --text-sidebar-active:  #ffffff;
    --text-on-primary:      #111827;

    --border:        #e2e8f0;
    --border-focus:  #ffb300;
    --border-input:  #cbd5e1;

    /* ── Status ──────────────────────────────────────────────── */
    --success:      #10b981;
    --success-bg:   #ecfdf5;
    --success-light:#d1fae5;
    --warning:      #f59e0b;
    --warning-bg:   #fffbeb;
    --warning-light:#fef3c7;
    --danger:       #ef4444;
    --danger-bg:    #fef2f2;
    --danger-light: #fee2e2;
    --info:         #3b82f6;
    --info-bg:      #eff6ff;
    --info-light:   #dbeafe;

    /* ── Shadows (Richer, Floating) ──────────────────────────── */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
    --shadow:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.15);
    --shadow-glow: 0 0 25px rgba(255, 179, 0, 0.35);

    /* ── Layout ──────────────────────────────────────────────── */
    --sidebar-width:          256px;
    --sidebar-collapsed-width: 68px;
    --header-height:          72px;
    --radius:    8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ── Typography ──────────────────────────────────────────── */
    --font-sans: 'Outfit', 'Noto Sans Arabic', system-ui, sans-serif;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-md:   1.125rem;
    --font-size-lg:   1.25rem;
    --font-size-xl:   1.5rem;
    --font-size-2xl:  1.875rem;
    --font-size-3xl:  2.25rem;
    --font-size-4xl:  3rem;
    --font-size-5xl:  4rem;
    --line-height:    1.6;

    /* ── Transitions ─────────────────────────────────────────── */
    --transition:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Theme ──────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:       #0f172a;
    --bg-card:  #1e293b;
    --bg-sidebar:      #0b0f19;
    --bg-sidebar-hover:  rgba(255,255,255,0.05);
    --bg-sidebar-active: rgba(255,179,0,0.15);
    --bg-input: #1e293b;
    --bg-hover: #1e293b;
    
    --bg-section-alt: #1e293b;
    --bg-section-dark:#020617;

    --text:           #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;

    --border:       #334155;
    --border-input: #475569;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow:    0 4px 6px rgba(0,0,0,0.5);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.6);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.7);
}