/* static/css/public_theme.css */

:root {
    /* --- 1. LAYOUT COLORS (Default: Light Mode) --- */
    --bg-page: #f9fafb;      /* Tailwind gray-50 */
    --bg-card: #ffffff;      /* White */
    --bg-input: #f9fafb;     /* gray-50 */
    --border-input: #d1d5db; /* gray-300 */
    --text-heading: #111827; /* gray-900 */
    --text-body: #4b5563;    /* gray-600 */
    --text-input: #374151;   /* gray-700 */

    /* --- 2. BRAND COLORS (Default: Blue) --- */
    /* We define these initially, but they get overridden by [data-color] below */
    --brand-primary: #4f46e5; /* indigo-600 */
    --brand-hover: #4338ca;   /* indigo-700 */
    --brand-ring: #a5b4fc;    /* indigo-300 (for focus states) */
}

/* --- DARK MODE OVERRIDES --- */
[data-theme="dark"] {
    --bg-page: #111827;      /* gray-900 */
    --bg-card: #1f2937;      /* gray-800 */
    --bg-input: #374151;     /* gray-700 */
    --border-input: #4b5563; /* gray-600 */
    --text-heading: #f9fafb; /* gray-50 */
    --text-body: #d1d5db;    /* gray-300 */
    --text-input: #f3f4f6;   /* gray-100 */
}

/* --- COLOR SWATCH OVERRIDES --- */

/* Blue (Default) - No change needed, but explicit is good */
[data-color="blue"] {
    --brand-primary: #0d6efd;
    --brand-hover: #0b5ed7;
    --brand-ring: #9ec5fe;
}

/* Green */
[data-color="green"] {
    --brand-primary: #198754;
    --brand-hover: #157347;
    --brand-ring: #a3cfbb;
}

/* Red */
[data-color="red"] {
    --brand-primary: #dc3545;
    --brand-hover: #bb2d3b;
    --brand-ring: #f1aeb5;
}

/* Purple */
[data-color="purple"] {
    --brand-primary: #6f42c1;
    --brand-hover: #59359a;
    --brand-ring: #d0bdf4;
}

/* Orange */
[data-color="orange"] {
    --brand-primary: #fd7e14;
    --brand-hover: #ca6510;
    --brand-ring: #ffe69c;
}