feat: first commit

2026-08-18 23:18:47 +07:00 · 2026-06-15 21:25:57 +07:00
commit 3395ab6dd3
88 changed files with 10034 additions and 0 deletions
@@ -0,0 +1,133 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Light theme — warm paper + ink */
+  --bg: #f4f2ea;
+  --bg-grain: #ece9dd;
+  --surface: #fffdf7;
+  --surface-2: #f6f3e9;
+  --ink: #16170f;
+  --ink-solid: #16170f;
+  --muted: #6b6c5e;
+  --line: #e2decf;
+  --ring: #16170f;
+  --accent: #c6f24e;
+  --accent-ink: #16170f;
+  --glow: rgba(198, 242, 78, 0.45);
+  --dot: rgba(22, 23, 15, 0.06);
+}
+
+.dark {
+  /* Dark theme — deep moss + lime */
+  --bg: #0e100a;
+  --bg-grain: #14160e;
+  --surface: #181b11;
+  --surface-2: #1f2317;
+  --ink: #f1efe3;
+  --ink-solid: #000000;
+  --muted: #9b9d8a;
+  --line: #2c3020;
+  --ring: #3a3f2a;
+  --accent: #c6f24e;
+  --accent-ink: #16170f;
+  --glow: rgba(198, 242, 78, 0.22);
+  --dot: rgba(241, 239, 227, 0.05);
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background-color: var(--bg);
+  color: var(--ink);
+  font-family: "General Sans", ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  min-height: 100vh;
+  transition: background-color 0.5s ease, color 0.4s ease;
+}
+
+/* Atmospheric layered background: dotted grid + soft lime glows */
+.app-bg::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
+  background-size: 26px 26px;
+  background-position: -13px -13px;
+  pointer-events: none;
+}
+
+.app-bg::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -3;
+  background:
+    radial-gradient(60% 50% at 12% 8%, var(--glow), transparent 60%),
+    radial-gradient(50% 40% at 92% 22%, var(--glow), transparent 60%),
+    radial-gradient(70% 60% at 78% 96%, var(--glow), transparent 65%);
+  filter: blur(8px);
+  opacity: 0.9;
+  pointer-events: none;
+  transition: opacity 0.5s ease;
+}
+
+/* Use CSS vars through Tailwind-friendly utility classes */
+.bg-surface { background-color: var(--surface); }
+.bg-surface-2 { background-color: var(--surface-2); }
+.text-ink { color: var(--ink); }
+.text-muted { color: var(--muted); }
+.border-line { border-color: var(--line); }
+.bg-accent { background-color: var(--accent); }
+.text-accent { color: var(--accent); }
+.text-accent-ink { color: var(--accent-ink); }
+.ring-ink { --tw-ring-color: var(--ring); }
+
+.card {
+  background-color: var(--surface);
+  border: 1.5px solid var(--line);
+  border-radius: 1.5rem;
+}
+
+/* Selection */
+::selection {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar { width: 11px; height: 11px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 99px;
+  border: 3px solid var(--bg);
+}
+::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+
+/* Focus ring */
+.focusable:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--accent);
+}
+
+/* Grain overlay for texture */
+.grain::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.035;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}