1  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&display=swap');
  2  
  3  @tailwind base;
  4  @tailwind components;
  5  @tailwind utilities;
  6  
  7  @layer base {
  8    :root {
  9      --background: 210 50% 98%;
 10      --foreground: 222.2 84% 4.9%;
 11  
 12      --card: 0 0% 100%;
 13      --card-foreground: 222.2 84% 4.9%;
 14  
 15      --popover: 0 0% 100%;
 16      --popover-foreground: 222.2 84% 4.9%;
 17  
 18      --primary: 221 83% 53%;
 19      --primary-foreground: 210 40% 98%;
 20  
 21      --secondary: 210 40% 96.1%;
 22      --secondary-foreground: 222.2 47.4% 11.2%;
 23  
 24      --muted: 210 40% 96.1%;
 25      --muted-foreground: 215.4 16.3% 46.9%;
 26  
 27      --accent: 220 100% 60%;
 28      /* Electric Blue */
 29      --accent-foreground: 210 40% 98%;
 30  
 31      --destructive: 0 84.2% 60.2%;
 32      --destructive-foreground: 210 40% 98%;
 33  
 34      --border: 214.3 31.8% 91.4%;
 35      --input: 214.3 31.8% 91.4%;
 36      --ring: 221 83% 53%;
 37  
 38      --radius: 0.5rem;
 39  
 40      --sidebar-background: 0 0% 98%;
 41      --sidebar-foreground: 240 5.3% 26.1%;
 42      --sidebar-primary: 240 5.9% 10%;
 43      --sidebar-primary-foreground: 0 0% 98%;
 44      --sidebar-accent: 240 4.8% 95.9%;
 45      --sidebar-accent-foreground: 240 5.9% 10%;
 46      --sidebar-border: 220 13% 91%;
 47      --sidebar-ring: 217.2 91.2% 59.8%;
 48  
 49      /* New gradient colors */
 50      --brain-purple: 270 80% 60%;
 51      --brain-cyan: 190 100% 50%;
 52      --brain-green: 142 71% 45%;
 53      /* Defined in case we want to swap it in easily */
 54  
 55      /* Existing knowledge colors - ensure they are kept if used elsewhere */
 56      /* --knowledge-dark: ...; */
 57      /* --knowledge: ...; */
 58      /* --knowledge-light: ...; */
 59    }
 60  
 61    .dark {
 62      --background: 0 0% 0%;
 63      --foreground: 210 30% 92%;
 64  
 65      --card: 240 10% 5%;
 66      --card-foreground: 210 30% 92%;
 67  
 68      --popover: 240 10% 5%;
 69      --popover-foreground: 210 30% 92%;
 70  
 71      --primary: 220 100% 60%;
 72      --primary-foreground: 210 30% 96%;
 73  
 74      --secondary: 217.2 32.6% 17.5%;
 75      --secondary-foreground: 210 40% 98%;
 76  
 77      --muted: 240 10% 3%;
 78      --muted-foreground: 240 5% 55%;
 79  
 80      --accent: 220 100% 60%;
 81      --accent-foreground: 210 30% 96%;
 82  
 83      --destructive: 0 70% 50%;
 84      --destructive-foreground: 210 30% 96%;
 85  
 86      --border: 240 10% 10%;
 87      --input: 240 10% 10%;
 88      --ring: 220 100% 60%;
 89    }
 90  }
 91  
 92  @layer base {
 93    * {
 94      @apply border-border;
 95    }
 96  
 97    html {
 98      /* Ensure html has background color matching theme */
 99      @apply bg-background;
100    }
101  
102    body {
103      @apply bg-background text-foreground;
104      /* Add transition for smooth theme changes */
105      transition: background-color 0.3s ease, color 0.3s ease;
106    }
107  
108    /* Add page transition effect */
109    #root main {
110      @apply transition-opacity duration-300;
111    }
112  
113    .knowledge-link {
114      @apply text-knowledge font-medium underline-offset-4 hover:underline hover:text-knowledge-dark transition-colors duration-200;
115    }
116  }
117  
118  .content-block {
119    @apply border border-border rounded-lg p-4 hover:shadow-sm transition-shadow duration-200 bg-card text-card-foreground;
120  }
121  
122  .content-section {
123    @apply border-t pt-4 mt-4 first:border-t-0 first:pt-0 first:mt-0;
124  }
125  
126  /* Graph view styles */
127  .center-node {
128    font-weight: bold;
129  }
130  
131  .related-node {
132    cursor: pointer;
133    background-color: hsl(var(--card));
134    color: hsl(var(--card-foreground));
135    border: 1px solid hsl(var(--border));
136    padding: 6px 12px;
137    border-radius: 4px;
138    transition: all 0.2s ease;
139  }
140  
141  .related-node:hover {
142    border-color: hsl(var(--accent));
143    box-shadow: 0 0 0 1px hsl(var(--accent));
144  }
145  
146  .knowledge-edge {
147    stroke: hsl(var(--primary));
148  }
149  
150  .block-specific-edge {
151    stroke: hsl(var(--accent));
152  }
153  
154  .animate-fade-in {
155    animation: fadeIn 0.3s ease-in-out;
156  }
157  
158  @keyframes fadeIn {
159    from {
160      opacity: 0;
161    }
162  
163    to {
164      opacity: 1;
165    }
166  }
167  
168  /* Ensure smooth theme changes for all elements */
169  *,
170  *::before,
171  *::after {
172    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
173  }
174  
175  .unified-interactive-card {
176    @apply cursor-pointer bg-card text-card-foreground border border-border rounded p-3 transition-all duration-200 ease-in-out;
177  }
178  
179  .unified-interactive-card:hover {
180    @apply border-accent shadow-[0_0_0_1px_hsl(var(--accent))];
181  }