| 1 | @import "tailwindcss"; |
| 2 | |
| 3 | |
| 4 | |
| 5 | @theme { |
| 6 | --color-bg-base: oklch(0.16 0.012 264); |
| 7 | --color-bg-elevated: oklch(0.20 0.014 264); |
| 8 | --color-bg-overlay: oklch(0.23 0.014 264); |
| 9 | --color-bg-inset: oklch(0.14 0.012 264); |
| 10 | |
| 11 | --color-fg-primary: oklch(0.96 0.005 264); |
| 12 | --color-fg-secondary: oklch(0.78 0.008 264); |
| 13 | --color-fg-tertiary: oklch(0.60 0.010 264); |
| 14 | --color-fg-disabled: oklch(0.42 0.008 264); |
| 15 | |
| 16 | --color-border-subtle: oklch(0.28 0.014 264 / 0.6); |
| 17 | --color-border-default: oklch(0.34 0.014 264); |
| 18 | --color-border-strong: oklch(0.46 0.014 264); |
| 19 | |
| 20 | --color-accent-teal: oklch(0.78 0.16 184); |
| 21 | --color-accent-teal-hover: oklch(0.72 0.18 184); |
| 22 | --color-accent-teal-soft: oklch(0.78 0.16 184 / 0.12); |
| 23 | --color-accent-amber: oklch(0.82 0.16 75); |
| 24 | --color-accent-red: oklch(0.66 0.22 25); |
| 25 | --color-accent-violet: oklch(0.70 0.18 300); |
| 26 | --color-accent-green: oklch(0.74 0.18 145); |
| 27 | --color-accent-blue: oklch(0.70 0.16 240); |
| 28 | |
| 29 | --color-status-announced: var(--color-accent-blue); |
| 30 | --color-status-presale: var(--color-accent-violet); |
| 31 | --color-status-onsale: var(--color-accent-green); |
| 32 | --color-status-soldout: var(--color-accent-red); |
| 33 | --color-status-cancelled: var(--color-fg-tertiary); |
| 34 | |
| 35 | --font-sans: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif; |
| 36 | --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, "SF Mono", monospace; |
| 37 | |
| 38 | --text-xs: 0.64rem; --text-xs--line-height: 1rem; |
| 39 | --text-sm: 0.80rem; --text-sm--line-height: 1.25rem; |
| 40 | --text-base: 1.00rem; --text-base--line-height: 1.5rem; |
| 41 | --text-lg: 1.25rem; --text-lg--line-height: 1.75rem; |
| 42 | --text-xl: 1.56rem; --text-xl--line-height: 2rem; |
| 43 | --text-2xl: 1.95rem; --text-2xl--line-height: 2.25rem; |
| 44 | --text-3xl: 2.44rem; --text-3xl--line-height: 2.75rem; |
| 45 | --text-4xl: 3.05rem; --text-4xl--line-height: 3.25rem; |
| 46 | |
| 47 | --tracking-tight: -0.02em; |
| 48 | --tracking-display: -0.04em; |
| 49 | |
| 50 | --spacing: 0.25rem; |
| 51 | |
| 52 | --radius-sm: 0.375rem; |
| 53 | --radius: 0.5rem; |
| 54 | --radius-md: 0.625rem; |
| 55 | --radius-lg: 0.875rem; |
| 56 | --radius-xl: 1.25rem; |
| 57 | |
| 58 | --shadow-card: 0 1px 2px 0 oklch(0 0 0 / 0.06), 0 1px 3px 0 oklch(0 0 0 / 0.10); |
| 59 | --shadow-pop: 0 8px 24px -8px oklch(0 0 0 / 0.40); |
| 60 | --shadow-glow-teal: 0 0 0 1px var(--color-accent-teal-soft), 0 0 24px -4px var(--color-accent-teal-soft); |
| 61 | |
| 62 | --motion-spring-snappy: cubic-bezier(0.22, 1, 0.36, 1); |
| 63 | --motion-spring-natural: cubic-bezier(0.16, 1, 0.3, 1); |
| 64 | --motion-spring-entrance: cubic-bezier(0.34, 1.56, 0.64, 1); |
| 65 | |
| 66 | --duration-instant: 80ms; |
| 67 | --duration-fast: 150ms; |
| 68 | --duration-base: 240ms; |
| 69 | --duration-slow: 400ms; |
| 70 | --duration-cinematic: 800ms; |
| 71 | |
| 72 | --z-base: 0; |
| 73 | --z-sticky: 10; |
| 74 | --z-dropdown: 1000; |
| 75 | --z-sheet: 2000; |
| 76 | --z-modal: 3000; |
| 77 | --z-toast: 4000; |
| 78 | --z-tooltip: 5000; |
| 79 | } |
| 80 | |
| 81 | @layer base { |
| 82 | html { color-scheme: dark; } |
| 83 | |
| 84 | body { |
| 85 | background-color: var(--color-bg-base); |
| 86 | color: var(--color-fg-primary); |
| 87 | font-family: var(--font-sans); |
| 88 | font-feature-settings: "cv11", "ss01", "ss03"; |
| 89 | -webkit-font-smoothing: antialiased; |
| 90 | text-rendering: optimizeLegibility; |
| 91 | min-height: 100dvh; |
| 92 | } |
| 93 | |
| 94 | |
| 95 | body::before { |
| 96 | content: ""; |
| 97 | position: fixed; |
| 98 | inset: 0; |
| 99 | z-index: -2; |
| 100 | pointer-events: none; |
| 101 | background: |
| 102 | radial-gradient(60rem 40rem at 88% -8%, oklch(0.78 0.16 184 / 0.10), transparent 60%), |
| 103 | radial-gradient(48rem 36rem at 6% 4%, oklch(0.70 0.18 300 / 0.07), transparent 55%), |
| 104 | radial-gradient(70rem 70rem at 50% 120%, oklch(0.70 0.16 240 / 0.05), transparent 60%); |
| 105 | } |
| 106 | body::after { |
| 107 | content: ""; |
| 108 | position: fixed; |
| 109 | inset: 0; |
| 110 | z-index: -1; |
| 111 | pointer-events: none; |
| 112 | opacity: 0.025; |
| 113 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); |
| 114 | } |
| 115 | |
| 116 | .tabular { font-variant-numeric: tabular-nums; } |
| 117 | |
| 118 | ::selection { background-color: var(--color-accent-teal-soft); } |
| 119 | |
| 120 | :focus-visible { |
| 121 | outline: 2px solid var(--color-accent-teal); |
| 122 | outline-offset: 2px; |
| 123 | border-radius: var(--radius-sm); |
| 124 | } |
| 125 | |
| 126 | ::-webkit-scrollbar { width: 10px; height: 10px; } |
| 127 | ::-webkit-scrollbar-track { background: transparent; } |
| 128 | ::-webkit-scrollbar-thumb { |
| 129 | background: var(--color-border-default); |
| 130 | border-radius: 999px; |
| 131 | border: 2px solid var(--color-bg-base); |
| 132 | } |
| 133 | ::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); } |
| 134 | |
| 135 | @media (prefers-reduced-motion: reduce) { |
| 136 | *, *::before, *::after { |
| 137 | animation-duration: 0.01ms !important; |
| 138 | animation-iteration-count: 1 !important; |
| 139 | transition-duration: 0.01ms !important; |
| 140 | scroll-behavior: auto !important; |
| 141 | } |
| 142 | } |
| 143 | } |
| 144 | |
| 145 | @layer utilities { |
| 146 | .glass { |
| 147 | background: color-mix(in oklch, var(--color-bg-elevated) 72%, transparent); |
| 148 | backdrop-filter: blur(14px) saturate(1.4); |
| 149 | -webkit-backdrop-filter: blur(14px) saturate(1.4); |
| 150 | } |
| 151 | |
| 152 | .ring-frame { |
| 153 | position: relative; |
| 154 | } |
| 155 | .ring-frame::before { |
| 156 | content: ""; |
| 157 | position: absolute; |
| 158 | inset: 0; |
| 159 | border-radius: inherit; |
| 160 | padding: 1px; |
| 161 | background: linear-gradient(140deg, |
| 162 | oklch(0.78 0.16 184 / 0.35), |
| 163 | transparent 40%, |
| 164 | transparent 70%, |
| 165 | oklch(0.70 0.18 300 / 0.22)); |
| 166 | -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); |
| 167 | -webkit-mask-composite: xor; |
| 168 | mask-composite: exclude; |
| 169 | pointer-events: none; |
| 170 | } |
| 171 | |
| 172 | .animate-shimmer { |
| 173 | background: linear-gradient(90deg, |
| 174 | transparent 0%, |
| 175 | var(--color-accent-teal-soft) 50%, |
| 176 | transparent 100%); |
| 177 | background-size: 200% 100%; |
| 178 | animation: shimmer 1.2s ease-out; |
| 179 | } |
| 180 | @keyframes shimmer { |
| 181 | 0% { background-position: 200% 0; } |
| 182 | 100% { background-position: -200% 0; } |
| 183 | } |
| 184 | |
| 185 | .skeleton { |
| 186 | background: linear-gradient(90deg, |
| 187 | var(--color-bg-elevated) 0%, |
| 188 | var(--color-bg-overlay) 50%, |
| 189 | var(--color-bg-elevated) 100%); |
| 190 | background-size: 200% 100%; |
| 191 | animation: skeleton 1.6s ease-in-out infinite; |
| 192 | } |
| 193 | @keyframes skeleton { |
| 194 | 0% { background-position: 200% 0; } |
| 195 | 100% { background-position: -200% 0; } |
| 196 | } |
| 197 | |
| 198 | .pulse-ring { position: relative; } |
| 199 | .pulse-ring::after { |
| 200 | content: ""; |
| 201 | position: absolute; |
| 202 | inset: 0; |
| 203 | border-radius: inherit; |
| 204 | box-shadow: 0 0 0 0 var(--color-accent-green); |
| 205 | animation: pulse-ring 2s var(--motion-spring-natural) infinite; |
| 206 | } |
| 207 | @keyframes pulse-ring { |
| 208 | 0% { box-shadow: 0 0 0 0 oklch(0.74 0.18 145 / 0.6); } |
| 209 | 100% { box-shadow: 0 0 0 12px oklch(0.74 0.18 145 / 0); } |
| 210 | } |
| 211 | } |