Initial commit with translated description

colors.md

@@ -0,0 +1,53 @@
+# Color & Theme — Frontend
+
+## CSS Variables Setup
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --accent: 210 40% 96%;
+  --destructive: 0 84% 60%;
+  --border: 214.3 31.8% 91.4%;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+}
+```
+
+## Color Rules
+
+1. **70-20-10**: Primary 70%, secondary 20%, accent 10%
+2. **Commit to light OR dark** — no muddy mid-grays
+3. **High contrast CTAs** — buttons must pop
+4. **Semantic colors**: red=destructive, green=success, yellow=warning
+
+## Backgrounds
+
+**AVOID**: Solid white (#fff) or plain gray
+
+**USE**:
+- Subtle gradients: `bg-gradient-to-br from-slate-50 to-slate-100`
+- Noise/grain texture overlay
+- Glassmorphism with backdrop-blur
+
+```css
+/* Grain overlay */
+.grain::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: url("data:image/svg+xml,...");
+  opacity: 0.03;
+  pointer-events: none;
+}
+```
+
+## Dark Theme
+
+Always define both themes. Use CSS variables so switching is automatic.