[data-theme="light"] {
    /* =========================================================
       INTERNAL PALETTE (implementation / can stay stable)
       ========================================================= */
    --bg-page: #f8fafc; /* slate-50 */
    --bg-card-1: #ffffff; /* white */
    --bg-card-2: #f1f5f9; /* slate-100 */
    --bg-card-3: #e2e8f0; /* slate-200 */

    --border-soft: #cbd5e1; /* slate-300 */

    --text-primary: #0f172a; /* slate-900 */
    --text-muted: #475569; /* slate-600 */

    --accent-blue: #3b82f6; /* blue-500 */
    --accent-blue-soft: #eff6ff;
    --danger-soft: #fee2e2;
    --danger-border: #ef4444;
    /* =========================================================
       HYBRID UI TOKENS (THEMING API)
       Section-first + role-second naming
       ========================================================= */
    /* === Page / Global === */
    --page-bg: var(--bg-page);
    /* focus ring */
    --focus-ring-inner: var(--bg-card-1);
    --focus-ring-outer: #258cfb;
    /* === Borders (scoped usage) === */
    --border-hover: lightslategray;
    /* === 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.08);
    --projects-empty-bg: var(--bg-page);
    --projects-empty-border: var(--border-soft);
    /* === Project Shell (task board container) === */
    --project-shell-bg: linear-gradient(135deg, #e0f2fe, var(--bg-page));
    --project-shell-border: var(--border-soft);
    --project-shell-text: var(--text-primary);
    /* === Tasks (cards) === */
    --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.04);
    --task-shadow-hover: rgba(0,0,0,0.08);
    /* === Task Header === */
    --task-header-bg: linear-gradient(135deg, var(--bg-card-1), var(--bg-card-2));
    --task-title-text: var(--text-primary);
    /* === Toggle button === */
    --toggle-bg: var(--bg-card-1);
    --toggle-border: var(--border-soft);
    --toggle-text: var(--text-muted);
    --toggle-hover-bg: var(--accent-blue-soft);
    --toggle-hover-text: var(--accent-blue);
    --toggle-expanded-text: var(--accent-blue);
    /* === Icon buttons === */
    --icon-btn-bg: var(--bg-card-1);
    --icon-btn-border: var(--border-soft);
    --icon-btn-text: var(--text-muted);
    --icon-btn-hover-bg: var(--accent-blue-soft);
    --icon-btn-hover-text: var(--accent-blue);
    --icon-btn-hover-border: var(--border-hover);
    --icon-danger-hover-bg: var(--danger-soft);
    --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.08);
    /* === Task Highlight Pulse === */
    --task-highlight-bg-0: var(--accent-blue-soft); /* #eff6ff */
    --task-highlight-bg-50: #dbeafe;
    --task-highlight-glow-0: rgba(59,130,246, 0);
    --task-highlight-glow-50: rgba(59,130,246, 0.25);
    /* === Workspace Panels === */
    --panel-bg: var(--bg-card-1);
    --panel-border: #e5e7eb;
    --panel-header-bg: var(--bg-page);
    --panel-footer-bg: #fafafa;
    --panel-shadow: rgba(0,0,0,0.08);
    /* Primary header gradient */
    --panel-header-primary-bg: linear-gradient(to right, #eef2ff, #e0e7ff);
    --panel-header-primary-border: #dbeafe;
    /* Blue glow */
    --panel-glow: rgba(59,130,246,0.15);
    /* Inputs */
    --task-title-placeholder: #94a3b8;
    /* Comments */
    --comments-panel-bg: #fdfefe;
    --comment-item-bg: #f9fafb;
    --comment-item-border: var(--panel-border);
    /* Comment glow anim */
    --comment-glow-0: rgba(59, 130, 246, 0.35);
    --comment-border-0: rgba(59, 130, 246, 0.6);
    --comment-glow-60: rgba(59, 130, 246, 0.15);
    --comment-border-60: rgba(59, 130, 246, 0.4);
    --comment-glow-100: rgba(59, 130, 246, 0);
    /* Completed */
    --task-completed-text: #9ca3af;
    /*theme select*/
    --select-bg: #ffffff;
    --select-text: #0f172a;
    --select-border: #cbd5e1;
}

/*:root {*/
    /* INTERNAL PALETTE */
    /*--bg-page: #f8fafc;
    --bg-card-1: #ffffff;
    --bg-card-2: #f1f5f9;
    --bg-card-3: #e2e8f0;
    --border-soft: #cbd5e1;
    --text-primary: #0f172a;
    --text-muted: #475569;
    --accent-blue: #3b82f6;
    --accent-blue-soft: #eff6ff;
    --danger-soft: #fee2e2;
    --danger-border: #ef4444;*/
    /* HYBRID TOKENS */
    /* (everything you already defined) */
/*}*/