| 1 | @tailwind base; |
| 2 | @tailwind components; |
| 3 | @tailwind utilities; |
| 4 | |
| 5 | /* Definition of the design system. All colors, gradients, fonts, etc should be defined here. |
| 6 | All colors MUST be HSL. |
| 7 | */ |
| 8 | |
| 9 | @layer base { |
| 10 | :root { |
| 11 | --background: 95 70% 85%; |
| 12 | --foreground: 0 0% 10%; |
| 13 | |
| 14 | --card: 0 0% 100%; |
| 15 | --card-foreground: 0 0% 10%; |
| 16 | |
| 17 | --popover: 0 0% 100%; |
| 18 | --popover-foreground: 0 0% 10%; |
| 19 | |
| 20 | --primary: 0 0% 10%; |
| 21 | --primary-foreground: 0 0% 100%; |
| 22 | |
| 23 | --secondary: 142 60% 96%; |
| 24 | --secondary-foreground: 142 76% 30%; |
| 25 | |
| 26 | --muted: 95 50% 92%; |
| 27 | --muted-foreground: 0 0% 45%; |
| 28 | |
| 29 | --accent: 142 76% 50%; |
| 30 | --accent-foreground: 0 0% 10%; |
| 31 | |
| 32 | --destructive: 0 75% 55%; |
| 33 | --destructive-foreground: 0 0% 100%; |
| 34 | |
| 35 | --border: 0 0% 90%; |
| 36 | --input: 0 0% 100%; |
| 37 | --ring: 0 0% 10%; |
| 38 | |
| 39 | --radius: 0.75rem; |
| 40 | |
| 41 | --toolbar-bg: 0 0% 100%; |
| 42 | --toolbar-border: 0 0% 90%; |
| 43 | |
| 44 | --nav-bg: 0 0% 100%; |
| 45 | --nav-border: 0 0% 90%; |
| 46 | --nav-active: 0 0% 10%; |
| 47 | |
| 48 | --expense-positive: 142 76% 45%; |
| 49 | --expense-negative: 0 75% 55%; |
| 50 | |
| 51 | --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| 52 | |
| 53 | --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
| 54 | --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| 55 | --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| 56 | } |
| 57 | |
| 58 | .dark { |
| 59 | --background: 0 0% 10%; |
| 60 | --foreground: 0 0% 95%; |
| 61 | |
| 62 | --card: 0 0% 15%; |
| 63 | --card-foreground: 0 0% 95%; |
| 64 | |
| 65 | --popover: 0 0% 15%; |
| 66 | --popover-foreground: 0 0% 95%; |
| 67 | |
| 68 | --primary: 95 70% 75%; |
| 69 | --primary-foreground: 0 0% 10%; |
| 70 | |
| 71 | --secondary: 0 0% 20%; |
| 72 | --secondary-foreground: 95 70% 75%; |
| 73 | |
| 74 | --muted: 0 0% 20%; |
| 75 | --muted-foreground: 0 0% 60%; |
| 76 | |
| 77 | --accent: 142 76% 55%; |
| 78 | --accent-foreground: 0 0% 10%; |
| 79 | |
| 80 | --destructive: 0 75% 60%; |
| 81 | --destructive-foreground: 0 0% 100%; |
| 82 | |
| 83 | --border: 0 0% 25%; |
| 84 | --input: 0 0% 20%; |
| 85 | --ring: 95 70% 75%; |
| 86 | |
| 87 | --toolbar-bg: 0 0% 15%; |
| 88 | --toolbar-border: 0 0% 25%; |
| 89 | |
| 90 | --nav-bg: 0 0% 15%; |
| 91 | --nav-border: 0 0% 25%; |
| 92 | --nav-active: 95 70% 75%; |
| 93 | |
| 94 | --expense-positive: 142 76% 50%; |
| 95 | --expense-negative: 0 75% 60%; |
| 96 | |
| 97 | --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); |
| 98 | --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); |
| 99 | --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); |
| 100 | } |
| 101 | } |
| 102 | |
| 103 | @layer base { |
| 104 | * { |
| 105 | @apply border-border; |
| 106 | } |
| 107 | |
| 108 | body { |
| 109 | @apply bg-background text-foreground; |
| 110 | } |
| 111 | } |