feat: create Tailwind CSS with theme variables and base styles

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
new file mode 100644 (file)
index 0000000..87d7afa
--- /dev/null
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -0,0 +1,159 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Dark theme (default) - CSS custom properties */
+:root {
+  --bg: #060b10;
+  --bg2: #0c1520;
+  --surface: #101e2d;
+  --border: #182840;
+  --accent: #a855f7;
+  --accent2: #00ff88;
+  --accent-glow: rgba(168, 85, 247, 0.12);
+  --text: #c4d6e8;
+  --text-dim: #7a9bb8;
+  --muted: #304860;
+}
+
+/* Light theme overrides */
+html.theme-light {
+  --bg: #ffffff;
+  --bg2: #f8f9fa;
+  --surface: #f0f3f7;
+  --border: #d9dfe8;
+  --accent: #9333ea;
+  --accent2: #10b981;
+  --accent-glow: rgba(147, 51, 234, 0.1);
+  --text: #1f2937;
+  --text-dim: #6b7280;
+  --muted: #d1d5db;
+}
+
+@layer base {
+  body {
+    @apply bg-bg text-text font-body;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold;
+    font-family: 'Oxanium', monospace;
+  }
+
+  h1 {
+    @apply text-3xl md:text-4xl;
+  }
+
+  h2 {
+    @apply text-2xl md:text-3xl;
+  }
+
+  h3 {
+    @apply text-xl md:text-2xl;
+  }
+
+  a {
+    @apply text-accent hover:opacity-80 transition-opacity;
+  }
+
+  code {
+    @apply font-mono bg-surface border border-border px-1.5 py-0.5 rounded text-accent2;
+  }
+
+  pre {
+    @apply bg-surface/80 p-4 rounded border border-border overflow-x-auto;
+  }
+
+  pre code {
+    @apply bg-transparent border-0 p-0 text-text;
+  }
+
+  *:focus {
+    @apply ring-2 ring-accent ring-offset-2;
+    ring-offset-color: var(--bg);
+  }
+
+  html.theme-light *:focus {
+    ring-offset-color: var(--bg);
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    @apply transition-colors duration-200;
+  }
+}
+
+@layer components {
+  .container {
+    @apply max-w-4xl mx-auto;
+  }
+
+  /* Background utilities */
+  .bg-bg {
+    background-color: var(--bg);
+  }
+
+  .bg-bg2 {
+    background-color: var(--bg2);
+  }
+
+  .bg-surface {
+    background-color: var(--surface);
+  }
+
+  /* Border utilities */
+  .border-border {
+    border-color: var(--border);
+  }
+
+  /* Text color utilities */
+  .text-accent {
+    color: var(--accent);
+  }
+
+  .text-accent2 {
+    color: var(--accent2);
+  }
+
+  .text-text {
+    color: var(--text);
+  }
+
+  .text-text-dim {
+    color: var(--text-dim);
+  }
+
+  /* Additional semantic utilities */
+  .text-muted {
+    color: var(--muted);
+  }
+
+  .bg-muted {
+    background-color: var(--muted);
+  }
+
+  /* Glow effect utility */
+  .glow-accent {
+    box-shadow: 0 0 20px var(--accent-glow);
+  }
+}
+
+/* Responsive utilities */
+@media (max-width: 768px) {
+  .sm\:container {
+    @apply max-w-full px-4;
+  }
+}
+
+@media (min-width: 769px) {
+  .md\:container {
+    @apply max-w-4xl;
+  }
+}