ciaran.co.za
A Prediction Market on the AT Protocol
1@import "tailwindcss";
2@import "tw-animate-css";
3@import "shadcn/tailwind.css";
4
5@font-face {
6 font-family: "Atkinson Hyperlegible";
7 src: url("./fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
8 font-display: swap;
9}
10
11@font-face {
12 font-family: "Victor Mono";
13 src: url("./fonts/VictorMono-Regular.woff2") format("woff2");
14 font-weight: 400;
15 font-style: normal;
16 font-display: swap;
17}
18
19@custom-variant dark (&:is(.dark *));
20
21@theme {
22 --color-coral-50: #FFF8F9;
23 --color-coral-100: #FEF1F2;
24 --color-coral-200: #FDDCDF;
25 --color-coral-300: #FBC7CC;
26 --color-coral-400: #F99CA6;
27 --color-coral-500: #F67280;
28 --color-coral-600: #DD6773;
29 --color-coral-700: #94444D;
30 --color-coral-800: #6F333A;
31 --color-coral-900: #4A2226;
32
33 --color-shell-50: #F5F7F9;
34 --color-shell-100: #EBEFF2;
35 --color-shell-200: #CDD6DF;
36 --color-shell-300: #AEBECB;
37 --color-shell-400: #728DA4;
38 --color-shell-500: #355C7D;
39 --color-shell-600: #305371;
40 --color-shell-700: #20374B;
41 --color-shell-800: #182938;
42 --color-shell-900: #101C26;
43
44 --color-lipstick-50: #FCF8F9;
45 --color-lipstick-100: #F9F0F3;
46 --color-lipstick-200: #EFDAE0;
47 --color-lipstick-300: #E6C4CE;
48 --color-lipstick-400: #D398A9;
49 --color-lipstick-500: #C06C84;
50 --color-lipstick-600: #AD6177;
51 --color-lipstick-700: #73414F;
52 --color-lipstick-800: #56313B;
53 --color-lipstick-900: #3A2028;
54}
55
56@theme inline {
57 --radius-sm: calc(var(--radius) - 4px);
58 --radius-md: calc(var(--radius) - 2px);
59 --radius-lg: var(--radius);
60 --radius-xl: calc(var(--radius) + 4px);
61 --radius-2xl: calc(var(--radius) + 8px);
62 --radius-3xl: calc(var(--radius) + 12px);
63 --radius-4xl: calc(var(--radius) + 16px);
64 --color-background: var(--background);
65 --color-foreground: var(--foreground);
66 --color-card: var(--card);
67 --color-card-foreground: var(--card-foreground);
68 --color-popover: var(--popover);
69 --color-popover-foreground: var(--popover-foreground);
70 --color-primary: var(--primary);
71 --color-primary-foreground: var(--primary-foreground);
72 --color-secondary: var(--secondary);
73 --color-secondary-foreground: var(--secondary-foreground);
74 --color-muted: var(--muted);
75 --color-muted-foreground: var(--muted-foreground);
76 --color-accent: var(--accent);
77 --color-accent-foreground: var(--accent-foreground);
78 --color-destructive: var(--destructive);
79 --color-border: var(--border);
80 --color-input: var(--input);
81 --color-ring: var(--ring);
82 --color-chart-1: var(--chart-1);
83 --color-chart-2: var(--chart-2);
84 --color-chart-3: var(--chart-3);
85 --color-chart-4: var(--chart-4);
86 --color-chart-5: var(--chart-5);
87 --color-sidebar: var(--sidebar);
88 --color-sidebar-foreground: var(--sidebar-foreground);
89 --color-sidebar-primary: var(--sidebar-primary);
90 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
91 --color-sidebar-accent: var(--sidebar-accent);
92 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
93 --color-sidebar-border: var(--sidebar-border);
94 --color-sidebar-ring: var(--sidebar-ring);
95}
96
97:root {
98 --radius: 0.625rem;
99 --background: oklch(0.97 0.01 240);
100 /* shell-50 #F5F7F9 */
101 --foreground: oklch(0.17 0.01 240);
102 /* shell-900 #101C26 */
103 --card: oklch(0.95 0.01 240);
104 /* shell-100 #EBEFF2 */
105 --card-foreground: oklch(0.17 0.01 240);
106 --popover: oklch(0.95 0.01 240);
107 /* shell-100 */
108 --popover-foreground: oklch(0.17 0.01 240);
109 --primary: oklch(0.65 0.18 350);
110 /* coral-500 #F67280 */
111 --primary-foreground: oklch(0.97 0.01 240);
112 --secondary: oklch(0.96 0.02 350);
113 /* lipstick-100 #F9F0F3 */
114 --secondary-foreground: oklch(0.42 0.12 350);
115 /* lipstick-700 #73414F */
116 --muted: oklch(0.95 0.01 240);
117 /* shell-100 */
118 --muted-foreground: oklch(0.45 0.12 230);
119 /* shell-500 #355C7D */
120 --accent: oklch(0.92 0.04 350);
121 /* lipstick-200 #EFDAE0 */
122 --accent-foreground: oklch(0.25 0.06 350);
123 /* lipstick-800 #56313B */
124 --destructive: oklch(0.55 0.15 355);
125 /* coral-600 #DD6773 */
126 --border: oklch(0.88 0.03 230);
127 /* shell-200 #CDD6DF */
128 --input: oklch(0.88 0.03 230);
129 --ring: oklch(0.72 0.18 350);
130 /* coral-400 #F99CA6 */
131 --chart-1: oklch(0.65 0.18 350);
132 /* coral */
133 --chart-2: oklch(0.55 0.15 350);
134 /* lipstick */
135 --chart-3: oklch(0.45 0.12 230);
136 /* shell */
137 --chart-4: oklch(0.55 0.12 230);
138 /* shell */
139 --chart-5: oklch(0.7 0.14 350);
140 /* coral */
141 --sidebar: oklch(0.95 0.01 240);
142 --sidebar-foreground: oklch(0.17 0.01 240);
143 --sidebar-primary: oklch(0.65 0.18 350);
144 --sidebar-primary-foreground: oklch(0.97 0.01 240);
145 --sidebar-accent: oklch(0.92 0.04 350);
146 --sidebar-accent-foreground: oklch(0.25 0.06 350);
147 --sidebar-border: oklch(0.88 0.03 230);
148 --sidebar-ring: oklch(0.72 0.18 350);
149
150 --font-sans: "Atkinson Hyperlegible", sans-serif;
151 --font-mono: "Victor Mono", monospace;
152}
153
154.dark {
155 --background: oklch(0.17 0.01 240);
156 /* shell-900 #101C26 */
157 --foreground: oklch(0.97 0.01 240);
158 /* shell-50 #F5F7F9 */
159 --card: oklch(0.22 0.02 240);
160 /* shell-800 #182938 */
161 --card-foreground: oklch(0.97 0.01 240);
162 --popover: oklch(0.22 0.02 240);
163 /* shell-800 */
164 --popover-foreground: oklch(0.97 0.01 240);
165 --primary: oklch(0.72 0.18 350);
166 /* coral-400 #F99CA6 */
167 --primary-foreground: oklch(0.17 0.01 240);
168 --secondary: oklch(0.27 0.03 240);
169 /* shell-700 #20374B */
170 --secondary-foreground: oklch(0.95 0.01 240);
171 --muted: oklch(0.22 0.02 240);
172 --muted-foreground: oklch(0.55 0.1 230);
173 /* shell-400 #728DA4 */
174 --accent: oklch(0.42 0.12 350);
175 /* lipstick-700 #73414F */
176 --accent-foreground: oklch(0.96 0.02 350);
177 /* lipstick-100 */
178 --destructive: oklch(0.65 0.18 350);
179 /* coral-500 #F67280 */
180 --border: oklch(0.27 0.03 240);
181 /* shell-700 */
182 --input: oklch(0.27 0.03 240);
183 --ring: oklch(0.65 0.18 350);
184 /* coral-500 */
185 --chart-1: oklch(0.72 0.18 350);
186 --chart-2: oklch(0.42 0.12 350);
187 --chart-3: oklch(0.27 0.03 240);
188 --chart-4: oklch(0.55 0.12 230);
189 --chart-5: oklch(0.55 0.15 350);
190 --sidebar: oklch(0.17 0.01 240);
191 --sidebar-foreground: oklch(0.97 0.01 240);
192 --sidebar-primary: oklch(0.72 0.18 350);
193 --sidebar-primary-foreground: oklch(0.17 0.01 240);
194 --sidebar-accent: oklch(0.27 0.03 240);
195 --sidebar-accent-foreground: oklch(0.95 0.01 240);
196 --sidebar-border: oklch(0.27 0.03 240);
197 --sidebar-ring: oklch(0.65 0.18 350);
198}
199
200@layer base {
201 * {
202 @apply border-border outline-ring/50;
203 }
204
205 body {
206 @apply bg-background text-foreground;
207 }
208
209 a {
210 @apply border-b border-coral-500/50;
211 }
212
213}