/**
 * LifeOS Design System - Design Tokens
 * 
 * This file defines all design tokens for the LifeOS application.
 * Tokens are organized into three layers:
 *   1. Primitives - Raw values (colors, spacing, typography)
 *   2. Semantic - Purpose-based tokens mapped to primitives
 *   3. Module - Module-specific color scales
 * 
 * Dark mode is the default. Light mode uses [data-theme="light"].
 * 
 * @see docs/design/MODULE-COLORS.md for color philosophy
 * @see docs/design/HEALTH-UI-AUDIT.md for existing patterns
 */

/* ==========================================================================
   1. PRIMITIVE TOKENS - Raw Values
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1.1 Color Primitives (OKLCH)
     --------------------------------------------------------------------------
     Using OKLCH for perceptually uniform color manipulation.
     Format: oklch(lightness chroma hue)
  */
  
  /* Neutral Scale (Slate-tinted grays) */
  --primitive-neutral-0: oklch(1 0 0);                    /* #ffffff */
  --primitive-neutral-50: oklch(0.984 0.003 247.86);      /* #f8fafc */
  --primitive-neutral-100: oklch(0.968 0.007 247.90);     /* #f1f5f9 */
  --primitive-neutral-200: oklch(0.929 0.013 255.51);     /* #e2e8f0 */
  --primitive-neutral-300: oklch(0.869 0.022 252.89);     /* #cbd5e1 */
  --primitive-neutral-400: oklch(0.704 0.040 256.79);     /* #94a3b8 */
  --primitive-neutral-500: oklch(0.554 0.046 257.42);     /* #64748b */
  --primitive-neutral-600: oklch(0.446 0.043 257.28);     /* #475569 */
  --primitive-neutral-700: oklch(0.372 0.044 257.29);     /* #334155 */
  --primitive-neutral-800: oklch(0.279 0.041 260.03);     /* #1e293b */
  --primitive-neutral-900: oklch(0.208 0.042 265.76);     /* #0f172a */
  --primitive-neutral-950: oklch(0.129 0.042 264.70);     /* #020617 */
  
  /* Sky Blue (Health) */
  --primitive-sky-50: oklch(0.977 0.013 236.62);          /* #f0f9ff */
  --primitive-sky-100: oklch(0.951 0.026 236.82);         /* #e0f2fe */
  --primitive-sky-200: oklch(0.901 0.058 230.90);         /* #bae6fd */
  --primitive-sky-300: oklch(0.828 0.111 230.32);         /* #7dd3fc */
  --primitive-sky-400: oklch(0.746 0.160 232.66);         /* #38bdf8 */
  --primitive-sky-500: oklch(0.685 0.169 237.32);         /* #0ea5e9 */
  --primitive-sky-600: oklch(0.588 0.158 241.97);         /* #0284c7 */
  --primitive-sky-700: oklch(0.500 0.134 242.75);         /* #0369a1 */
  --primitive-sky-800: oklch(0.443 0.110 240.79);         /* #075985 */
  --primitive-sky-900: oklch(0.391 0.090 240.88);         /* #0c4a6e */
  --primitive-sky-950: oklch(0.293 0.066 243.16);         /* #082f49 */
  
  /* Emerald (Finance) */
  --primitive-emerald-50: oklch(0.979 0.021 166.11);      /* #ecfdf5 */
  --primitive-emerald-100: oklch(0.950 0.052 163.05);     /* #d1fae5 */
  --primitive-emerald-200: oklch(0.905 0.093 164.15);     /* #a7f3d0 */
  --primitive-emerald-300: oklch(0.845 0.143 164.98);     /* #6ee7b7 */
  --primitive-emerald-400: oklch(0.765 0.177 163.22);     /* #34d399 */
  --primitive-emerald-500: oklch(0.696 0.170 162.48);     /* #10b981 */
  --primitive-emerald-600: oklch(0.596 0.145 163.23);     /* #059669 */
  --primitive-emerald-700: oklch(0.508 0.118 165.61);     /* #047857 */
  --primitive-emerald-800: oklch(0.432 0.095 166.91);     /* #065f46 */
  --primitive-emerald-900: oklch(0.378 0.077 168.94);     /* #064e3b */
  --primitive-emerald-950: oklch(0.262 0.051 172.55);     /* #022c22 */
  
  /* Violet (Agent) */
  --primitive-violet-50: oklch(0.969 0.016 293.76);       /* #f5f3ff */
  --primitive-violet-100: oklch(0.943 0.029 294.59);      /* #ede9fe */
  --primitive-violet-200: oklch(0.894 0.057 293.28);      /* #ddd6fe */
  --primitive-violet-300: oklch(0.811 0.111 293.57);      /* #c4b5fd */
  --primitive-violet-400: oklch(0.702 0.183 293.54);      /* #a78bfa */
  --primitive-violet-500: oklch(0.606 0.250 292.72);      /* #8b5cf6 */
  --primitive-violet-600: oklch(0.541 0.281 293.01);      /* #7c3aed */
  --primitive-violet-700: oklch(0.491 0.270 292.58);      /* #6d28d9 */
  --primitive-violet-800: oklch(0.432 0.232 292.76);      /* #5b21b6 */
  --primitive-violet-900: oklch(0.380 0.189 293.75);      /* #4c1d95 */
  --primitive-violet-950: oklch(0.283 0.141 291.09);      /* #2e1065 */
  
  /* Amber (Home) */
  --primitive-amber-50: oklch(0.987 0.022 95.28);         /* #fffbeb */
  --primitive-amber-100: oklch(0.962 0.059 95.62);        /* #fef3c7 */
  --primitive-amber-200: oklch(0.924 0.120 95.75);        /* #fde68a */
  --primitive-amber-300: oklch(0.879 0.169 91.61);        /* #fcd34d */
  --primitive-amber-400: oklch(0.828 0.189 84.43);        /* #fbbf24 */
  --primitive-amber-500: oklch(0.769 0.188 70.08);        /* #f59e0b */
  --primitive-amber-600: oklch(0.666 0.179 58.32);        /* #d97706 */
  --primitive-amber-700: oklch(0.555 0.163 49.00);        /* #b45309 */
  --primitive-amber-800: oklch(0.473 0.137 46.20);        /* #92400e */
  --primitive-amber-900: oklch(0.414 0.112 45.90);        /* #78350f */
  --primitive-amber-950: oklch(0.279 0.077 45.64);        /* #451a03 */
  
  /* Slate (Vehicles) */
  --primitive-slate-50: oklch(0.984 0.003 247.86);        /* #f8fafc */
  --primitive-slate-100: oklch(0.968 0.007 247.90);       /* #f1f5f9 */
  --primitive-slate-200: oklch(0.929 0.013 255.51);       /* #e2e8f0 */
  --primitive-slate-300: oklch(0.869 0.022 252.89);       /* #cbd5e1 */
  --primitive-slate-400: oklch(0.704 0.040 256.79);       /* #94a3b8 */
  --primitive-slate-500: oklch(0.554 0.046 257.42);       /* #64748b */
  --primitive-slate-600: oklch(0.446 0.043 257.28);       /* #475569 */
  --primitive-slate-700: oklch(0.372 0.044 257.29);       /* #334155 */
  --primitive-slate-800: oklch(0.279 0.041 260.03);       /* #1e293b */
  --primitive-slate-900: oklch(0.208 0.042 265.76);       /* #0f172a */
  --primitive-slate-950: oklch(0.129 0.042 264.70);       /* #020617 */
  
  /* Rose (Pets) */
  --primitive-rose-50: oklch(0.969 0.015 12.42);          /* #fff1f2 */
  --primitive-rose-100: oklch(0.941 0.030 12.58);         /* #ffe4e6 */
  --primitive-rose-200: oklch(0.892 0.058 10.00);         /* #fecdd3 */
  --primitive-rose-300: oklch(0.810 0.117 11.64);         /* #fda4af */
  --primitive-rose-400: oklch(0.712 0.194 13.43);         /* #fb7185 */
  --primitive-rose-500: oklch(0.645 0.246 16.44);         /* #f43f5e */
  --primitive-rose-600: oklch(0.586 0.253 17.59);         /* #e11d48 */
  --primitive-rose-700: oklch(0.514 0.222 16.94);         /* #be123c */
  --primitive-rose-800: oklch(0.455 0.188 13.70);         /* #9f1239 */
  --primitive-rose-900: oklch(0.410 0.159 10.27);         /* #881337 */
  --primitive-rose-950: oklch(0.271 0.105 12.09);         /* #4c0519 */
  
  /* Fuchsia (Family) */
  --primitive-fuchsia-50: oklch(0.977 0.017 320.06);      /* #fdf4ff */
  --primitive-fuchsia-100: oklch(0.952 0.037 318.85);     /* #fae8ff */
  --primitive-fuchsia-200: oklch(0.903 0.076 319.62);     /* #f5d0fe */
  --primitive-fuchsia-300: oklch(0.833 0.145 321.43);     /* #f0abfc */
  --primitive-fuchsia-400: oklch(0.740 0.238 322.16);     /* #e879f9 */
  --primitive-fuchsia-500: oklch(0.667 0.295 322.15);     /* #d946ef */
  --primitive-fuchsia-600: oklch(0.591 0.293 322.90);     /* #c026d3 */
  --primitive-fuchsia-700: oklch(0.518 0.253 323.95);     /* #a21caf */
  --primitive-fuchsia-800: oklch(0.452 0.211 324.59);     /* #86198f */
  --primitive-fuchsia-900: oklch(0.401 0.170 325.61);     /* #701a75 */
  --primitive-fuchsia-950: oklch(0.293 0.136 325.66);     /* #4a044e */
  
  /* Cyan (Contacts) */
  --primitive-cyan-50: oklch(0.984 0.019 200.87);         /* #ecfeff */
  --primitive-cyan-100: oklch(0.956 0.045 203.39);        /* #cffafe */
  --primitive-cyan-200: oklch(0.917 0.080 205.04);        /* #a5f3fc */
  --primitive-cyan-300: oklch(0.865 0.127 207.08);        /* #67e8f9 */
  --primitive-cyan-400: oklch(0.789 0.154 211.53);        /* #22d3ee */
  --primitive-cyan-500: oklch(0.715 0.143 215.22);        /* #06b6d4 */
  --primitive-cyan-600: oklch(0.609 0.126 221.72);        /* #0891b2 */
  --primitive-cyan-700: oklch(0.520 0.105 223.13);        /* #0e7490 */
  --primitive-cyan-800: oklch(0.450 0.085 224.28);        /* #155e75 */
  --primitive-cyan-900: oklch(0.398 0.070 227.39);        /* #164e63 */
  --primitive-cyan-950: oklch(0.302 0.056 229.70);        /* #083344 */
  
  /* Indigo (Work) */
  --primitive-indigo-50: oklch(0.962 0.018 272.31);       /* #eef2ff */
  --primitive-indigo-100: oklch(0.930 0.034 272.79);      /* #e0e7ff */
  --primitive-indigo-200: oklch(0.870 0.065 274.04);      /* #c7d2fe */
  --primitive-indigo-300: oklch(0.785 0.115 274.71);      /* #a5b4fc */
  --primitive-indigo-400: oklch(0.673 0.182 276.94);      /* #818cf8 */
  --primitive-indigo-500: oklch(0.585 0.233 277.12);      /* #6366f1 */
  --primitive-indigo-600: oklch(0.511 0.262 276.97);      /* #4f46e5 */
  --primitive-indigo-700: oklch(0.457 0.240 277.02);      /* #4338ca */
  --primitive-indigo-800: oklch(0.398 0.195 277.37);      /* #3730a3 */
  --primitive-indigo-900: oklch(0.359 0.144 278.70);      /* #312e81 */
  --primitive-indigo-950: oklch(0.257 0.090 281.29);      /* #1e1b4b */
  
  /* Green (Status: Success) */
  --primitive-green-50: oklch(0.982 0.018 155.83);        /* #f0fdf4 */
  --primitive-green-100: oklch(0.962 0.044 156.74);       /* #dcfce7 */
  --primitive-green-200: oklch(0.925 0.084 155.99);       /* #bbf7d0 */
  --primitive-green-300: oklch(0.871 0.150 154.45);       /* #86efac */
  --primitive-green-400: oklch(0.792 0.209 151.71);       /* #4ade80 */
  --primitive-green-500: oklch(0.723 0.219 149.58);       /* #22c55e */
  --primitive-green-600: oklch(0.627 0.194 149.21);       /* #16a34a */
  --primitive-green-700: oklch(0.527 0.154 150.07);       /* #15803d */
  --primitive-green-800: oklch(0.448 0.119 151.33);       /* #166534 */
  --primitive-green-900: oklch(0.393 0.095 152.93);       /* #14532d */
  --primitive-green-950: oklch(0.266 0.065 152.93);       /* #052e16 */
  
  /* Red (Status: Error) */
  --primitive-red-50: oklch(0.971 0.013 17.38);           /* #fef2f2 */
  --primitive-red-100: oklch(0.936 0.032 17.72);          /* #fee2e2 */
  --primitive-red-200: oklch(0.885 0.062 18.33);          /* #fecaca */
  --primitive-red-300: oklch(0.808 0.114 19.57);          /* #fca5a5 */
  --primitive-red-400: oklch(0.704 0.191 22.22);          /* #f87171 */
  --primitive-red-500: oklch(0.637 0.237 25.33);          /* #ef4444 */
  --primitive-red-600: oklch(0.577 0.245 27.33);          /* #dc2626 */
  --primitive-red-700: oklch(0.505 0.213 27.52);          /* #b91c1c */
  --primitive-red-800: oklch(0.444 0.177 26.90);          /* #991b1b */
  --primitive-red-900: oklch(0.396 0.141 25.72);          /* #7f1d1d */
  --primitive-red-950: oklch(0.258 0.092 26.04);          /* #450a0a */
  
  /* Blue (Status: Info) */
  --primitive-blue-50: oklch(0.970 0.014 254.60);         /* #eff6ff */
  --primitive-blue-100: oklch(0.932 0.032 254.61);        /* #dbeafe */
  --primitive-blue-200: oklch(0.882 0.059 254.13);        /* #bfdbfe */
  --primitive-blue-300: oklch(0.809 0.105 251.81);        /* #93c5fd */
  --primitive-blue-400: oklch(0.707 0.165 254.62);        /* #60a5fa */
  --primitive-blue-500: oklch(0.623 0.214 259.81);        /* #3b82f6 */
  --primitive-blue-600: oklch(0.546 0.245 262.88);        /* #2563eb */
  --primitive-blue-700: oklch(0.488 0.243 264.38);        /* #1d4ed8 */
  --primitive-blue-800: oklch(0.424 0.199 265.64);        /* #1e40af */
  --primitive-blue-900: oklch(0.379 0.146 265.52);        /* #1e3a8a */
  --primitive-blue-950: oklch(0.282 0.091 267.94);        /* #172554 */
  
  /* Teal (Travel) */
  --primitive-teal-50: oklch(0.984 0.014 180.72);         /* #f0fdfa */
  --primitive-teal-100: oklch(0.953 0.051 180.80);        /* #ccfbf1 */
  --primitive-teal-200: oklch(0.910 0.096 180.43);        /* #99f6e4 */
  --primitive-teal-300: oklch(0.855 0.138 181.07);        /* #5eead4 */
  --primitive-teal-400: oklch(0.777 0.152 181.91);        /* #2dd4bf */
  --primitive-teal-500: oklch(0.704 0.140 182.50);        /* #14b8a6 */
  --primitive-teal-600: oklch(0.600 0.118 184.70);        /* #0d9488 */
  --primitive-teal-700: oklch(0.511 0.096 186.39);        /* #0f766e */
  --primitive-teal-800: oklch(0.437 0.078 188.22);        /* #115e59 */
  --primitive-teal-900: oklch(0.386 0.063 188.42);        /* #134e4a */
  --primitive-teal-950: oklch(0.277 0.046 192.52);        /* #042f2e */
  
  /* Orange (Activities) */
  --primitive-orange-50: oklch(0.980 0.016 73.68);        /* #fff7ed */
  --primitive-orange-100: oklch(0.954 0.038 75.16);       /* #ffedd5 */
  --primitive-orange-200: oklch(0.901 0.076 70.70);       /* #fed7aa */
  --primitive-orange-300: oklch(0.837 0.128 66.29);       /* #fdba74 */
  --primitive-orange-400: oklch(0.750 0.183 55.93);       /* #fb923c */
  --primitive-orange-500: oklch(0.705 0.213 47.60);       /* #f97316 */
  --primitive-orange-600: oklch(0.646 0.222 41.12);       /* #ea580c */
  --primitive-orange-700: oklch(0.553 0.195 38.40);       /* #c2410c */
  --primitive-orange-800: oklch(0.470 0.157 37.30);       /* #9a3412 */
  --primitive-orange-900: oklch(0.408 0.123 38.17);       /* #7c2d12 */
  --primitive-orange-950: oklch(0.266 0.079 36.26);       /* #431407 */
  
  /* Zinc (Inventory) */
  --primitive-zinc-50: oklch(0.985 0 0);                  /* #fafafa */
  --primitive-zinc-100: oklch(0.967 0.001 286.38);        /* #f4f4f5 */
  --primitive-zinc-200: oklch(0.920 0.004 286.32);        /* #e4e4e7 */
  --primitive-zinc-300: oklch(0.871 0.006 286.29);        /* #d4d4d8 */
  --primitive-zinc-400: oklch(0.705 0.015 286.07);        /* #a1a1aa */
  --primitive-zinc-500: oklch(0.552 0.016 285.94);        /* #71717a */
  --primitive-zinc-600: oklch(0.442 0.017 285.79);        /* #52525b */
  --primitive-zinc-700: oklch(0.370 0.013 285.81);        /* #3f3f46 */
  --primitive-zinc-800: oklch(0.274 0.006 286.03);        /* #27272a */
  --primitive-zinc-900: oklch(0.210 0.006 285.89);        /* #18181b */
  --primitive-zinc-950: oklch(0.141 0.005 285.82);        /* #09090b */
  
  /* Pink (Media) */
  --primitive-pink-50: oklch(0.971 0.014 343.20);         /* #fdf2f8 */
  --primitive-pink-100: oklch(0.948 0.028 342.26);        /* #fce7f3 */
  --primitive-pink-200: oklch(0.899 0.061 343.23);        /* #fbcfe8 */
  --primitive-pink-300: oklch(0.823 0.12 346.02);         /* #f9a8d4 */
  --primitive-pink-400: oklch(0.718 0.202 349.76);        /* #f472b6 */
  --primitive-pink-500: oklch(0.656 0.241 354.31);        /* #ec4899 */
  --primitive-pink-600: oklch(0.592 0.249 0.58);          /* #db2777 */
  --primitive-pink-700: oklch(0.525 0.223 3.96);          /* #be185d */
  --primitive-pink-800: oklch(0.459 0.187 3.82);          /* #9d174d */
  --primitive-pink-900: oklch(0.408 0.153 2.43);          /* #831843 */
  --primitive-pink-950: oklch(0.284 0.109 3.91);          /* #500724 */
  
  /* Lime (Backups) */
  --primitive-lime-50: oklch(0.986 0.031 120.76);         /* #f7fee7 */
  --primitive-lime-100: oklch(0.967 0.067 122.33);        /* #ecfccb */
  --primitive-lime-200: oklch(0.938 0.127 124.32);        /* #d9f99d */
  --primitive-lime-300: oklch(0.897 0.196 126.67);        /* #bef264 */
  --primitive-lime-400: oklch(0.841 0.238 128.85);        /* #a3e635 */
  --primitive-lime-500: oklch(0.768 0.233 130.85);        /* #84cc16 */
  --primitive-lime-600: oklch(0.648 0.200 131.68);        /* #65a30d */
  --primitive-lime-700: oklch(0.532 0.157 131.59);        /* #4d7c0f */
  --primitive-lime-800: oklch(0.453 0.124 130.93);        /* #3f6212 */
  --primitive-lime-900: oklch(0.405 0.101 131.06);        /* #365314 */
  --primitive-lime-950: oklch(0.274 0.072 132.11);        /* #1a2e05 */
  
  /* --------------------------------------------------------------------------
     1.2 Spacing Primitives
     --------------------------------------------------------------------------
     Based on 4px grid. Use these as building blocks.
  */
  --primitive-space-0: 0;
  --primitive-space-1: 0.25rem;    /* 4px */
  --primitive-space-2: 0.5rem;     /* 8px */
  --primitive-space-3: 0.75rem;    /* 12px */
  --primitive-space-4: 1rem;       /* 16px */
  --primitive-space-5: 1.25rem;    /* 20px */
  --primitive-space-6: 1.5rem;     /* 24px */
  --primitive-space-8: 2rem;       /* 32px */
  --primitive-space-10: 2.5rem;    /* 40px */
  --primitive-space-12: 3rem;      /* 48px */
  --primitive-space-16: 4rem;      /* 64px */
  
  /* --------------------------------------------------------------------------
     1.3 Typography Primitives
     --------------------------------------------------------------------------
  */
  
  /* Font Families */
  --primitive-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --primitive-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace;
  
  /* Font Sizes */
  --primitive-font-size-xs: 0.75rem;     /* 12px */
  --primitive-font-size-sm: 0.875rem;    /* 14px */
  --primitive-font-size-base: 1rem;      /* 16px */
  --primitive-font-size-lg: 1.125rem;    /* 18px */
  --primitive-font-size-xl: 1.25rem;     /* 20px */
  --primitive-font-size-2xl: 1.5rem;     /* 24px */
  --primitive-font-size-3xl: 2rem;       /* 32px */
  --primitive-font-size-4xl: 2.5rem;     /* 40px */
  --primitive-font-size-5xl: 3rem;       /* 48px */
  
  /* Font Weights */
  --primitive-font-weight-normal: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;
  
  /* Line Heights */
  --primitive-line-height-none: 1;
  --primitive-line-height-tight: 1.25;
  --primitive-line-height-snug: 1.375;
  --primitive-line-height-normal: 1.5;
  --primitive-line-height-relaxed: 1.625;
  
  /* Letter Spacing */
  --primitive-tracking-tighter: -0.05em;
  --primitive-tracking-tight: -0.025em;
  --primitive-tracking-normal: 0;
  --primitive-tracking-wide: 0.025em;
  --primitive-tracking-wider: 0.05em;
  --primitive-tracking-widest: 0.1em;
  
  /* --------------------------------------------------------------------------
     1.4 Border Radius Primitives
     --------------------------------------------------------------------------
  */
  --primitive-radius-sm: 0.25rem;   /* 4px */
  --primitive-radius-md: 0.5rem;    /* 8px */
  --primitive-radius-lg: 0.75rem;   /* 12px */
  --primitive-radius-xl: 1rem;      /* 16px */
  --primitive-radius-2xl: 1.5rem;   /* 24px */
  --primitive-radius-full: 9999px;
  
  /* --------------------------------------------------------------------------
     1.5 Shadow Primitives
     --------------------------------------------------------------------------
  */
  --primitive-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --primitive-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --primitive-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --primitive-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* --------------------------------------------------------------------------
     1.6 Animation Primitives
     --------------------------------------------------------------------------
  */
  --primitive-duration-fast: 150ms;
  --primitive-duration-normal: 200ms;
  --primitive-duration-slow: 300ms;
  --primitive-duration-slower: 500ms;
  
  --primitive-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --primitive-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --primitive-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ==========================================================================
   2. SEMANTIC TOKENS - Dark Mode (Default)
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     2.1 Background Colors
     --------------------------------------------------------------------------
  */
  --background: var(--primitive-neutral-950);             /* App background */
  --background-alt: oklch(0.15 0.02 265);                 /* #0f0f14 - Garmin dark */
  --foreground: var(--primitive-neutral-50);              /* Primary text on background */
  
  --surface: oklch(0.20 0.02 265);                        /* #1a1a24 - Card background */
  --surface-hover: oklch(0.25 0.02 265);                  /* #252530 */
  --surface-active: oklch(0.30 0.02 265);                 /* #303040 */
  
  /* --------------------------------------------------------------------------
     2.2 Border Colors
     --------------------------------------------------------------------------
  */
  --border: var(--primitive-neutral-700);
  --border-hover: var(--primitive-neutral-600);
  --border-muted: var(--primitive-neutral-800);
  
  /* --------------------------------------------------------------------------
     2.3 Text Colors
     --------------------------------------------------------------------------
  */
  --text: var(--primitive-neutral-50);                    /* Primary text */
  --text-dim: var(--primitive-neutral-400);               /* Secondary text */
  --text-muted: var(--primitive-neutral-400);             /* Tertiary/disabled text - WCAG AA compliant (7.87:1 vs dark bg) */
  
  /* --------------------------------------------------------------------------
     2.4 Accent Colors (Module-specific, defaults to Health)
     --------------------------------------------------------------------------
  */
  --accent: var(--primitive-sky-400);                     /* Primary accent (lighter for dark bg) */
  --accent-foreground: var(--primitive-neutral-950);      /* Text on accent */
  --accent-hover: var(--primitive-sky-300);
  --accent-muted: var(--primitive-sky-900);               /* Subtle accent background */
  
  /* --------------------------------------------------------------------------
     2.5 Status Colors
     --------------------------------------------------------------------------
  */
  --success: var(--primitive-green-400);
  --success-foreground: var(--primitive-neutral-950);
  --success-muted: oklch(0.30 0.08 150);                  /* Dark green bg */
  
  --warning: var(--primitive-amber-400);
  --warning-foreground: var(--primitive-neutral-950);
  --warning-muted: oklch(0.30 0.08 70);                   /* Dark amber bg */
  
  --error: var(--primitive-red-400);
  --error-foreground: var(--primitive-neutral-950);
  --error-muted: oklch(0.30 0.08 25);                     /* Dark red bg */
  
  --info: var(--primitive-blue-400);
  --info-foreground: var(--primitive-neutral-950);
  --info-muted: oklch(0.30 0.08 255);                     /* Dark blue bg */
  
  /* --------------------------------------------------------------------------
     2.6 Interactive States
     --------------------------------------------------------------------------
  */
  --focus-ring: var(--primitive-sky-500);
  --focus-ring-offset: var(--background);
  
  /* --------------------------------------------------------------------------
     2.7 Component-Specific Semantics
     --------------------------------------------------------------------------
  */
  
  /* Cards */
  --card: var(--surface);
  --card-hover: var(--surface-hover);
  --card-border: var(--border-muted);
  
  /* Inputs */
  --input: var(--surface);
  --input-border: var(--border);
  --input-focus: var(--accent);
  
  /* Buttons */
  --button-primary: var(--accent);
  --button-primary-foreground: var(--accent-foreground);
  --button-secondary: var(--surface);
  --button-secondary-foreground: var(--text);
  
  /* --------------------------------------------------------------------------
     2.8 Spacing Semantic Aliases
     --------------------------------------------------------------------------
  */
  --space-xs: var(--primitive-space-1);    /* 4px */
  --space-sm: var(--primitive-space-2);    /* 8px */
  --space-md: var(--primitive-space-4);    /* 16px */
  --space-lg: var(--primitive-space-6);    /* 24px */
  --space-xl: var(--primitive-space-8);    /* 32px */
  --space-2xl: var(--primitive-space-12);  /* 48px */
  
  /* --------------------------------------------------------------------------
     2.9 Typography Semantic Aliases
     --------------------------------------------------------------------------
  */
  --font-family: var(--primitive-font-sans);
  --font-mono: var(--primitive-font-mono);
  
  --text-xs: var(--primitive-font-size-xs);
  --text-sm: var(--primitive-font-size-sm);
  --text-base: var(--primitive-font-size-base);
  --text-lg: var(--primitive-font-size-lg);
  --text-xl: var(--primitive-font-size-xl);
  --text-2xl: var(--primitive-font-size-2xl);
  --text-3xl: var(--primitive-font-size-3xl);
  --text-4xl: var(--primitive-font-size-4xl);
  --text-5xl: var(--primitive-font-size-5xl);
  
  /* --------------------------------------------------------------------------
     2.10 Border Radius Semantic Aliases
     --------------------------------------------------------------------------
  */
  --radius-sm: var(--primitive-radius-sm);   /* 4px */
  --radius-md: var(--primitive-radius-md);   /* 8px */
  --radius-lg: var(--primitive-radius-lg);   /* 12px */
  --radius-xl: var(--primitive-radius-xl);   /* 16px */
  --radius-2xl: var(--primitive-radius-2xl); /* 24px */
  --radius-full: var(--primitive-radius-full);
  
  /* --------------------------------------------------------------------------
     2.11 Shadow Semantic Aliases
     --------------------------------------------------------------------------
  */
  --shadow-sm: var(--primitive-shadow-sm);
  --shadow-md: var(--primitive-shadow-md);
  --shadow-lg: var(--primitive-shadow-lg);
  --shadow-xl: var(--primitive-shadow-xl);
  
  /* Card shadow (optimized for dark mode) */
  --shadow-card: 0 2px 8px rgb(0 0 0 / 0.3), 0 0 1px rgb(0 0 0 / 0.4);
  
  /* --------------------------------------------------------------------------
     2.12 Gradient Tokens
     --------------------------------------------------------------------------
     Semantic gradients for consistent styling across modules.
  */
  --gradient-amber: linear-gradient(135deg, var(--primitive-amber-400), var(--primitive-amber-500));
  --gradient-amber-warm: linear-gradient(135deg, var(--primitive-amber-400), var(--primitive-amber-600));
  --gradient-red: linear-gradient(135deg, var(--primitive-red-400), var(--primitive-red-500));
  --gradient-blue: linear-gradient(135deg, var(--primitive-blue-400), var(--primitive-blue-500));
  --gradient-green: linear-gradient(135deg, var(--primitive-green-400), var(--primitive-green-500));
  --gradient-violet: linear-gradient(135deg, var(--primitive-violet-400), var(--primitive-violet-500));
  --gradient-neutral: linear-gradient(135deg, var(--primitive-neutral-400), var(--primitive-neutral-500));
  
  /* Health-specific gradients (body composition, zones) */
  --gradient-fat: linear-gradient(135deg, var(--primitive-amber-400), var(--primitive-amber-500));
  --gradient-muscle: linear-gradient(135deg, var(--primitive-red-400), var(--primitive-red-500));
  --gradient-water: linear-gradient(135deg, var(--primitive-blue-400), var(--primitive-blue-500));
  --gradient-bone: linear-gradient(135deg, var(--primitive-neutral-400), var(--primitive-neutral-500));
  
  /* Status zone gradients */
  --gradient-zone-excellent: linear-gradient(90deg, var(--primitive-blue-500), var(--primitive-blue-400));
  --gradient-zone-good: linear-gradient(90deg, var(--primitive-green-500), var(--primitive-green-400));
  --gradient-zone-warning: linear-gradient(90deg, var(--primitive-amber-500), var(--primitive-amber-400));
  --gradient-zone-alert: linear-gradient(90deg, var(--primitive-red-500), var(--primitive-red-400));
  
  /* Activity gradients */
  --gradient-moderate: linear-gradient(90deg, var(--primitive-blue-500), var(--primitive-blue-400));
  --gradient-vigorous: linear-gradient(90deg, var(--primitive-violet-500), var(--primitive-violet-400));
}


