:root {
    /* =========================================================
       INTERNAL PALETTE – DARK
       ========================================================= */

    --bg-page: #0b1220; /* deep slate */
    --bg-card-1: #111827; /* base card */
    --bg-card-2: #1f2937; /* depth 1 */
    --bg-card-3: #273449; /* depth 2 */

    --border-soft: #334155; /* slate-700 */

    --text-primary: #e5e7eb; /* soft white */
    --text-muted: #94a3b8; /* muted slate */

    --accent-blue: #3b82f6; /* keep brand blue */
    --accent-blue-soft: #1e3a5f; /* dark hover tint */

    --danger-soft: #3f1d1d;
    --danger-border: #ef4444;
    /* =========================================================
       HYBRID UI TOKENS
       ========================================================= */
    /* Page */
    --page-bg: var(--bg-page);
    /* Focus */
    --focus-ring-inner: #0b1220;
    --focus-ring-outer: #3b82f6;
    /* Borders */
    --border-hover: #475569;
    /* Projects */
    --project-card-bg: linear-gradient(135deg, var(--bg-card-1), var(--bg-card-2));
    --project-card-border: var(--border-soft);
    --project-card-border-hover: var(--border-hover);
    --project-card-text: var(--text-primary);
    --project-card-shadow-hover: rgba(0,0,0,0.6);
    --projects-empty-bg: var(--bg-card-1);
    --projects-empty-border: var(--border-soft);
    /* Project Shell */
    --project-shell-bg: linear-gradient(135deg, #0f172a, #111827);
    --project-shell-border: var(--border-soft);
    --project-shell-text: var(--text-primary);
    /* Tasks */
    --task-bg: var(--bg-card-1);
    --task-bg-depth-1: var(--bg-card-2);
    --task-bg-depth-2: var(--bg-card-3);
    --task-border: var(--border-soft);
    --task-border-hover: var(--border-hover);
    --task-shadow: rgba(0,0,0,0.6);
    --task-shadow-hover: rgba(0,0,0,0.8);
    /* Task Header */
    --task-header-bg: linear-gradient(135deg, var(--bg-card-1), var(--bg-card-2));
    --task-title-text: var(--text-primary);
    /* Toggle */
    --toggle-bg: var(--bg-card-2);
    --toggle-border: var(--border-soft);
    --toggle-text: var(--text-muted);
    --toggle-hover-bg: #1e3a5f;
    --toggle-hover-text: var(--accent-blue);
    --toggle-expanded-text: var(--accent-blue);
    /* Icons */
    --icon-btn-bg: var(--bg-card-2);
    --icon-btn-border: var(--border-soft);
    --icon-btn-text: var(--text-muted);
    --icon-btn-hover-bg: #1e3a5f;
    --icon-btn-hover-text: var(--accent-blue);
    --icon-btn-hover-border: var(--border-hover);
    --icon-danger-hover-bg: #3f1d1d;
    --icon-danger-hover-border: var(--danger-border);
    --icon-danger-hover-text: var(--danger-border);
    /* Form Shell */
    --form-shell-bg: linear-gradient(135deg, var(--bg-card-1), var(--bg-card-2));
    --form-shell-border: var(--border-soft);
    --form-shell-shadow: rgba(0,0,0,0.6);
    /* Task Highlight Pulse */
    --task-highlight-bg-0: #1e3a5f;
    --task-highlight-bg-50: #1d4ed8;
    --task-highlight-glow-0: rgba(59,130,246, 0);
    --task-highlight-glow-50: rgba(59,130,246, 0.35);
    /* Panels */
    --panel-bg: var(--bg-card-1);
    --panel-border: #334155;
    --panel-header-bg: var(--bg-card-2);
    --panel-footer-bg: #0f172a;
    --panel-shadow: rgba(0,0,0,0.6);
    --panel-header-primary-bg: linear-gradient(to right, #1e293b, #1f2937);
    --panel-header-primary-border: #334155;
    --panel-glow: rgba(59,130,246,0.25);
    /* Inputs */
    --task-title-placeholder: #64748b;
    /* Comments */
    --comments-panel-bg: var(--bg-card-1);
    --comment-item-bg: var(--bg-card-2);
    --comment-item-border: var(--border-soft);
    /* Comment animation */
    --comment-glow-0: rgba(59,130,246, 0.45);
    --comment-border-0: rgba(59,130,246, 0.6);
    --comment-glow-60: rgba(59,130,246, 0.25);
    --comment-border-60: rgba(59,130,246, 0.4);
    --comment-glow-100: rgba(59,130,246, 0);
    /* Completed */
    --task-completed-text: #64748b;
    /*theme select*/
    --select-bg: #111827;
    --select-text: #e5e7eb;
    --select-border: #374151;
}