CineK Project Guidelines (Nuxt 4 + Tailwind v4 + Drizzle)

This file contains commands, architecture guidelines, and design principles for the CineK project.

1. Quick Command Reference

Vue & TypeScript: Strictly use <script setup lang="ts">. Avoid Option API or untyped JavaScript.
Auto-imports: Do not manually import core Vue/Nuxt hooks (ref, computed, useFetch, useRoute, etc.). Nuxt handles this.
Routing & Pages: Place routing views inside app/pages/.
Database queries: Use Drizzle ORM schemas from server/database/schema.ts.
Icons: Always use the custom <AppIcon name="icon-name" /> component instead of custom raw SVG tags.

To prevent generic "AI slop" design (such as standard Inter fonts, generic purple gradients, and basic card grids), always follow these rules:

<always_use_cinek_theme>

Aesthetic Direction: CineK is a premium movie streaming platform. Giga-modern dark background #0E111A with rich gradient cards and glowing accents, or clean slate-blue light mode (.admin-light on #f8fafc).
Brand Palette:
- Main Accent (CineK Yellow): #eab308 (CineK 500), #facc15 (CineK 400).
- Backgrounds: Dark Mode #0E111A, Light Mode (Admin) #f8fafc, Admin sidebar #095DF2.
Typography Pairing: Main typeface is "Be Vietnam Pro". Use bold, intentional tracking and weights rather than default browser weights.
Visual Depth: Use smooth, transparent overlays (bg-white/5 with backdrop-blur-md) and subtle linear borders (border-white/[0.07]) to create card depth.
Animations: Prefer page-load sequences and subtle hover micro-interactions. Respect prefers-reduced-motion. </always_use_cinek_theme>

For detailed instructions and utility classes, always read and follow: