11@import 'tailwindcss' ;
2+ @plugin '@tailwindcss/forms' ;
3+ @plugin '@tailwindcss/typography' ;
4+
5+ @custom-variant dark (& : where (.dark , .dark *
6+
7+ @layer base {
8+ button : not (: disabled ) {
9+ cursor : pointer;
10+ }
11+ }
12+
13+ @theme {
14+ /* Primary colors - Orange */
15+ --color-pm50 : # fff4ed/* Palest peach */
16+ --color-pm100 : # ffe6d5/* Very light orange */
17+ --color-pm200 : # feccb0/* Light peachy orange */
18+ --color-pm300 : # fdaa82/* Medium light orange */
19+ --color-pm400 : # fc7a4a/* Light vibrant orange */
20+ --color-pm500 : # ff3e00/* Vivid orange */
21+ --color-pm600 : # e63700/* Medium dark orange */
22+ --color-pm700 : # c22f00/* Dark orange */
23+ --color-pm800 : # 9e2600/* Very dark orange */
24+ --color-pm900 : # 7a1d00/* Darkest orange-brown */
25+
26+ /* Secondary colors - Slate Gray */
27+ --color-sd50 : # f8fafc/* Almost white slate */
28+ --color-sd100 : # f1f5f9/* Very light slate */
29+ --color-sd200 : # e2e8f0/* Light slate */
30+ --color-sd300 : # cbd5e1/* Medium light slate */
31+ --color-sd400 : # 94a3b8/* Light slate gray */
32+ --color-sd500 : # 64748b/* Medium slate gray */
33+ --color-sd600 : # 475569/* Medium dark slate */
34+ --color-sd700 : # 334155/* Dark slate */
35+ --color-sd800 : # 1e293b/* Very dark slate */
36+ --color-sd900 : # 0f172a/* Darkest slate (almost black) */
37+
38+ /* Background colors */
39+ --color-bg50 : # ffffff/* Pure white (base surface) */
40+ --color-bg100 : # fafcfe/* Almost white with blue hint */
41+ --color-bg200 : # f4f7fb/* Very light blue-gray */
42+ --color-bg300 : # eef2f8/* Pale blue-gray */
43+ --color-bg400 : # e5ebf4/* Light neutral blue-gray */
44+ --color-bg500 : # dbe2ee/* Medium light blue-gray */
45+ --color-bg600 : # cbd6e8/* Mid blue-gray */
46+ --color-bg700 : # b3c3dd/* Medium blue-gray */
47+ --color-bg800 : # 94a9cf/* Medium dark blue-gray */
48+ --color-bg900 : # 6b8bc4/* Deep muted blue */
49+
50+ /* Text colors */
51+ --color-tx50 : # 0f172a/* Darkest text (almost black) */
52+ --color-tx100 : # 1e293b/* Very dark text */
53+ --color-tx200 : # 334155/* Dark text */
54+ --color-tx300 : # 475569/* Medium dark text */
55+ --color-tx400 : # 64748b/* Medium text */
56+ --color-tx500 : # 94a3b8/* Medium light text */
57+ --color-tx600 : # cbd5e1/* Light text */
58+ --color-tx700 : # e2e8f0/* Lighter text */
59+ --color-tx800 : # e5e5e5/* Very light text (primary) */
60+ --color-tx900 : # ffffff/* Pure white text */
61+
62+ /* Border colors */
63+ --color-bd50 : # 0a0a0a/* Darkest border (barely visible) */
64+ --color-bd100 : # 171717/* Very dark border */
65+ --color-bd200 : # 262626/* Dark border */
66+ --color-bd300 : # 333333/* Medium dark border */
67+ --color-bd400 : # 404040/* Medium border */
68+ --color-bd500 : # 525252/* Medium light border */
69+ --color-bd600 : # 666666/* Light border */
70+ --color-bd700 : # 8a8a8a/* Lighter border */
71+ --color-bd800 : # a3a3a3/* Very light border */
72+ --color-bd900 : # d4d4d4/* Lightest border */
73+ }
74+
75+ /* Dark Mode */
76+ @layer theme {
77+ .dark {
78+ /* Primary colors - Softer Orange */
79+ --color-pm50 : # 7a1d00/* Darkest burnt orange */
80+ --color-pm100 : # 9e2600/* Very dark orange */
81+ --color-pm200 : # c22f00/* Dark orange */
82+ --color-pm300 : # e63700/* Medium dark orange */
83+ --color-pm400 : # ff5520/* Medium orange */
84+ --color-pm500 : # ff6b3d/* Softer, lighter orange */
85+ --color-pm600 : # ff8461/* Light orange */
86+ --color-pm700 : # ff9d84/* Lighter peachy orange */
87+ --color-pm800 : # ffb8a7/* Very light orange */
88+ --color-pm900 : # ffd3ca/* Palest peachy orange */
89+
90+ /* Secondary colors - Lighter Slate Gray */
91+ --color-sd50 : # 0f172a/* Darkest slate (almost black) */
92+ --color-sd100 : # 1e293b/* Very dark slate */
93+ --color-sd200 : # 334155/* Dark slate */
94+ --color-sd300 : # 475569/* Medium dark slate */
95+ --color-sd400 : # 64748b/* Medium slate gray */
96+ --color-sd500 : # 94a3b8/* Lighter slate gray */
97+ --color-sd600 : # cbd5e1/* Light slate */
98+ --color-sd700 : # e2e8f0/* Very light slate */
99+ --color-sd800 : # f1f5f9/* Almost white slate */
100+ --color-sd900 : # f8fafc/* Palest slate (almost white) */
101+
102+ /* Background colors */
103+ --color-bg50 : # 0a0a0a/* Nearly black (deepest surface) */
104+ --color-bg100 : # 121212/* Very dark gray */
105+ --color-bg200 : # 1a1a1a/* Dark gray */
106+ --color-bg300 : # 1e1e1e/* Dark charcoal gray */
107+ --color-bg400 : # 262626/* Medium dark gray */
108+ --color-bg500 : # 2e2e2e/* Medium gray */
109+ --color-bg600 : # 383838/* Lighter medium gray */
110+ --color-bg700 : # 4a4a4a/* Light gray */
111+ --color-bg800 : # 5c5c5c/* Lighter gray */
112+ --color-bg900 : # 707070/* Lightest gray */
113+
114+ /* Text colors */
115+ --color-tx50 : # ffffff/* Pure white text */
116+ --color-tx100 : # f8fafc/* Almost white */
117+ --color-tx200 : # f1f5f9/* Very light text */
118+ --color-tx300 : # cbd5e1/* Light gray text */
119+ --color-tx400 : # 94a3b8/* Medium light gray text */
120+ --color-tx500 : # 64748b/* Medium gray text */
121+ --color-tx600 : # 475569/* Medium text */
122+ --color-tx700 : # 334155/* Dark text */
123+ --color-tx800 : # 1e293b/* Very dark text (primary) */
124+ --color-tx900 : # 0f172a/* Darkest text (almost black) */
125+
126+ /* Border colors */
127+ --color-bd50 : # ffffff/* White border (invisible) */
128+ --color-bd100 : # f8fafc/* Almost invisible border */
129+ --color-bd200 : # f1f5f9/* Very subtle border */
130+ --color-bd300 : # e2e8f0/* Subtle border */
131+ --color-bd400 : # cbd5e1/* Light border */
132+ --color-bd500 : # 94a3b8/* Medium border */
133+ --color-bd600 : # 64748b/* Medium dark border */
134+ --color-bd700 : # 475569/* Dark border */
135+ --color-bd800 : # 334155/* Very dark border */
136+ --color-bd900 : # 1e293b/* Darkest border */
137+ }
138+ }
0 commit comments