@import url('https://cdn.jsdelivr.net/npm/@fontsource/zalando-sans-expanded@latest/index.min.css');

/* @font-face {
    font-family: 'SF Pro AR';
    src: url('../fonts/alfont_com_SFProAR_semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
} */

:root {
    /* Font Selection */
    --font-primary: "IBM Plex Sans Arabic", sans-serif;

    /* Professional Blue Color Palette (No Gradients) */
    --primary-color: #0056b3;
    --primary-rgb: 0, 86, 179;
    --primary-light: #e7f1ff;
    --primary-soft: #cfe2ff;
    --primary-dark: #004085;
    --primary-hover: #004494;

    --bg-color: #f1f3f7;
    --card-bg: #ffffff;
    --card-bg-blurred: rgba(255, 255, 255, 0.8);
    --text-color: #1a1e21;
    --text-muted: #5f666d;
    --border-color: #e2e8f0;

    --success-color: #198754;
    --success-rgb: 25, 135, 84;
    --danger-color: #dc3545;
    --danger-color-rgb: 220, 53, 69;
    --warning-color: #ffc107;
    --info-color: #0ca5e9;

    --header-bg: #ffffff;
    --header-text: #0056b3;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
    --border-radius: 12px;

    /* Hierarchical Backgrounds (Light Mode) */
    --task-level-0: #f8fafc;
    --task-level-1: #ffffff;
    --task-level-2: #ffffff;
    --task-level-3: #ffffff;
    --surface-bg: #e9ecef;
    /* Darker surface background for light mode buttons/nav */
}

[data-theme="dark"] {
    /* Premium Midnight Blue Theme */
    --bg-color: #040711;
    /* Deeper, more luxurious blue-black */
    --card-bg: #0f172a;
    /* Rich navy cards */
    --card-bg-blurred: rgba(15, 23, 42, 0.85);
    --surface-bg: #1e293b;
    /* Slate inner surfaces */
    --text-color: #e2e8f0;
    /* Cleaner text color */
    --text-muted: #94a3b8;
    /* Sophisticated muted text */
    --border-color: #243147;
    /* More subtle blue-grey borders */

    /* Blue Accents - Keeping the current blue level as requested */
    --primary-color: #4489da;
    --primary-rgb: 68, 137, 218;
    --primary-light: rgba(68, 137, 218, 0.12);
    --primary-hover: #5ba3f2;
    --primary-dark: #1e3a5f;

    --header-bg: #040711;
    --header-text: #60a5fa;

    /* Semantic Colors for Dark Mode */
    --success-color: #22c55e;
    --success-rgb: 34, 197, 94;
    --danger-color: #ef4444;
    --danger-color-rgb: 239, 68, 68;
    --warning-color: #f59e0b;
    --info-color: #38bdf8;

    /* Professional Shadows for Dark Surfaces */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 15px 45px rgba(0, 0, 0, 0.6);

    /* Elevated Hierarchical Task Backgrounds (Midnight Blend) */
    --task-level-0: #0f172a;
    /* Darkest Navy */
    --task-level-1: #1e293b;
    /* Slightly lighter Slate */
    --task-level-2: #334155;
    /* Lighter Slate-Blue */
    --task-level-3: #475569;
    /* Lightest Blue-Grey */
}

/* ─── Global: keep user-typed digits as Western (Latin) numerals ─── */
/* IBM Plex Sans Arabic uses `locl` to swap ASCII digits → Eastern Arabic  */
/* when lang="ar". Disabling it for inputs keeps 1,2,3… as typed.          */
input,
textarea,
select,
[contenteditable] {
    font-feature-settings: "locl" 0;
}