/* /css/Global.css */

body {
    transition: background-color .3s, color .3s;
    background: var(--main-bg);
    color: var(--main-text)
}

.glass-header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow)
}

:root {
    --app-radius: .75rem;
    --main-bg: #F5F7FA;
    --main-text: #374151;
    --heading-color: #111827;
    --accent-color: #4F46E5;
    --accent-rgb: 79, 70, 229;
    --quote-bg: #EAF0F6;
    --quote-text: #4B5563;
    --code-bg: #EAF0F6;
    --code-text: #DC2626;
    --border-color: #E5E7EB;
    --table-header-bg: #EAF0F6;
    --header-bg: rgba(255, 255, 255, .9);
    --header-border: rgba(229, 231, 235, .5);
    --header-shadow: 0 6px 15px -3px rgba(0, 0, 0, .08), 0 3px 6px -2px rgba(0, 0, 0, .05);
    --card-bg: #fff;
    --card-border: #E5E7EB
}

.dark {
    --main-bg: #0F172A;
    --main-text: #E2E8F0;
    --heading-color: #F8FAFC;
    --accent-color: #818CF8;
    --accent-rgb: 129, 140, 248;
    --quote-bg: #1E293B;
    --quote-text: #94A3B8;
    --code-bg: #334155;
    --code-text: #F87171;
    --border-color: #334155;
    --table-header-bg: #0F172A;
    --header-bg: rgba(15, 23, 42, .9);
    --header-border: rgba(51, 65, 85, .5);
    --header-shadow: 0 4px 10px -1px rgba(0, 0, 0, .5), 0 4px 8px -2px rgba(0, 0, 0, .3);
    --card-bg: #1E293B;
    --card-border: #334155
}