styles.css
1 @import "tailwindcss"; 2 @plugin "@tailwindcss/typography"; 3 @config "../tailwind.config.js"; 4 5 @import "tw-animate-css"; 6 7 @custom-variant dark (&:is(.dark *)); 8 9 body { 10 @apply m-0; 11 font-family: 12 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", 13 "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 14 -webkit-font-smoothing: antialiased; 15 -moz-osx-font-smoothing: grayscale; 16 } 17 18 code { 19 font-family: 20 source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; 21 } 22 23 :root { 24 --code-background: oklch(0.7472 0.02 286.0164); 25 --code-foreground: oklch(42.165% 0.03641 284.723); 26 --background: oklch(0.9816 0.0017 247.839); 27 --foreground: oklch(0.1649 0.0352 281.8285); 28 --card: oklch(1 0 0); 29 --card-foreground: oklch(0.1649 0.0352 281.8285); 30 --popover: oklch(1 0 0); 31 --popover-foreground: oklch(0.1649 0.0352 281.8285); 32 --primary: oklch(0.6726 0.2904 341.4084); 33 --primary-foreground: oklch(1 0 0); 34 --secondary: oklch(0.9595 0.02 286.0164); 35 --secondary-foreground: oklch(0.1649 0.0352 281.8285); 36 --muted: oklch(0.9595 0.02 286.0164); 37 --muted-foreground: oklch(0.1649 0.0352 281.8285); 38 --accent: oklch(0.8903 0.1739 171.269); 39 --accent-foreground: oklch(0.1649 0.0352 281.8285); 40 --destructive: oklch(0.6535 0.2348 34.037); 41 --destructive-foreground: oklch(1 0 0); 42 --border: oklch(0.9205 0.0086 225.0878); 43 --input: oklch(0.9205 0.0086 225.0878); 44 --ring: oklch(0.6726 0.2904 341.4084); 45 --chart-1: oklch(0.6726 0.2904 341.4084); 46 --chart-2: oklch(0.5488 0.2944 299.0954); 47 --chart-3: oklch(0.8442 0.1457 209.2851); 48 --chart-4: oklch(0.8903 0.1739 171.269); 49 --chart-5: oklch(0.9168 0.1915 101.407); 50 --radius: 0.5rem; 51 --sidebar: oklch(0.9595 0.02 286.0164); 52 --sidebar-foreground: oklch(0.1649 0.0352 281.8285); 53 --sidebar-primary: oklch(0.6726 0.2904 341.4084); 54 --sidebar-primary-foreground: oklch(1 0 0); 55 --sidebar-accent: oklch(0.8903 0.1739 171.269); 56 --sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285); 57 --sidebar-border: oklch(0.9205 0.0086 225.0878); 58 --sidebar-ring: oklch(0.6726 0.2904 341.4084); 59 --font-sans: Outfit, sans-serif; 60 --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; 61 --font-mono: Fira Code, monospace; 62 --shadow-color: hsl(0 0% 0%); 63 --shadow-opacity: 0.1; 64 --shadow-blur: 8px; 65 --shadow-spread: -2px; 66 --shadow-offset-x: 0px; 67 --shadow-offset-y: 4px; 68 --letter-spacing: 0em; 69 --spacing: 0.25rem; 70 --shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); 71 --shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); 72 --shadow-sm: 73 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); 74 --shadow: 75 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); 76 --shadow-md: 77 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1); 78 --shadow-lg: 79 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1); 80 --shadow-xl: 81 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1); 82 --shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25); 83 --tracking-normal: 0em; 84 } 85 86 .dark { 87 --code-background: oklch(0.3525 0.0611 281.1423); 88 --code-foreground: oklch(74.033% 0.00802 260.847); 89 --background: oklch(0.1649 0.0352 281.8285); 90 --foreground: oklch(0.9513 0.0074 260.7315); 91 --card: oklch(0.2542 0.0611 281.1423); 92 --card-foreground: oklch(0.9513 0.0074 260.7315); 93 --popover: oklch(0.2542 0.0611 281.1423); 94 --popover-foreground: oklch(0.9513 0.0074 260.7315); 95 --primary: oklch(0.6726 0.2904 341.4084); 96 --primary-foreground: oklch(1 0 0); 97 --secondary: oklch(0.2542 0.0611 281.1423); 98 --secondary-foreground: oklch(0.9513 0.0074 260.7315); 99 --muted: oklch(0.2542 0.0611 281.1423); 100 --muted-foreground: oklch(0.6245 0.05 278.1046); 101 --accent: oklch(0.8903 0.1739 171.269); 102 --accent-foreground: oklch(0.1649 0.0352 281.8285); 103 --destructive: oklch(0.6535 0.2348 34.037); 104 --destructive-foreground: oklch(1 0 0); 105 --border: oklch(0.3279 0.0832 280.789); 106 --input: oklch(0.3279 0.0832 280.789); 107 --ring: oklch(0.6726 0.2904 341.4084); 108 --chart-1: oklch(0.6726 0.2904 341.4084); 109 --chart-2: oklch(0.5488 0.2944 299.0954); 110 --chart-3: oklch(0.8442 0.1457 209.2851); 111 --chart-4: oklch(0.8903 0.1739 171.269); 112 --chart-5: oklch(0.9168 0.1915 101.407); 113 --sidebar: oklch(0.1649 0.0352 281.8285); 114 --sidebar-foreground: oklch(0.9513 0.0074 260.7315); 115 --sidebar-primary: oklch(0.6726 0.2904 341.4084); 116 --sidebar-primary-foreground: oklch(1 0 0); 117 --sidebar-accent: oklch(0.8903 0.1739 171.269); 118 --sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285); 119 --sidebar-border: oklch(0.3279 0.0832 280.789); 120 --sidebar-ring: oklch(0.6726 0.2904 341.4084); 121 --radius: 0.5rem; 122 --font-sans: Outfit, sans-serif; 123 --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; 124 --font-mono: Fira Code, monospace; 125 --shadow-color: hsl(0 0% 0%); 126 --shadow-opacity: 0.1; 127 --shadow-blur: 8px; 128 --shadow-spread: -2px; 129 --shadow-offset-x: 0px; 130 --shadow-offset-y: 4px; 131 --letter-spacing: 0em; 132 --spacing: 0.25rem; 133 --shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); 134 --shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); 135 --shadow-sm: 136 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); 137 --shadow: 138 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); 139 --shadow-md: 140 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1); 141 --shadow-lg: 142 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1); 143 --shadow-xl: 144 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1); 145 --shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25); 146 } 147 148 @theme inline { 149 --color-background: var(--background); 150 --color-foreground: var(--foreground); 151 --color-card: var(--card); 152 --color-card-foreground: var(--card-foreground); 153 --color-popover: var(--popover); 154 --color-popover-foreground: var(--popover-foreground); 155 --color-primary: var(--primary); 156 --color-primary-foreground: var(--primary-foreground); 157 --color-secondary: var(--secondary); 158 --color-secondary-foreground: var(--secondary-foreground); 159 --color-muted: var(--muted); 160 --color-muted-foreground: var(--muted-foreground); 161 --color-accent: var(--accent); 162 --color-accent-foreground: var(--accent-foreground); 163 --color-destructive: var(--destructive); 164 --color-destructive-foreground: var(--destructive-foreground); 165 --color-border: var(--border); 166 --color-input: var(--input); 167 --color-ring: var(--ring); 168 --color-chart-1: var(--chart-1); 169 --color-chart-2: var(--chart-2); 170 --color-chart-3: var(--chart-3); 171 --color-chart-4: var(--chart-4); 172 --color-chart-5: var(--chart-5); 173 --radius-sm: calc(var(--radius) - 4px); 174 --radius-md: calc(var(--radius) - 2px); 175 --radius-lg: var(--radius); 176 --radius-xl: calc(var(--radius) + 4px); 177 --color-sidebar: var(--sidebar); 178 --color-sidebar-foreground: var(--sidebar-foreground); 179 --color-sidebar-primary: var(--sidebar-primary); 180 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); 181 --color-sidebar-accent: var(--sidebar-accent); 182 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); 183 --color-sidebar-border: var(--sidebar-border); 184 --color-sidebar-ring: var(--sidebar-ring); 185 --font-sans: Outfit, sans-serif; 186 --font-mono: Fira Code, monospace; 187 --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; 188 --radius: 0.5rem; 189 --tracking-tighter: calc(var(--tracking-normal) - 0.05em); 190 --tracking-tight: calc(var(--tracking-normal) - 0.025em); 191 --tracking-wide: calc(var(--tracking-normal) + 0.025em); 192 --tracking-wider: calc(var(--tracking-normal) + 0.05em); 193 --tracking-widest: calc(var(--tracking-normal) + 0.1em); 194 --tracking-normal: var(--tracking-normal); 195 --shadow-2xl: var(--shadow-2xl); 196 --shadow-xl: var(--shadow-xl); 197 --shadow-lg: var(--shadow-lg); 198 --shadow-md: var(--shadow-md); 199 --shadow: var(--shadow); 200 --shadow-sm: var(--shadow-sm); 201 --shadow-xs: var(--shadow-xs); 202 --shadow-2xs: var(--shadow-2xs); 203 --spacing: var(--spacing); 204 --letter-spacing: var(--letter-spacing); 205 --shadow-offset-y: var(--shadow-offset-y); 206 --shadow-offset-x: var(--shadow-offset-x); 207 --shadow-spread: var(--shadow-spread); 208 --shadow-blur: var(--shadow-blur); 209 --shadow-opacity: var(--shadow-opacity); 210 --color-shadow-color: var(--shadow-color); 211 } 212 213 @layer base { 214 * { 215 @apply border-border outline-ring/50; 216 } 217 body { 218 @apply bg-background text-foreground; 219 letter-spacing: var(--tracking-normal); 220 } 221 }