/* ==========================================================================
   3. SEMANTIC TOKENS - Light Mode
   ========================================================================== */

[data-theme="light"] {
  /* Backgrounds */
  --background: var(--primitive-neutral-0);
  --background-alt: var(--primitive-neutral-50);
  --foreground: var(--primitive-neutral-900);
  
  --surface: var(--primitive-neutral-0);
  --surface-hover: var(--primitive-neutral-100);
  --surface-active: var(--primitive-neutral-200);
  
  /* Borders */
  --border: var(--primitive-neutral-200);
  --border-hover: var(--primitive-neutral-300);
  --border-muted: var(--primitive-neutral-100);
  
  /* Text */
  --text: var(--primitive-neutral-900);
  --text-dim: var(--primitive-neutral-700);
  --text-muted: var(--primitive-neutral-500);             /* 4.76:1 vs white - WCAG AA compliant */
  
  /* Accent (darker for light bg) */
  --accent: var(--primitive-sky-500);
  --accent-foreground: var(--primitive-neutral-0);
  --accent-hover: var(--primitive-sky-600);
  --accent-muted: var(--primitive-sky-100);
  
  /* Status Colors (darker for light bg) */
  --success: var(--primitive-green-500);
  --success-foreground: var(--primitive-neutral-0);
  --success-muted: oklch(0.95 0.05 150);
  
  --warning: var(--primitive-amber-500);
  --warning-foreground: var(--primitive-neutral-950);
  --warning-muted: oklch(0.95 0.05 85);
  
  --error: var(--primitive-red-500);
  --error-foreground: var(--primitive-neutral-0);
  --error-muted: oklch(0.95 0.05 25);
  
  --info: var(--primitive-blue-500);
  --info-foreground: var(--primitive-neutral-0);
  --info-muted: oklch(0.95 0.05 255);
  
  /* Focus */
  --focus-ring: var(--primitive-sky-500);
  --focus-ring-offset: var(--background);
  
  /* Components */
  --card: var(--primitive-neutral-0);
  --card-hover: var(--primitive-neutral-50);
  --card-border: var(--primitive-neutral-200);
  
  --input: var(--primitive-neutral-0);
  --input-border: var(--primitive-neutral-300);
  --input-focus: var(--accent);
  
  /* Shadow (lighter for light mode) */
  --shadow-card: 0 2px 8px rgb(0 0 0 / 0.06), 0 0 1px rgb(0 0 0 / 0.1);
}


