1  @import "tailwindcss";
  2  @config "../../../tailwind.config.js";
  3  
  4  /* Definition of the design system. All colors, gradients, fonts, etc should be defined here.  
  5  All colors MUST be HSL. 
  6  */
  7  
  8  @layer base {
  9    :root {
 10      --background: 0 0% 100%;
 11      --foreground: 222.2 84% 4.9%;
 12  
 13      --card: 0 0% 100%;
 14      --card-foreground: 222.2 84% 4.9%;
 15  
 16      --primary: 217 91% 60%;
 17      --primary-foreground: 0 0% 100%;
 18      --primary-hover: 217 91% 55%;
 19  
 20      --secondary: 210 40% 96.1%;
 21      --secondary-foreground: 222.2 47.4% 11.2%;
 22  
 23      --muted: 210 40% 96.1%;
 24      --muted-foreground: 215.4 16.3% 46.9%;
 25  
 26      --accent: 142 71% 45%;
 27      --accent-foreground: 0 0% 100%;
 28      --accent-hover: 142 71% 40%;
 29  
 30      --destructive: 0 84.2% 60.2%;
 31      --destructive-foreground: 210 40% 98%;
 32  
 33      --border: 214.3 31.8% 91.4%;
 34      --input: 214.3 31.8% 91.4%;
 35      --ring: 217 91% 60%;
 36  
 37      --gradient-primary: linear-gradient(
 38        135deg,
 39        hsl(var(--primary)),
 40        hsl(var(--primary-hover))
 41      );
 42      --gradient-accent: linear-gradient(
 43        135deg,
 44        hsl(var(--accent)),
 45        hsl(var(--accent-hover))
 46      );
 47      --shadow-nav: 0 4px 6px -1px hsl(var(--nav-background) / 0.1);
 48      --shadow-card: 0 1px 3px 0 hsl(var(--foreground) / 0.1);
 49  
 50      --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 51  
 52      --radius: 0.5rem;
 53  
 54      /* Chart colors for cryptocurrency dashboard */
 55      --chart-1: 270 75% 60%;
 56      /* Purple for Sprout Pool */
 57      --chart-2: 45 93% 47%;
 58      /* Deep yellow for Sapling Pool */
 59      --chart-3: 84 81% 44%;
 60      /* Lemon green for Orchard Pool */
 61      --chart-4: 217 91% 60%;
 62      /* Primary blue for other charts */
 63      --chart-5: 142 71% 45%;
 64      /* Accent green for additional charts */
 65    }
 66  
 67    /* Dark mode variables - will be applied when .dark class is present */
 68    .dark {
 69      --background: 222.2 84% 4.9%;
 70      --foreground: 210 40% 98%;
 71  
 72      --card: 222.2 84% 4.9%;
 73      --card-foreground: 210 40% 98%;
 74  
 75      --popover: 222.2 84% 4.9%;
 76      --popover-foreground: 210 40% 98%;
 77  
 78      --primary: 210 40% 98%;
 79      --primary-foreground: 222.2 47.4% 11.2%;
 80  
 81      --secondary: 217.2 32.6% 17.5%;
 82      --secondary-foreground: 210 40% 98%;
 83  
 84      --muted: 217.2 32.6% 17.5%;
 85      --muted-foreground: 215 20.2% 65.1%;
 86  
 87      --accent: 217.2 32.6% 17.5%;
 88      --accent-foreground: 210 40% 98%;
 89  
 90      --destructive: 0 62.8% 30.6%;
 91      --destructive-foreground: 210 40% 98%;
 92  
 93      --border: 217.2 32.6% 17.5%;
 94      --input: 217.2 32.6% 17.5%;
 95      --ring: 212.7 26.8% 83.9%;
 96    }
 97  
 98    * {
 99      border-color: hsl(var(--border));
100      transition: background-color 0.08s ease-out, color 0.08s ease-out,
101        border-color 0.08s ease-out;
102    }
103  
104    body {
105      background-color: hsl(var(--background));
106      color: hsl(var(--foreground));
107    }
108  }
109  
110  @layer utilities {
111    .bg-background {
112      background-color: hsl(var(--background));
113    }
114  
115    .bg-card {
116      background-color: hsl(var(--card));
117    }
118  
119    .bg-muted {
120      background-color: hsl(var(--muted));
121    }
122  
123    .text-foreground {
124      color: hsl(var(--foreground));
125    }
126  
127    .text-muted-foreground {
128      color: hsl(var(--muted-foreground));
129    }
130  
131    .text-card-foreground {
132      color: hsl(var(--card-foreground));
133    }
134  
135    .border-border {
136      border-color: hsl(var(--border));
137    }
138  
139    /* Quick transition class for immediate elements */
140    .transition-theme {
141      transition: background-color 0.08s ease-out, color 0.08s ease-out,
142        border-color 0.08s ease-out, box-shadow 0.08s ease-out;
143    }
144  }