New-Demplar/index.css at main · jayfeezy/New-Demplar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --muted: 60 4.8% 95.9%;
  --muted-foreground: 25 5.3% 44.7%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 60 4.8% 95.9%;
  --secondary-foreground: 24 9.8% 10%;
  --accent: 60 4.8% 95.9%;
  --accent-foreground: 24 9.8% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  --ring: 20 14.3% 4.1%;
  --radius: 0.5rem;

  /* Custom Demplar colors */
  --fantasy-deep: 30 100% 20%; /* #1e3a8a equivalent in HSL */
  --fantasy-gold: 45 98% 58%; /* #fbbf24 equivalent in HSL */
  --fantasy-purple: 259 94% 51%; /* #7c3aed equivalent in HSL */
  --fantasy-charcoal: 220 18% 32%; /* #374151 equivalent in HSL */
  --fantasy-parchment: 210 20% 98%; /* #f9fafb equivalent in HSL */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --ring: 240 4.9% 83.9%;
  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* Custom utility classes for Demplar theme */
.bg-fantasy-deep {
  background-color: hsl(var(--fantasy-deep));
}

.bg-fantasy-gold {
  background-color: hsl(var(--fantasy-gold));
}

.bg-fantasy-purple {
  background-color: hsl(var(--fantasy-purple));
}

.bg-fantasy-charcoal {
  background-color: hsl(var(--fantasy-charcoal));
}

.bg-fantasy-parchment {
  background-color: hsl(var(--fantasy-parchment));
}

.text-fantasy-deep {
  color: hsl(var(--fantasy-deep));
}

.text-fantasy-gold {
  color: hsl(var(--fantasy-gold));
}

.text-fantasy-purple {
  color: hsl(var(--fantasy-purple));
}

.text-fantasy-charcoal {
  color: hsl(var(--fantasy-charcoal));
}

.border-fantasy-deep {
  border-color: hsl(var(--fantasy-deep));
}

.font-fantasy {
  font-family: 'Cinzel', serif;
}

.font-ui {
  font-family: 'Inter', sans-serif;
}