/* ==========================================================================
   4. MODULE COLOR SCALES
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     4.1 Health Module - Sky Blue
     --------------------------------------------------------------------------
     Vitality, wellness, hydration, calm
  */
  --module-health-50: var(--primitive-sky-50);
  --module-health-100: var(--primitive-sky-100);
  --module-health-200: var(--primitive-sky-200);
  --module-health-300: var(--primitive-sky-300);
  --module-health-400: var(--primitive-sky-400);
  --module-health-500: var(--primitive-sky-500);
  --module-health-600: var(--primitive-sky-600);
  --module-health-700: var(--primitive-sky-700);
  --module-health-800: var(--primitive-sky-800);
  --module-health-900: var(--primitive-sky-900);
  --module-health-950: var(--primitive-sky-950);
  
  /* --------------------------------------------------------------------------
     4.2 Finance Module - Emerald
     --------------------------------------------------------------------------
     Money, growth, prosperity, positive returns
  */
  --module-finance-50: var(--primitive-emerald-50);
  --module-finance-100: var(--primitive-emerald-100);
  --module-finance-200: var(--primitive-emerald-200);
  --module-finance-300: var(--primitive-emerald-300);
  --module-finance-400: var(--primitive-emerald-400);
  --module-finance-500: var(--primitive-emerald-500);
  --module-finance-600: var(--primitive-emerald-600);
  --module-finance-700: var(--primitive-emerald-700);
  --module-finance-800: var(--primitive-emerald-800);
  --module-finance-900: var(--primitive-emerald-900);
  --module-finance-950: var(--primitive-emerald-950);
  
  /* --------------------------------------------------------------------------
     4.3 Agent Module - Violet
     --------------------------------------------------------------------------
     AI, intelligence, creativity, the unknown
  */
  --module-agent-50: var(--primitive-violet-50);
  --module-agent-100: var(--primitive-violet-100);
  --module-agent-200: var(--primitive-violet-200);
  --module-agent-300: var(--primitive-violet-300);
  --module-agent-400: var(--primitive-violet-400);
  --module-agent-500: var(--primitive-violet-500);
  --module-agent-600: var(--primitive-violet-600);
  --module-agent-700: var(--primitive-violet-700);
  --module-agent-800: var(--primitive-violet-800);
  --module-agent-900: var(--primitive-violet-900);
  --module-agent-950: var(--primitive-violet-950);
  
  /* --------------------------------------------------------------------------
     4.4 Home Module - Amber
     --------------------------------------------------------------------------
     Warmth, hearth, comfort, shelter
  */
  --module-home-50: var(--primitive-amber-50);
  --module-home-100: var(--primitive-amber-100);
  --module-home-200: var(--primitive-amber-200);
  --module-home-300: var(--primitive-amber-300);
  --module-home-400: var(--primitive-amber-400);
  --module-home-500: var(--primitive-amber-500);
  --module-home-600: var(--primitive-amber-600);
  --module-home-700: var(--primitive-amber-700);
  --module-home-800: var(--primitive-amber-800);
  --module-home-900: var(--primitive-amber-900);
  --module-home-950: var(--primitive-amber-950);
  
  /* --------------------------------------------------------------------------
     4.5 Vehicles Module - Slate
     --------------------------------------------------------------------------
     Industrial, mechanical, engineering, transportation
  */
  --module-vehicles-50: var(--primitive-slate-50);
  --module-vehicles-100: var(--primitive-slate-100);
  --module-vehicles-200: var(--primitive-slate-200);
  --module-vehicles-300: var(--primitive-slate-300);
  --module-vehicles-400: var(--primitive-slate-400);
  --module-vehicles-500: var(--primitive-slate-500);
  --module-vehicles-600: var(--primitive-slate-600);
  --module-vehicles-700: var(--primitive-slate-700);
  --module-vehicles-800: var(--primitive-slate-800);
  --module-vehicles-900: var(--primitive-slate-900);
  --module-vehicles-950: var(--primitive-slate-950);
  
  /* --------------------------------------------------------------------------
     4.6 Pets Module - Rose
     --------------------------------------------------------------------------
     Companionship, love, playfulness, life
  */
  --module-pets-50: var(--primitive-rose-50);
  --module-pets-100: var(--primitive-rose-100);
  --module-pets-200: var(--primitive-rose-200);
  --module-pets-300: var(--primitive-rose-300);
  --module-pets-400: var(--primitive-rose-400);
  --module-pets-500: var(--primitive-rose-500);
  --module-pets-600: var(--primitive-rose-600);
  --module-pets-700: var(--primitive-rose-700);
  --module-pets-800: var(--primitive-rose-800);
  --module-pets-900: var(--primitive-rose-900);
  --module-pets-950: var(--primitive-rose-950);
  
  /* --------------------------------------------------------------------------
     4.7 Family Module - Fuchsia
     --------------------------------------------------------------------------
     Bonds, love, connection, togetherness
  */
  --module-family-50: var(--primitive-fuchsia-50);
  --module-family-100: var(--primitive-fuchsia-100);
  --module-family-200: var(--primitive-fuchsia-200);
  --module-family-300: var(--primitive-fuchsia-300);
  --module-family-400: var(--primitive-fuchsia-400);
  --module-family-500: var(--primitive-fuchsia-500);
  --module-family-600: var(--primitive-fuchsia-600);
  --module-family-700: var(--primitive-fuchsia-700);
  --module-family-800: var(--primitive-fuchsia-800);
  --module-family-900: var(--primitive-fuchsia-900);
  --module-family-950: var(--primitive-fuchsia-950);
  
  /* --------------------------------------------------------------------------
     4.8 Contacts Module - Cyan
     --------------------------------------------------------------------------
     Communication, connection, networking, social
  */
  --module-contacts-50: var(--primitive-cyan-50);
  --module-contacts-100: var(--primitive-cyan-100);
  --module-contacts-200: var(--primitive-cyan-200);
  --module-contacts-300: var(--primitive-cyan-300);
  --module-contacts-400: var(--primitive-cyan-400);
  --module-contacts-500: var(--primitive-cyan-500);
  --module-contacts-600: var(--primitive-cyan-600);
  --module-contacts-700: var(--primitive-cyan-700);
  --module-contacts-800: var(--primitive-cyan-800);
  --module-contacts-900: var(--primitive-cyan-900);
  --module-contacts-950: var(--primitive-cyan-950);
  
  /* --------------------------------------------------------------------------
     4.9 Work Module - Indigo
     --------------------------------------------------------------------------
     Productivity, focus, professionalism, depth
  */
  --module-work-50: var(--primitive-indigo-50);
  --module-work-100: var(--primitive-indigo-100);
  --module-work-200: var(--primitive-indigo-200);
  --module-work-300: var(--primitive-indigo-300);
  --module-work-400: var(--primitive-indigo-400);
  --module-work-500: var(--primitive-indigo-500);
  --module-work-600: var(--primitive-indigo-600);
  --module-work-700: var(--primitive-indigo-700);
  --module-work-800: var(--primitive-indigo-800);
  --module-work-900: var(--primitive-indigo-900);
  --module-work-950: var(--primitive-indigo-950);
  
  /* --------------------------------------------------------------------------
     4.10 Travel Module - Teal
     --------------------------------------------------------------------------
     Adventure, exploration, journey, discovery
  */
  --module-travel-50: var(--primitive-teal-50);
  --module-travel-100: var(--primitive-teal-100);
  --module-travel-200: var(--primitive-teal-200);
  --module-travel-300: var(--primitive-teal-300);
  --module-travel-400: var(--primitive-teal-400);
  --module-travel-500: var(--primitive-teal-500);
  --module-travel-600: var(--primitive-teal-600);
  --module-travel-700: var(--primitive-teal-700);
  --module-travel-800: var(--primitive-teal-800);
  --module-travel-900: var(--primitive-teal-900);
  --module-travel-950: var(--primitive-teal-950);
  
  /* --------------------------------------------------------------------------
     4.11 Activities Module - Orange
     --------------------------------------------------------------------------
     Energy, action, sports, movement
  */
  --module-activities-50: var(--primitive-orange-50);
  --module-activities-100: var(--primitive-orange-100);
  --module-activities-200: var(--primitive-orange-200);
  --module-activities-300: var(--primitive-orange-300);
  --module-activities-400: var(--primitive-orange-400);
  --module-activities-500: var(--primitive-orange-500);
  --module-activities-600: var(--primitive-orange-600);
  --module-activities-700: var(--primitive-orange-700);
  --module-activities-800: var(--primitive-orange-800);
  --module-activities-900: var(--primitive-orange-900);
  --module-activities-950: var(--primitive-orange-950);
  
  /* --------------------------------------------------------------------------
     4.12 Inventory Module - Zinc
     --------------------------------------------------------------------------
     Organization, cataloging, storage, items
  */
  --module-inventory-50: var(--primitive-zinc-50);
  --module-inventory-100: var(--primitive-zinc-100);
  --module-inventory-200: var(--primitive-zinc-200);
  --module-inventory-300: var(--primitive-zinc-300);
  --module-inventory-400: var(--primitive-zinc-400);
  --module-inventory-500: var(--primitive-zinc-500);
  --module-inventory-600: var(--primitive-zinc-600);
  --module-inventory-700: var(--primitive-zinc-700);
  --module-inventory-800: var(--primitive-zinc-800);
  --module-inventory-900: var(--primitive-zinc-900);
  --module-inventory-950: var(--primitive-zinc-950);
  
  /* --------------------------------------------------------------------------
     4.13 Media Module - Pink
     --------------------------------------------------------------------------
     Entertainment, streaming, content, multimedia
  */
  --module-media-50: var(--primitive-pink-50);
  --module-media-100: var(--primitive-pink-100);
  --module-media-200: var(--primitive-pink-200);
  --module-media-300: var(--primitive-pink-300);
  --module-media-400: var(--primitive-pink-400);
  --module-media-500: var(--primitive-pink-500);
  --module-media-600: var(--primitive-pink-600);
  --module-media-700: var(--primitive-pink-700);
  --module-media-800: var(--primitive-pink-800);
  --module-media-900: var(--primitive-pink-900);
  --module-media-950: var(--primitive-pink-950);
  
  /* --------------------------------------------------------------------------
     4.14 Projects Module - Blue
     --------------------------------------------------------------------------
     Planning, tasks, milestones, tracking
  */
  --module-projects-50: var(--primitive-blue-50);
  --module-projects-100: var(--primitive-blue-100);
  --module-projects-200: var(--primitive-blue-200);
  --module-projects-300: var(--primitive-blue-300);
  --module-projects-400: var(--primitive-blue-400);
  --module-projects-500: var(--primitive-blue-500);
  --module-projects-600: var(--primitive-blue-600);
  --module-projects-700: var(--primitive-blue-700);
  --module-projects-800: var(--primitive-blue-800);
  --module-projects-900: var(--primitive-blue-900);
  --module-projects-950: var(--primitive-blue-950);
  
  /* --------------------------------------------------------------------------
     4.15 Backups Module - Lime
     --------------------------------------------------------------------------
     Security, safety, recovery, protection
  */
  --module-backups-50: var(--primitive-lime-50);
  --module-backups-100: var(--primitive-lime-100);
  --module-backups-200: var(--primitive-lime-200);
  --module-backups-300: var(--primitive-lime-300);
  --module-backups-400: var(--primitive-lime-400);
  --module-backups-500: var(--primitive-lime-500);
  --module-backups-600: var(--primitive-lime-600);
  --module-backups-700: var(--primitive-lime-700);
  --module-backups-800: var(--primitive-lime-800);
  --module-backups-900: var(--primitive-lime-900);
  --module-backups-950: var(--primitive-lime-950);
}


