/* =====================================================
   THEME & COLOR TOKENS
   =====================================================
   Edit this file to change the visual appearance.
   No coding knowledge required — just update the hex
   values, rgba values, or gradients below.

   LIGHT THEME:  :root { ... }
   DARK THEME:   :root[data-theme="dark"] { ... }
   SYSTEM DARK:  @media (prefers-color-scheme: dark) { ... }
   ===================================================== */

/* --- LIGHT THEME (default) --- */
:root {
    color-scheme: light;
    --bg: #f5f7fb;
    --surface: rgba(255, 255, 255, 0.95);
    --border: rgba(15, 23, 42, 0.12);
    --text: #0f172a;
    --muted: #475569;
    --accent: #1d7ede;
    --accent-strong: #145ca2;
    --glow:
        0 0 0 1px rgba(29, 126, 222, 0.22), 0 18px 50px rgba(29, 126, 222, 0.18);
    --shadow: 0 22px 70px rgba(15, 23, 42, 0.12);
    --card-radius: 18px;
    --overlay-top: linear-gradient(
        180deg,
        rgba(245, 247, 251, 0.9) 0%,
        rgba(245, 247, 251, 0.6) 60%,
        rgba(180, 210, 245, 0.35) 100%
    );
    --overlay-bottom: radial-gradient(
        120% 120% at 50% 0%,
        rgba(68, 148, 227, 0.65) 0%,
        rgba(68, 148, 227, 0.18) 50%,
        transparent 70%
    );
    --card-bg: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(234, 240, 248, 0.94) 100%
    );
    --panel-border: rgba(15, 23, 42, 0.12);
    --drop-border: rgba(29, 126, 222, 0.35);
    --drop-bg: rgba(255, 255, 255, 0.96);
    --panel-bg: rgba(255, 255, 255, 0.95);
    --hash-bg: rgba(255, 255, 255, 0.96);
    --font-base:
        "Noto Kufi Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-size-body: 14px;
    --font-size-title: 20px;
    --font-size-section: 18px;
    --font-size-label: 13px;
    --font-size-status: 12px;
    --font-size-button: 14px;
    --button-height: 44px;
}

/* --- DARK THEME (toggled via switch) --- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d1117;
    --surface: rgba(19, 26, 35, 0.92);
    --border: rgba(255, 255, 255, 0.08);
    --text: #f1f5f9;
    --muted: #9ca3af;
    --accent: #43a2ff;
    --accent-strong: #2f7cd8;
    --glow: 0 0 0 1px rgba(67, 162, 255, 0.3), 0 22px 60px rgba(0, 0, 0, 0.45);
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
    --card-radius: 18px;
    --overlay-top: linear-gradient(
        180deg,
        rgba(12, 18, 26, 0.92) 0%,
        rgba(12, 18, 26, 0.75) 60%,
        rgba(18, 92, 191, 0.35) 100%
    );
    --overlay-bottom: radial-gradient(
        120% 120% at 50% 0%,
        rgba(24, 121, 221, 0.9) 0%,
        rgba(24, 121, 221, 0.2) 50%,
        transparent 70%
    );
    --card-bg: linear-gradient(
        180deg,
        rgba(17, 24, 35, 0.94) 0%,
        rgba(12, 18, 26, 0.96) 100%
    );
    --panel-border: rgba(255, 255, 255, 0.08);
    --drop-border: rgba(67, 162, 255, 0.6);
    --drop-bg: rgba(16, 21, 30, 0.9);
    --panel-bg: rgba(18, 26, 36, 0.85);
    --hash-bg: rgba(18, 26, 36, 0.9);
}

/* --- SYSTEM DARK (when no manual toggle is set) --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: #0d1117;
        --surface: rgba(19, 26, 35, 0.92);
        --border: rgba(255, 255, 255, 0.08);
        --text: #f1f5f9;
        --muted: #9ca3af;
        --accent: #43a2ff;
        --accent-strong: #2f7cd8;
        --glow:
            0 0 0 1px rgba(67, 162, 255, 0.3), 0 22px 60px rgba(0, 0, 0, 0.45);
        --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
        --overlay-top: linear-gradient(
            180deg,
            rgba(12, 18, 26, 0.92) 0%,
            rgba(12, 18, 26, 0.75) 60%,
            rgba(18, 92, 191, 0.35) 100%
        );
        --overlay-bottom: radial-gradient(
            120% 120% at 50% 0%,
            rgba(24, 121, 221, 0.9) 0%,
            rgba(24, 121, 221, 0.2) 50%,
            transparent 70%
        );
    }
}