fix: improve light mode visibility and OCD tracker UI

- Use deeper gold (#B8960F) for light mode primary color to improve
  contrast on white backgrounds while keeping bright yellow for dark mode
- Fix obsession/compulsion toggle text clipping by removing fixed width
  and simplifying layout to size naturally
- Replace red warning triangle on high distress filter with a subtler
  filter icon using the theme's primary color

Author: maskedsyntax

lib/screens/ocd_tracker_screen.dart

@@ -49,14 +49,14 @@ class _OcdTrackerScreenState extends ConsumerState<OcdTrackerScreen> {
                 Padding(
                   padding: const EdgeInsets.only(right: 12.0),
                   child: Container(
-                    width: 260,
-                    margin: const EdgeInsets.symmetric(vertical: 6),
                     decoration: BoxDecoration(
                       color: theme.colorScheme.onSurface.withOpacity(0.05),
-                      borderRadius: BorderRadius.circular(10),
+                      borderRadius: BorderRadius.circular(8),
+                      border: Border.all(color: theme.dividerColor),
                     ),
                     padding: const EdgeInsets.all(3),
                     child: Row(
+                      mainAxisSize: MainAxisSize.min,
                       children: [
                         _TypeOption(
                           label: 'Obsessions',
@@ -115,28 +115,28 @@ class _HighDistressToggle extends StatelessWidget {
         child: Container(
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(8),
-            border: Border.all(color: isSelected ? Colors.redAccent.withOpacity(0.5) : theme.dividerColor),
+            border: Border.all(color: isSelected ? theme.colorScheme.primary.withOpacity(0.5) : theme.dividerColor),
           ),
           child: AnimatedContainer(
             duration: const Duration(milliseconds: 200),
             padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
             decoration: BoxDecoration(
-              color: isSelected ? Colors.redAccent.withOpacity(0.1) : Colors.transparent,
+              color: isSelected ? theme.colorScheme.primary.withOpacity(0.1) : Colors.transparent,
               borderRadius: BorderRadius.circular(8),
             ),
             child: Row(
               mainAxisSize: MainAxisSize.min,
               children: [
                 Icon(
-                  LineIcons.exclamationTriangle, 
-                  size: 18, 
-                  color: isSelected ? Colors.redAccent : theme.colorScheme.onSurface.withOpacity(0.4)
+                  isSelected ? LineIcons.filter : LineIcons.filter,
+                  size: 16,
+                  color: isSelected ? theme.colorScheme.primary : theme.colorScheme.onSurface.withOpacity(0.4)
                 ),
                 if (isSelected) ...[
-                  const SizedBox(width: 8),
-                  const Text(
-                    'HIGH DISTRESS', 
-                    style: TextStyle(color: Colors.redAccent, fontSize: 10, fontWeight: FontWeight.w800, letterSpacing: 0.5)
+                  const SizedBox(width: 6),
+                  Text(
+                    '7+',
+                    style: TextStyle(color: theme.colorScheme.primary, fontSize: 11, fontWeight: FontWeight.w800)
                   ),
                 ]
               ],
@@ -170,37 +170,29 @@ class _TypeOptionState extends State<_TypeOption> {
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
-      child: MouseRegion(
-        cursor: SystemMouseCursors.click,
-        onEnter: (_) => setState(() => _isHovered = true),
-        onExit: (_) => setState(() => _isHovered = false),
-        child: GestureDetector(
-          onTap: widget.onTap,
-          child: Container(
-            decoration: BoxDecoration(
-              color: widget.isSelected ? widget.theme.colorScheme.primary : Colors.transparent,
-              borderRadius: BorderRadius.circular(8),
-            ),
-            child: AnimatedContainer(
-              duration: const Duration(milliseconds: 200),
-              padding: const EdgeInsets.symmetric(vertical: 8),
-              decoration: BoxDecoration(
-                color: !widget.isSelected && _isHovered 
-                    ? widget.theme.colorScheme.onSurface.withOpacity(0.05) 
+    return MouseRegion(
+      cursor: SystemMouseCursors.click,
+      onEnter: (_) => setState(() => _isHovered = true),
+      onExit: (_) => setState(() => _isHovered = false),
+      child: GestureDetector(
+        onTap: widget.onTap,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 200),
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
+          decoration: BoxDecoration(
+            color: widget.isSelected
+                ? widget.theme.colorScheme.primary
+                : _isHovered
+                    ? widget.theme.colorScheme.onSurface.withOpacity(0.05)
                     : Colors.transparent,
-                borderRadius: BorderRadius.circular(8),
-              ),
-              child: Center(
-                child: Text(
-                  widget.label,
-                  style: TextStyle(
-                    fontSize: 13,
-                    fontWeight: FontWeight.w700,
-                    color: widget.isSelected ? widget.theme.colorScheme.onPrimary : widget.theme.colorScheme.onSurface.withOpacity(_isHovered ? 0.7 : 0.4),
-                  ),
-                ),
-              ),
+            borderRadius: BorderRadius.circular(6),
+          ),
+          child: Text(
+            widget.label,
+            style: TextStyle(
+              fontSize: 12,
+              fontWeight: FontWeight.w600,
+              color: widget.isSelected ? widget.theme.colorScheme.onPrimary : widget.theme.colorScheme.onSurface.withOpacity(_isHovered ? 0.7 : 0.4),
             ),
           ),
         ),

lib/theme/app_theme.dart

@@ -3,7 +3,8 @@ import 'package:google_fonts/google_fonts.dart';
 
 class AppTheme {
   static const Color primaryYellow = Color(0xFFFFD700); // Bright Yellow for Dark
-  static const Color primaryAmber = Color(0xFFB45309); // Darker Amber for Light (Accessibility)
+  static const Color primaryGold = Color(0xFFB8960F); // Deep Gold for Light (readable on white)
+  static const Color primaryAmber = Color(0xFFB45309); // Darker Amber (unused, kept for reference)
 
   // Refined Dark Palette
   static const Color darkBg = Color(0xFF000000);
@@ -98,9 +99,9 @@ class AppTheme {
     useMaterial3: true,
     brightness: Brightness.light,
     colorScheme: ColorScheme.light(
-      primary: primaryYellow,
+      primary: primaryGold,
       onPrimary: Colors.black,
-      secondary: primaryYellow,
+      secondary: primaryGold,
       surface: lightSurface,
       background: lightBg,
       onSurface: lightTextPrimary,
@@ -134,7 +135,7 @@ class AppTheme {
     ),
     elevatedButtonTheme: ElevatedButtonThemeData(
       style: ElevatedButton.styleFrom(
-        backgroundColor: primaryYellow,
+        backgroundColor: primaryGold,
         foregroundColor: Colors.black,
         elevation: 0,
         padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
@@ -144,8 +145,8 @@ class AppTheme {
     ),
     outlinedButtonTheme: OutlinedButtonThemeData(
       style: OutlinedButton.styleFrom(
-        foregroundColor: Colors.black, // Darker text for visibility on light bg
-        side: const BorderSide(color: primaryYellow, width: 2.0),
+        foregroundColor: Colors.black,
+        side: const BorderSide(color: primaryGold, width: 2.0),
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
         textStyle: GoogleFonts.inter(fontWeight: FontWeight.w700, letterSpacing: -0.2),
       ),
@@ -163,7 +164,7 @@ class AppTheme {
       ),
       focusedBorder: OutlineInputBorder(
         borderRadius: BorderRadius.circular(8),
-        borderSide: const BorderSide(color: primaryYellow, width: 2.0),
+        borderSide: const BorderSide(color: primaryGold, width: 2.0),
       ),
       contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
     ),