:root {
    --primary-color: #0284c7;
    /* Sky 600 */
    --secondary-color: #0ea5e9;
    /* Sky 500 */
    --bg-color: #ffffff;
    --text-color: #334155;
    /* Slate 700 */
    --light-bg: #f0f9ff;
    /* Sky 50 */
}

[data-theme="dark"] {
    --primary-color: #38bdf8;
    /* Sky 400 */
    --secondary-color: #7dd3fc;
    /* Sky 300 */
    --bg-color: #0f172a;
    /* Slate 900 */
    --text-color: #cbd5e1;
    /* Slate 300 */
    --light-bg: #1e293b;
    /* Slate 800 */
}

[data-theme="teal"] {
    --primary-color: #0d9488;
    /* Teal 600 */
    --secondary-color: #14b8a6;
    /* Teal 500 */
    --bg-color: #ffffff;
    --text-color: #334155;
    --light-bg: #f0fdfa;
    /* Teal 50 */
}