:root {
    /* Core */
    --bg: #ffffff;
    --card: #ffffff;
    --text: #111827;
    --muted: #667085;
    --border: #e5e7eb;

    /* Brand */
    --primary: #2563eb;
    --soft: #eff6ff;

    /* Extended UI */
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --code-bg: #f3f4f6;
    --sidebar-bg: #f8fafc;
    --hover-bg: #f1f5f9;
    --danger: #dc2626;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
}


html[data-theme="dark"] {
    /* Core */
    --bg: #0b1120;
    --card: #111827;
    --text: #f3f4f6;
    --muted: #9ca3af;
    --border: #253047;

    /* Brand */
    --primary: #60a5fa;
    --soft: #172554;

    /* Extended UI */
    --card-bg: #111827;
    --input-bg: #0f172a;
    --code-bg: #0f172a;
    --sidebar-bg: #0f172a;
    --hover-bg: #1e293b;
    --danger: #f87171;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
}