/*-- -------------------------- -->
<---   LifeOS CSS Variables    -->
<--- -------------------------- -*/

/* Color system and layout tokens for LifeOS dashboard
 * Source: d:\Websites\LifeOS\index.html (lines 19-66)
 * DO NOT modify these values - they are exact copies from the mockup
 */

/* Light Mode Colors */
:root {
    /* Base colors */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    /* Card colors */
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    /* Popover colors */
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    /* Primary colors */
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    /* Secondary colors */
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    /* Muted colors */
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    /* Accent colors */
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    /* Destructive colors */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    /* Border and input */
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;

    /* Focus ring */
    --ring: 0 0% 3.9%;

    /* Layout tokens */
    --radius: 0.5rem;
    --sidebar-width: 16rem;
    --topbar-height: 4rem;

    /* Finance semantic colors */
    --finance-success: 160 84% 39%;          /* rgb(5 150 105) — emerald-600 */
    --finance-success-light: 149 80% 90%;    /* rgb(236 253 245) — emerald-50 */
    --finance-danger: 0 84% 60%;             /* rgb(239 68 68) — red-500 */
    --finance-danger-light: 0 86% 97%;       /* rgb(254 242 242) — red-50 */
    --finance-warning: 28 93% 44%;           /* rgb(217 119 6) — amber-600 */
    --finance-warning-light: 55 92% 95%;     /* rgb(254 252 232) — yellow-50 */
    --finance-info: 221 83% 53%;             /* rgb(37 99 235) — blue-600 */
    --finance-info-light: 214 100% 97%;      /* rgb(239 246 255) — blue-50 */
    --finance-card-bg: 0 0% 100%;
    --finance-card-border: 0 0% 89.8%;
}

/* Dark Mode Colors */
.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;

    /* Finance semantic colors — dark mode overrides */
    --finance-success: 160 51% 49%;          /* rgb(52 211 153) — emerald-400 */
    --finance-success-light: 160 84% 39% / 0.15;
    --finance-danger: 0 91% 82%;             /* rgb(252 165 165) — red-300 */
    --finance-danger-light: 0 84% 60% / 0.15;
    --finance-warning: 43 96% 56%;           /* rgb(251 191 36) — amber-400 */
    --finance-warning-light: 28 93% 44% / 0.15;
    --finance-info: 213 94% 68%;             /* rgb(96 165 250) — blue-400 */
    --finance-info-light: 221 83% 53% / 0.15;
    --finance-card-bg: 240 6% 6%;            /* #0F0F12 */
    --finance-card-border: 240 6% 13%;       /* #1F1F23 */
}