jaydip.me
1@import 'tailwindcss';
2
3@plugin 'tailwindcss-animate';
4
5@custom-variant dark (&:is(.dark *));
6
7@theme {
8 --font-inter: Inter, sans-serif;
9
10 --color-border: hsl(var(--border));
11 --color-input: hsl(var(--input));
12 --color-ring: hsl(var(--ring));
13 --color-background: hsl(var(--background));
14 --color-foreground: hsl(var(--foreground));
15
16 --color-primary: hsl(var(--primary));
17 --color-primary-foreground: hsl(var(--primary-foreground));
18
19 --color-secondary: hsl(var(--secondary));
20 --color-secondary-foreground: hsl(var(--secondary-foreground));
21
22 --color-destructive: hsl(var(--destructive));
23 --color-destructive-foreground: hsl(var(--destructive-foreground));
24
25 --color-muted: hsl(var(--muted));
26 --color-muted-foreground: hsl(var(--muted-foreground));
27
28 --color-accent: hsl(var(--accent));
29 --color-accent-foreground: hsl(var(--accent-foreground));
30
31 --color-popover: hsl(var(--popover));
32 --color-popover-foreground: hsl(var(--popover-foreground));
33
34 --color-card: hsl(var(--card));
35 --color-card-foreground: hsl(var(--card-foreground));
36
37 --color-sidebar: hsl(var(--sidebar-background));
38 --color-sidebar-foreground: hsl(var(--sidebar-foreground));
39 --color-sidebar-primary: hsl(var(--sidebar-primary));
40 --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
41 --color-sidebar-accent: hsl(var(--sidebar-accent));
42 --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
43 --color-sidebar-border: hsl(var(--sidebar-border));
44 --color-sidebar-ring: hsl(var(--sidebar-ring));
45
46 --color-gray-50: oklch(98.5% 0 0);
47 --color-gray-100: oklch(96.7% 0.001 286.375);
48 --color-gray-200: oklch(92% 0.004 286.32);
49 --color-gray-300: oklch(87.1% 0.006 286.286);
50 --color-gray-400: oklch(70.5% 0.015 286.067);
51 --color-gray-500: oklch(55.2% 0.016 285.938);
52 --color-gray-600: oklch(44.2% 0.017 285.786);
53 --color-gray-700: oklch(37% 0.013 285.805);
54 --color-gray-800: oklch(27.4% 0.006 286.033);
55 --color-gray-900: oklch(21% 0.006 285.885);
56 --color-gray-950: oklch(14.1% 0.005 285.823);
57
58
59 --radius-lg: var(--radius);
60 --radius-md: calc(var(--radius) - 2px);
61 --radius-sm: calc(var(--radius) - 4px);
62
63 --animate-accordion-down: accordion-down 0.2s ease-out;
64 --animate-accordion-up: accordion-up 0.2s ease-out;
65
66 @keyframes accordion-down {
67 from {
68 height: 0;
69 }
70 to {
71 height: var(--radix-accordion-content-height);
72 }
73 }
74 @keyframes accordion-up {
75 from {
76 height: var(--radix-accordion-content-height);
77 }
78 to {
79 height: 0;
80 }
81 }
82}
83
84@utility container {
85 margin-inline: auto;
86 padding-inline: 2rem;
87 @media (width >= --theme(--breakpoint-sm)) {
88 max-width: none;
89 }
90 @media (width >= 1400px) {
91 max-width: 1400px;
92 }
93}
94
95/*
96 The default border color has changed to `currentcolor` in Tailwind CSS v4,
97 so we've added these compatibility styles to make sure everything still
98 looks the same as it did with Tailwind CSS v3.
99
100 If we ever want to remove these styles, we need to add an explicit border
101 color utility to any element that depends on these defaults.
102*/
103@layer base {
104 *,
105 ::after,
106 ::before,
107 ::backdrop,
108 ::file-selector-button {
109 border-color: var(--color-gray-200, currentcolor);
110 }
111}
112
113@layer base {
114 :root {
115 --background: 111 7% 6%;
116 --foreground: 60 9% 98%;
117
118 --card: 111 7% 6%;
119 --card-foreground: 60 9% 98%;
120
121 --popover: 111 7% 6%;
122 --popover-foreground: 60 9% 98%;
123
124 --primary: 110 43% 69%;
125 --primary-foreground: 111 7% 6%;
126
127 --secondary: 111 13% 15%;
128 --secondary-foreground: 60 9% 98%;
129
130 --muted: 111 13% 15%;
131 --muted-foreground: 60 5% 64%;
132
133 --accent: 111 13% 15%;
134 --accent-foreground: 60 9% 98%;
135
136 --destructive: 0 84% 37%;
137 --destructive-foreground: 60 9% 98%;
138
139 --border: 111 13% 15%;
140 --input: 111 13% 15%;
141 --ring: 110 43% 69%; /* Olive ring with better contrast */
142
143 --radius: 0.5rem;
144
145 /* Olive sidebar theme with better contrast */
146 --sidebar-background: 111 13% 10%;
147 --sidebar-foreground: 60 9% 95%;
148 --sidebar-primary: 110 43% 69%; /* Better contrast olive */
149 --sidebar-primary-foreground: 111 7% 6%;
150 --sidebar-accent: 111 13% 18%;
151 --sidebar-accent-foreground: 60 9% 95%;
152 --sidebar-border: 111 13% 18%;
153 --sidebar-ring: 110 43% 69%; /* Better contrast olive */
154 }
155}
156
157@layer base {
158 * {
159 @apply border-border;
160 }
161
162 body {
163 @apply bg-background text-foreground;
164 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
165 }
166
167 /* Canvas gradient with olive accent */
168 .canvas-gradient {
169 background: linear-gradient(135deg,
170 hsl(111, 13%, 10%) 0%,
171 hsl(111, 13%, 12%) 50%,
172 hsl(111, 13%, 10%) 100%);
173 }
174}