:root {
    /* Brand Colors */
    --primary: #2563EB;
    /* Blue 600 */
    --primary-hover: #1D4ED8;
    /* Blue 700 */
    --primary-light: #EFF6FF;
    /* Blue 50 */

    /* Status Colors */
    --danger: #EF4444;
    /* Red 500 */
    --danger-bg: #FEF2F2;
    /* Red 50 */
    --success: #10B981;
    /* Emerald 500 */

    /* Neutral Colors (Light Mode) */
    --bg-app: #F3F4F6;
    /* Gray 100 */
    --bg-card: #FFFFFF;
    /* White */
    --text-main: #111827;
    /* Gray 900 */
    --text-muted: #6B7280;
    /* Gray 500 */
    --border: #E5E7EB;
    /* Gray 200 */
    --input-bg: #F9FAFB;
    /* Gray 50 */

    /* Dimensions */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --touch-target: 48px;
    /* Minimum tap size */
    --header-height: 60px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Neutral Colors (Dark Mode) */
        --bg-app: #0F172A;
        /* Slate 900 */
        --bg-card: #1E293B;
        /* Slate 800 */
        --text-main: #F8FAFC;
        /* Slate 50 */
        --text-muted: #94A3B8;
        /* Slate 400 */
        --border: #334155;
        /* Slate 700 */
        --input-bg: #020617;
        /* Slate 950 */

        --primary-light: #172554;
        /* Blue 950 */
        --danger-bg: #450A0A;
        /* Red 950 */
    }
}