/* ==========================================================================
   5. MODULE-SPECIFIC ACCENT OVERRIDES
   ========================================================================== */

/* Apply module accent colors via data-module attribute */

[data-module="health"] {
  --accent: var(--module-health-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-health-300);
  --accent-muted: var(--module-health-950);
}

[data-module="finance"] {
  --accent: var(--module-finance-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-finance-300);
  --accent-muted: var(--module-finance-950);
}

[data-module="agent"] {
  --accent: var(--module-agent-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-agent-300);
  --accent-muted: var(--module-agent-950);
}

[data-module="home"] {
  --accent: var(--module-home-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-home-300);
  --accent-muted: var(--module-home-950);
}

[data-module="vehicles"] {
  --accent: var(--module-vehicles-400);
  --accent-foreground: var(--primitive-neutral-0);
  --accent-hover: var(--module-vehicles-300);
  --accent-muted: var(--module-vehicles-950);
}

[data-module="pets"] {
  --accent: var(--module-pets-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-pets-300);
  --accent-muted: var(--module-pets-950);
}

[data-module="family"] {
  --accent: var(--module-family-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-family-300);
  --accent-muted: var(--module-family-950);
}

[data-module="contacts"] {
  --accent: var(--module-contacts-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-contacts-300);
  --accent-muted: var(--module-contacts-950);
}

