| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| |
| |
| |
|
|
| :root { |
| |
| color-scheme: dark; |
| --bg: 10 13 20; |
| --surface: 17 24 39; |
| --surface-alt: 26 32 53; |
| --line: 31 41 55; |
| --ink: 226 232 240; |
| --ink-dim: 100 116 139; |
| --ink-mute: 71 85 105; |
| --cyber: 0 212 255; |
| --cyber-dim: 0 153 187; |
| --danger: 255 61 90; |
| --danger-dim: 170 41 64; |
| --warn: 245 158 11; |
| --warn-dim: 168 107 0; |
| --grid-lines: 255 255 255 / 0.025; |
| --hero-glow-cyber: 0 212 255 / 0.10; |
| --hero-glow-danger: 255 61 90 / 0.06; |
| } |
|
|
| .theme-light { |
| color-scheme: light; |
| --bg: 248 250 252; |
| --surface: 255 255 255; |
| --surface-alt: 241 245 249; |
| --line: 226 232 240; |
| --ink: 15 23 42; |
| --ink-dim: 71 85 105; |
| --ink-mute: 148 163 184; |
| --cyber: 6 144 191; |
| --cyber-dim: 14 116 144; |
| --danger: 220 38 56; |
| --danger-dim: 159 18 41; |
| --warn: 217 119 6; |
| --warn-dim: 146 64 14; |
| --grid-lines: 0 0 0 / 0.04; |
| --hero-glow-cyber: 6 144 191 / 0.08; |
| --hero-glow-danger: 220 38 56 / 0.05; |
| } |
|
|
| html, body, #root { |
| height: 100%; |
| } |
|
|
| body { |
| @apply bg-bg text-ink font-sans antialiased; |
| background-image: |
| radial-gradient(circle at 25% -10%, rgb(var(--hero-glow-cyber)), transparent 45%), |
| radial-gradient(circle at 80% 110%, rgb(var(--hero-glow-danger)), transparent 45%); |
| background-attachment: fixed; |
| } |
|
|
| ::selection { |
| background: rgb(var(--cyber) / 0.25); |
| color: rgb(var(--ink)); |
| } |
|
|
| |
| ::-webkit-scrollbar { width: 10px; height: 10px; } |
| ::-webkit-scrollbar-track { background: rgb(var(--bg)); } |
| ::-webkit-scrollbar-thumb { background: rgb(var(--line)); border-radius: 4px; } |
| ::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink-mute)); } |
|
|
| @layer components { |
| .panel { |
| @apply rounded-xl border border-line bg-surface/85 backdrop-blur-sm shadow-ridge transition-colors; |
| } |
| .panel-alt { |
| @apply rounded-xl border border-line bg-surface-alt/75 backdrop-blur-sm shadow-ridge transition-colors; |
| } |
| .panel-hover { |
| @apply hover:border-cyber/40 hover:bg-surface/95; |
| } |
| .pill { |
| @apply inline-flex items-center gap-1 rounded-full border border-line bg-surface-alt/60 px-2.5 py-0.5 text-xs font-mono text-ink-dim; |
| } |
| .pill-cyber { |
| @apply pill border-cyber/40 bg-cyber/10 text-cyber; |
| } |
| .pill-danger { |
| @apply pill border-danger/40 bg-danger/10 text-danger; |
| } |
| .pill-warn { |
| @apply pill border-warn/40 bg-warn/10 text-warn; |
| } |
| .heading { |
| @apply font-display tracking-tight text-ink; |
| } |
| .mono { |
| @apply font-mono; |
| } |
| .grid-bg { |
| background-image: |
| linear-gradient(rgb(var(--grid-lines)) 1px, transparent 1px), |
| linear-gradient(90deg, rgb(var(--grid-lines)) 1px, transparent 1px); |
| background-size: 32px 32px; |
| } |
| .btn { |
| @apply inline-flex items-center justify-center gap-2 rounded-lg border border-line bg-surface-alt px-4 py-2 text-sm font-medium text-ink transition-all duration-150 hover:border-cyber/60 hover:text-cyber active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50; |
| } |
| .btn-primary { |
| @apply btn border-cyber/60 bg-cyber/10 text-cyber hover:shadow-cyber hover:bg-cyber/15; |
| } |
| .btn-danger { |
| @apply btn border-danger/60 bg-danger/10 text-danger hover:shadow-danger hover:text-danger hover:bg-danger/15; |
| } |
| .input { |
| @apply w-full rounded-lg border border-line bg-surface-alt px-3 py-2 text-sm text-ink placeholder:text-ink-dim focus:border-cyber/60 focus:outline-none focus:ring-1 focus:ring-cyber/30 transition; |
| } |
| .label { |
| @apply text-xs font-mono uppercase tracking-wider text-ink-dim; |
| } |
| .divider { |
| @apply h-px bg-line; |
| } |
| .glow-on-hover { |
| @apply transition-shadow hover:shadow-cyber; |
| } |
| } |
|
|
| @layer utilities { |
| .text-balance { text-wrap: balance; } |
| } |
|
|
