1  @tailwind base;
  2  @tailwind components;
  3  @tailwind utilities;
  4  
  5  @layer base {
  6    /* Light Mode (default) */
  7    :root {
  8      /* Backgrounds */
  9      --bg-primary: #FAFAFA;
 10      --bg-secondary: #FFFFFF;
 11      --bg-tertiary: #F4F4F5;
 12      --bg-elevated: #FFFFFF;
 13  
 14      /* Text */
 15      --text-primary: #18181B;
 16      --text-secondary: #52525B;
 17      --text-tertiary: #71717A;
 18      --text-muted: #A1A1AA;
 19  
 20      /* Borders */
 21      --border-primary: #E4E4E7;
 22      --border-secondary: #D4D4D8;
 23      --border-subtle: #E4E4E7;
 24      --border-default: #D4D4D8;
 25      --border-strong: #A1A1AA;
 26  
 27      /* Brand colors */
 28      --alpha-primary: #2B87FF;
 29      --delta-primary: #F59E0B;
 30  
 31      /* Button colors */
 32      --btn-primary-bg: #2B87FF;
 33      --btn-primary-bg-hover: #1A6FE8;
 34      --btn-primary-bg-active: #1458CC;
 35      --btn-secondary-border-hover: #2B87FF;
 36  
 37      /* Semantic colors */
 38      --error: #EF4444;
 39      --error-hover: #DC2626;
 40      --error-active: #B91C1C;
 41      --success: #22C55E;
 42      --success-hover: #16A34A;
 43      --success-active: #15803D;
 44      --warning: #F59E0B;
 45      --info: #3B82F6;
 46  
 47      /* Input */
 48      --input-border-focus: #2B87FF;
 49    }
 50  
 51    /* Dark Mode */
 52    .dark {
 53      /* Backgrounds */
 54      --bg-primary: #09090B;
 55      --bg-secondary: #18181B;
 56      --bg-tertiary: #27272A;
 57      --bg-elevated: #18181B;
 58  
 59      /* Text */
 60      --text-primary: #FAFAFA;
 61      --text-secondary: #A1A1AA;
 62      --text-tertiary: #71717A;
 63      --text-muted: #52525B;
 64  
 65      /* Borders */
 66      --border-primary: #27272A;
 67      --border-secondary: #3F3F46;
 68      --border-subtle: #27272A;
 69      --border-default: #3F3F46;
 70      --border-strong: #52525B;
 71  
 72      /* Brand colors */
 73      --alpha-primary: #4A9DFF;
 74      --delta-primary: #FBBF24;
 75  
 76      /* Button colors */
 77      --btn-primary-bg: #4A9DFF;
 78      --btn-primary-bg-hover: #2B87FF;
 79      --btn-primary-bg-active: #1A6FE8;
 80      --btn-secondary-border-hover: #4A9DFF;
 81  
 82      /* Semantic colors */
 83      --error: #F87171;
 84      --error-hover: #EF4444;
 85      --error-active: #DC2626;
 86      --success: #4ADE80;
 87      --success-hover: #22C55E;
 88      --success-active: #16A34A;
 89      --warning: #FBBF24;
 90      --info: #60A5FA;
 91  
 92      /* Input */
 93      --input-border-focus: #4A9DFF;
 94    }
 95  
 96    body {
 97      background-color: var(--bg-primary);
 98      color: var(--text-primary);
 99      transition: background-color 200ms, color 200ms;
100    }
101  }