[data-module="work"] {
  --accent: var(--module-work-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-work-300);
  --accent-muted: var(--module-work-950);
}

[data-module="travel"] {
  --accent: var(--module-travel-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-travel-300);
  --accent-muted: var(--module-travel-950);
}

[data-module="activities"] {
  --accent: var(--module-activities-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-activities-300);
  --accent-muted: var(--module-activities-950);
}

[data-module="inventory"] {
  --accent: var(--module-inventory-400);
  --accent-foreground: var(--primitive-neutral-0);
  --accent-hover: var(--module-inventory-300);
  --accent-muted: var(--module-inventory-950);
}

[data-module="media"] {
  --accent: var(--module-media-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-media-300);
  --accent-muted: var(--module-media-950);
}

[data-module="projects"] {
  --accent: var(--module-projects-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-projects-300);
  --accent-muted: var(--module-projects-950);
}

[data-module="backups"] {
  --accent: var(--module-backups-400);
  --accent-foreground: var(--primitive-neutral-950);
  --accent-hover: var(--module-backups-300);
  --accent-muted: var(--module-backups-950);
}

/* Light mode overrides for modules */
[data-theme="light"][data-module="health"],
[data-theme="light"] [data-module="health"] {
  --accent: var(--module-health-500);
  --accent-hover: var(--module-health-600);
  --accent-muted: var(--module-health-100);
}

[data-theme="light"][data-module="finance"],
[data-theme="light"] [data-module="finance"] {
  --accent: var(--module-finance-500);
  --accent-hover: var(--module-finance-600);
  --accent-muted: var(--module-finance-100);
}

[data-theme="light"][data-module="agent"],
[data-theme="light"] [data-module="agent"] {
  --accent: var(--module-agent-500);
  --accent-hover: var(--module-agent-600);
  --accent-muted: var(--module-agent-100);
}

[data-theme="light"][data-module="home"],
[data-theme="light"] [data-module="home"] {
  --accent: var(--module-home-500);
  --accent-hover: var(--module-home-600);
  --accent-muted: var(--module-home-100);
}

[data-theme="light"][data-module="vehicles"],
[data-theme="light"] [data-module="vehicles"] {
  --accent: var(--module-vehicles-500);
  --accent-hover: var(--module-vehicles-600);
  --accent-muted: var(--module-vehicles-100);
}

[data-theme="light"][data-module="pets"],
[data-theme="light"] [data-module="pets"] {
  --accent: var(--module-pets-500);
  --accent-hover: var(--module-pets-600);
  --accent-muted: var(--module-pets-100);
}

[data-theme="light"][data-module="family"],
[data-theme="light"] [data-module="family"] {
  --accent: var(--module-family-500);
  --accent-hover: var(--module-family-600);
  --accent-muted: var(--module-family-100);
}

[data-theme="light"][data-module="contacts"],
[data-theme="light"] [data-module="contacts"] {
  --accent: var(--module-contacts-500);
  --accent-hover: var(--module-contacts-600);
  --accent-muted: var(--module-contacts-100);
}

[data-theme="light"][data-module="work"],
[data-theme="light"] [data-module="work"] {
  --accent: var(--module-work-500);
  --accent-hover: var(--module-work-600);
  --accent-muted: var(--module-work-100);
}

[data-theme="light"][data-module="travel"],
[data-theme="light"] [data-module="travel"] {
  --accent: var(--module-travel-500);
  --accent-hover: var(--module-travel-600);
  --accent-muted: var(--module-travel-100);
}

[data-theme="light"][data-module="activities"],
[data-theme="light"] [data-module="activities"] {
  --accent: var(--module-activities-500);
  --accent-hover: var(--module-activities-600);
  --accent-muted: var(--module-activities-100);
}

[data-theme="light"][data-module="inventory"],
[data-theme="light"] [data-module="inventory"] {
  --accent: var(--module-inventory-500);
  --accent-hover: var(--module-inventory-600);
  --accent-muted: var(--module-inventory-100);
}

[data-theme="light"][data-module="media"],
[data-theme="light"] [data-module="media"] {
  --accent: var(--module-media-500);
  --accent-hover: var(--module-media-600);
  --accent-muted: var(--module-media-100);
}

[data-theme="light"][data-module="projects"],
[data-theme="light"] [data-module="projects"] {
  --accent: var(--module-projects-500);
  --accent-hover: var(--module-projects-600);
  --accent-muted: var(--module-projects-100);
}

[data-theme="light"][data-module="backups"],
[data-theme="light"] [data-module="backups"] {
  --accent: var(--module-backups-500);
  --accent-hover: var(--module-backups-600);
  --accent-muted: var(--module-backups-100);
}


/* ==========================================================================
   6. UTILITY CLASSES (Optional - for quick prototyping)
   ========================================================================== */

/* These utility classes use the design tokens for rapid development.
   In production, prefer using tokens directly in your component CSS. */

.bg-surface { background-color: var(--surface); }
.bg-surface-hover { background-color: var(--surface-hover); }
.text-primary { color: var(--text); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }

.border-default { border-color: var(--border); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

.shadow-card { box-shadow: var(--shadow-card); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }