create-ng-tailwind 2.0.2 → 3.0.0

package/lib/templates/starter/features.js

@@ -2,8 +2,7 @@ const fs = require('fs-extra');
 const path = require('path');
 
 async function createContactComponent(config) {
-  const contactComponentTs = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+  const contactComponentTs = `import { Component, OnInit, inject } from '@angular/core';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -16,11 +15,12 @@ import {
   heroPaperAirplane,
 } from '@ng-icons/heroicons/outline';
 import { ButtonComponent } from '@shared/components/button/button.component';
+import { SeoService } from '@core/services/seo.service';
 
 @Component({
   selector: 'app-contact',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, NgIconComponent, ButtonComponent, TranslateModule],
+  imports: [ReactiveFormsModule, NgIconComponent, ButtonComponent, TranslateModule],
   viewProviders: [provideIcons({
     heroEnvelope,
     heroMapPin,
@@ -30,12 +30,23 @@ import { ButtonComponent } from '@shared/components/button/button.component';
   })],
   templateUrl: './contact.component.html'
 })
-export class ContactComponent {
+export class ContactComponent implements OnInit {
   private fb = inject(FormBuilder);
+  private seo = inject(SeoService);
 
   isSubmitting = false;
   submitted = false;
 
+  ngOnInit(): void {
+    // Set SEO meta tags for Contact page
+    this.seo.updateMeta({
+      title: 'Contact Us',
+      description: 'Get in touch with us. We would love to hear from you and answer any questions you may have.',
+      keywords: 'contact, support, get in touch, email',
+      ogType: 'website'
+    });
+  }
+
   contactForm = this.fb.group({
     name: ['', [Validators.required, Validators.minLength(2)]],
     email: ['', [Validators.required, Validators.email]],
@@ -68,11 +79,11 @@ export class ContactComponent {
 }`;
 
   const contactComponentHtml = `<!-- Hero Section -->
-<section class="relative py-20 bg-linear-to-br from-blue-600 via-cyan-600 to-teal-600 overflow-hidden">
+<section class="relative py-20 bg-linear-to-br from-primary-600 via-secondary-600 to-accent-600 overflow-hidden">
   <div class="absolute inset-0 opacity-10">
     <div class="absolute top-0 -left-4 w-96 h-96 bg-white rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
-    <div class="absolute top-0 -right-4 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
-    <div class="absolute bottom-0 left-1/2 w-96 h-96 bg-green-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
+    <div class="absolute top-0 -right-4 w-96 h-96 bg-warning-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
+    <div class="absolute bottom-0 left-1/2 w-96 h-96 bg-success-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
   </div>
 
   <div class="relative container mx-auto px-4 text-center">
@@ -83,7 +94,7 @@ export class ContactComponent {
       <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 drop-shadow-lg">
         {{ 'contact.title' | translate }}
       </h1>
-      <p class="text-xl md:text-2xl text-cyan-50 max-w-3xl mx-auto leading-relaxed">
+      <p class="text-xl md:text-2xl text-secondary-50 max-w-3xl mx-auto leading-relaxed">
         {{ 'contact.subtitle' | translate }}
       </p>
     </div>
@@ -91,14 +102,14 @@ export class ContactComponent {
 </section>
 
 <!-- Main Content -->
-<div class="bg-linear-to-br from-gray-50 to-blue-50 py-16 -mt-8">
+<div class="bg-linear-to-br from-gray-50 to-primary-50 py-16 -mt-8">
   <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
 
       <!-- Contact Form Card -->
       <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100 hover:shadow-2xl transition-shadow animate-fade-in">
         <div class="mb-6">
-          <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-linear-to-br from-blue-500 to-cyan-500 mb-4">
+          <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-linear-to-br from-primary-500 to-secondary-500 mb-4">
             <ng-icon name="heroPaperAirplane" size="24" style="color: white;"></ng-icon>
           </div>
           <h2 class="text-2xl font-bold text-gray-900">{{ 'contact.form.title' | translate }}</h2>
@@ -115,12 +126,13 @@ export class ContactComponent {
               id="name"
               type="text"
               formControlName="name"
+              autocomplete="name"
               placeholder="John Doe"
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
-              [class.border-red-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched"
-              [class.focus:ring-red-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched">
+              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
+              [class.border-danger-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched"
+              [class.focus:ring-danger-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched">
             @if (contactForm.get('name')?.invalid && contactForm.get('name')?.touched) {
-              <div class="mt-2 text-sm text-red-600 flex items-center gap-1">
+              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
                 <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                 </svg>
@@ -143,12 +155,13 @@ export class ContactComponent {
               id="email"
               type="email"
               formControlName="email"
+              autocomplete="email"
               placeholder="john@example.com"
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
-              [class.border-red-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched"
-              [class.focus:ring-red-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched">
+              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
+              [class.border-danger-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched"
+              [class.focus:ring-danger-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched">
             @if (contactForm.get('email')?.invalid && contactForm.get('email')?.touched) {
-              <div class="mt-2 text-sm text-red-600 flex items-center gap-1">
+              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
                 <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                 </svg>
@@ -172,11 +185,11 @@ export class ContactComponent {
               type="text"
               formControlName="subject"
               placeholder="How can we help?"
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
-              [class.border-red-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched"
-              [class.focus:ring-red-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched">
+              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
+              [class.border-danger-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched"
+              [class.focus:ring-danger-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched">
             @if (contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched) {
-              <div class="mt-2 text-sm text-red-600 flex items-center gap-1">
+              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
                 <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                 </svg>
@@ -195,12 +208,11 @@ export class ContactComponent {
               formControlName="message"
               rows="5"
               placeholder="Tell us more about your inquiry..."
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-vertical"
-              [class.border-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"
-              [class.focus:ring-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched">
-            </textarea>
+              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all resize-vertical"
+              [class.border-danger-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"
+              [class.focus:ring-danger-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"></textarea>
             @if (contactForm.get('message')?.invalid && contactForm.get('message')?.touched) {
-              <div class="mt-2 text-sm text-red-600 flex items-center gap-1">
+              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
                 <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                 </svg>
@@ -216,10 +228,10 @@ export class ContactComponent {
 
           <!-- Success Message -->
           @if (submitted && !contactForm.invalid) {
-            <div class="p-4 bg-linear-to-r from-green-50 to-emerald-50 border-2 border-green-300 rounded-xl animate-fade-in">
+            <div class="p-4 bg-linear-to-r from-success-50 to-success-100 border-2 border-success-300 rounded-xl animate-fade-in">
               <div class="flex items-center gap-2">
-                <ng-icon name="heroCheckCircle" size="20" style="color: #059669;"></ng-icon>
-                <p class="text-green-700 font-medium">
+                <ng-icon name="heroCheckCircle" size="20" style="color: var(--color-success-600);"></ng-icon>
+                <p class="text-success-700 font-medium">
                   {{ 'contact.form.success' | translate }}
                 </p>
               </div>
@@ -245,13 +257,13 @@ export class ContactComponent {
       <!-- Contact Info & Resources -->
       <div class="space-y-6 animate-fade-in animation-delay-200">
         <!-- Contact Information Card -->
-        <div class="bg-linear-to-br from-blue-600 to-cyan-600 rounded-2xl shadow-xl p-8 text-white">
+        <div class="bg-linear-to-br from-primary-600 to-secondary-600 rounded-2xl shadow-xl p-8 text-white">
           <div class="mb-6">
             <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm mb-4">
               <ng-icon name="heroMapPin" size="24" style="color: white;"></ng-icon>
             </div>
             <h2 class="text-2xl font-bold">{{ 'contact.info.title' | translate }}</h2>
-            <p class="text-cyan-100 mt-1">{{ 'contact.info.description' | translate }}</p>
+            <p class="text-primary-100 mt-1">{{ 'contact.info.description' | translate }}</p>
           </div>
 
           <div class="space-y-6">
@@ -263,8 +275,8 @@ export class ContactComponent {
               </div>
               <div>
                 <h3 class="text-lg font-semibold mb-1">{{ 'contact.info.email.label' | translate }}</h3>
-                <p class="text-cyan-100">hello&#64;example.com</p>
-                <p class="text-sm text-cyan-200 mt-1">{{ 'contact.info.email.description' | translate }}</p>
+                <p class="text-primary-100">hello&#64;example.com</p>
+                <p class="text-sm text-primary-200 mt-1">{{ 'contact.info.email.description' | translate }}</p>
               </div>
             </div>
 
@@ -276,8 +288,8 @@ export class ContactComponent {
               </div>
               <div>
                 <h3 class="text-lg font-semibold mb-1">{{ 'contact.info.location.label' | translate }}</h3>
-                <p class="text-cyan-100">{{ 'contact.info.location.value' | translate }}</p>
-                <p class="text-sm text-cyan-200 mt-1">{{ 'contact.info.location.description' | translate }}</p>
+                <p class="text-primary-100">{{ 'contact.info.location.value' | translate }}</p>
+                <p class="text-sm text-primary-200 mt-1">{{ 'contact.info.location.description' | translate }}</p>
               </div>
             </div>
 
@@ -289,8 +301,8 @@ export class ContactComponent {
               </div>
               <div>
                 <h3 class="text-lg font-semibold mb-1">{{ 'contact.info.responseTime.label' | translate }}</h3>
-                <p class="text-cyan-100">{{ 'contact.info.responseTime.value' | translate }}</p>
-                <p class="text-sm text-cyan-200 mt-1">{{ 'contact.info.responseTime.description' | translate }}</p>
+                <p class="text-primary-100">{{ 'contact.info.responseTime.value' | translate }}</p>
+                <p class="text-sm text-primary-200 mt-1">{{ 'contact.info.responseTime.description' | translate }}</p>
               </div>
             </div>
           </div>
@@ -299,7 +311,7 @@ export class ContactComponent {
         <!-- Resources Card -->
         <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
           <div class="mb-6">
-            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-linear-to-br from-purple-500 to-pink-500 mb-4">
+            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-linear-to-br from-accent-500 to-secondary-500 mb-4">
               <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
               </svg>
@@ -310,31 +322,31 @@ export class ContactComponent {
 
           <ul class="space-y-3">
             <li>
-              <a href="https://angular.dev/" target="_blank" class="group flex items-center justify-between p-3 rounded-xl hover:bg-blue-50 transition-colors">
+              <a href="https://angular.dev/" target="_blank" class="group flex items-center justify-between p-3 rounded-xl hover:bg-primary-50 transition-colors">
                 <div class="flex items-center gap-3">
-                  <div class="h-10 w-10 bg-red-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
-                    <svg class="h-5 w-5 text-red-600" fill="currentColor" viewBox="0 0 24 24">
+                  <div class="h-10 w-10 bg-danger-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <svg class="h-5 w-5 text-danger-600" fill="currentColor" viewBox="0 0 24 24">
                       <path d="M12 2L2 6l10 5 10-5-10-4zm0 18.5l-7-3.5v-6l7 3.5 7-3.5v6l-7 3.5z"/>
                     </svg>
                   </div>
-                  <span class="font-medium text-gray-700 group-hover:text-blue-600 transition-colors">{{ 'contact.help.links.angular' | translate }}</span>
+                  <span class="font-medium text-gray-700 group-hover:text-primary-600 transition-colors">{{ 'contact.help.links.angular' | translate }}</span>
                 </div>
-                <svg class="h-5 w-5 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-5 w-5 text-gray-400 group-hover:text-primary-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                 </svg>
               </a>
             </li>
             <li>
-              <a href="https://tailwindcss.com/" target="_blank" class="group flex items-center justify-between p-3 rounded-xl hover:bg-blue-50 transition-colors">
+              <a href="https://tailwindcss.com/" target="_blank" class="group flex items-center justify-between p-3 rounded-xl hover:bg-primary-50 transition-colors">
                 <div class="flex items-center gap-3">
-                  <div class="h-10 w-10 bg-cyan-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
-                    <svg class="h-5 w-5 text-cyan-600" fill="currentColor" viewBox="0 0 24 24">
+                  <div class="h-10 w-10 bg-secondary-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <svg class="h-5 w-5 text-secondary-600" fill="currentColor" viewBox="0 0 24 24">
                       <path d="M12 6c-2.67 0-4.33 1.33-5 4 1-1.33 2.17-1.83 3.5-1.5.76.19 1.31.75 1.91 1.36.98 1 2.09 2.14 4.59 2.14 2.67 0 4.33-1.33 5-4-1 1.33-2.17 1.83-3.5 1.5-.76-.19-1.3-.75-1.91-1.36C15.61 7.14 14.5 6 12 6zM7 12c-2.67 0-4.33 1.33-5 4 1-1.33 2.17-1.83 3.5-1.5.76.19 1.3.75 1.91 1.36C8.39 16.86 9.5 18 12 18c2.67 0 4.33-1.33 5-4-1 1.33-2.17 1.83-3.5 1.5-.76-.19-1.3-.75-1.91-1.36C10.61 13.14 9.5 12 7 12z"/>
                     </svg>
                   </div>
-                  <span class="font-medium text-gray-700 group-hover:text-blue-600 transition-colors">{{ 'contact.help.links.tailwind' | translate }}</span>
+                  <span class="font-medium text-gray-700 group-hover:text-primary-600 transition-colors">{{ 'contact.help.links.tailwind' | translate }}</span>
                 </div>
-                <svg class="h-5 w-5 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-5 w-5 text-gray-400 group-hover:text-primary-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                 </svg>
               </a>
@@ -499,18 +511,19 @@ export const appConfig: ApplicationConfig = {
 }
 
 async function createAppComponent(config) {
-  const app = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+  const app = `import { Component, OnInit, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './layout/header/header.component';
 import { FooterComponent } from './layout/footer/footer.component';
 import { ToastComponent } from '@shared/components/toast/toast.component';
 import { ModalComponent } from '@shared/components/modal/modal.component';
 import { TranslationService } from '@core/i18n/translation.service';
+import { SeoService } from '@core/services/seo.service';
+import { createOrganizationSchema, createWebSiteSchema } from '@core/utils/structured-data';
 
 @Component({
   selector: 'app-root',
-  imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, ToastComponent, ModalComponent],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent, ToastComponent, ModalComponent],
   template: \`
     <div class="min-h-screen flex flex-col bg-white">
       <app-header />
@@ -529,10 +542,39 @@ import { TranslationService } from '@core/i18n/translation.service';
     </div>
   \`
 })
-export class App {
-  // Inject translation service to initialize it (auto-detects and loads language)
+export class App implements OnInit {
+  // Inject services
   private translationService = inject(TranslationService);
+  private seo = inject(SeoService);
+
   title = '${config.projectName}';
+
+  ngOnInit(): void {
+    // Add global Organization structured data
+    const organizationData = createOrganizationSchema({
+      name: '${config.projectName}',
+      url: 'https://example.com', // TODO: Update with your production URL
+      logo: '/assets/images/logo.svg',
+      description: 'A modern Angular application built with best practices',
+      sameAs: [
+        // 'https://twitter.com/yourhandle',
+        // 'https://facebook.com/yourpage',
+        // 'https://linkedin.com/company/yourcompany'
+      ]
+    });
+
+    const websiteData = createWebSiteSchema({
+      name: '${config.projectName}',
+      url: 'https://example.com', // TODO: Update with your production URL
+      description: 'A modern Angular application with Tailwind CSS, SEO optimization, and i18n support'
+    });
+
+    // Add structured data to the page
+    this.seo.addStructuredData({
+      '@context': 'https://schema.org',
+      '@graph': [organizationData, websiteData]
+    });
+  }
 }`;
 
   const appHtml = `<!-- This file is not used in standalone components -->
@@ -544,15 +586,140 @@ export class App {
 }
 
 async function createStyles(config) {
-  // Main styles
+  // Main styles with Tailwind v4 theme system
   const mainStyles = `@import "tailwindcss";
 
-/* Custom CSS variables for theming */
-:root {
-  --color-primary: 59 130 246; /* blue-500 */
-  --color-primary-dark: 37 99 235; /* blue-600 */
+/* ============================================
+   TAILWIND V4 THEME CONFIGURATION
+   ============================================
+
+   This section defines the theme colors for your application.
+   Tailwind v4 uses the @theme directive to create custom color scales
+   that automatically generate utility classes (bg-*, text-*, border-*, etc.)
+
+   To customize your theme:
+   1. Change the color values below to match your brand
+   2. All components will automatically use the new colors
+   3. Color format: Use hex colors (e.g., #3b82f6) or rgb (e.g., rgb(59 130 246))
+
+   Example: Change primary-500 from #3b82f6 to #8b5cf6 for purple theme
+*/
+
+@theme {
+  /* PRIMARY COLOR SCALE - Main brand color */
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;  /* Main primary color - CHANGE THIS for your brand */
+  --color-primary-600: #2563eb;  /* Primary hover state */
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  --color-primary-950: #172554;
+
+  /* SECONDARY COLOR SCALE - Secondary brand color */
+  --color-secondary-50: #ecfeff;
+  --color-secondary-100: #cffafe;
+  --color-secondary-200: #a5f3fc;
+  --color-secondary-300: #67e8f9;
+  --color-secondary-400: #22d3ee;
+  --color-secondary-500: #06b6d4;  /* Main secondary color - CHANGE THIS for your brand */
+  --color-secondary-600: #0891b2;  /* Secondary hover state */
+  --color-secondary-700: #0e7490;
+  --color-secondary-800: #155e75;
+  --color-secondary-900: #164e63;
+  --color-secondary-950: #083344;
+
+  /* ACCENT COLOR SCALE - Accent/highlight color */
+  --color-accent-50: #faf5ff;
+  --color-accent-100: #f3e8ff;
+  --color-accent-200: #e9d5ff;
+  --color-accent-300: #d8b4fe;
+  --color-accent-400: #c084fc;
+  --color-accent-500: #a855f7;  /* Main accent color */
+  --color-accent-600: #9333ea;  /* Accent hover state */
+  --color-accent-700: #7e22ce;
+  --color-accent-800: #6b21a8;
+  --color-accent-900: #581c87;
+  --color-accent-950: #3b0764;
+
+  /* SUCCESS COLOR SCALE - For success states */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #22c55e;  /* Main success color */
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+  --color-success-800: #166534;
+  --color-success-900: #14532d;
+  --color-success-950: #052e16;
+
+  /* DANGER COLOR SCALE - For error/danger states */
+  --color-danger-50: #fef2f2;
+  --color-danger-100: #fee2e2;
+  --color-danger-200: #fecaca;
+  --color-danger-300: #fca5a5;
+  --color-danger-400: #f87171;
+  --color-danger-500: #ef4444;  /* Main danger color */
+  --color-danger-600: #dc2626;
+  --color-danger-700: #b91c1c;
+  --color-danger-800: #991b1b;
+  --color-danger-900: #7f1d1d;
+  --color-danger-950: #450a0a;
+
+  /* WARNING COLOR SCALE - For warning states */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;  /* Main warning color */
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+  --color-warning-950: #451a03;
+
+  /* INFO COLOR SCALE - For informational states */
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-200: #bfdbfe;
+  --color-info-300: #93c5fd;
+  --color-info-400: #60a5fa;
+  --color-info-500: #3b82f6;  /* Main info color */
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
+  --color-info-800: #1e40af;
+  --color-info-900: #1e3a8a;
+  --color-info-950: #172554;
 }
 
+/* ============================================
+   USAGE EXAMPLES
+   ============================================
+
+   After defining colors in @theme, you can use them in your templates:
+
+   - bg-primary-500        (primary background)
+   - text-primary-600      (primary text)
+   - border-primary-500    (primary border)
+   - hover:bg-primary-600  (primary hover)
+   - focus:ring-primary-500 (primary focus ring)
+
+   - bg-secondary-500      (secondary background)
+   - bg-accent-500         (accent background)
+   - bg-success-500        (success background)
+   - bg-danger-500         (danger background)
+   - bg-warning-500        (warning background)
+   - bg-info-500           (info background)
+
+   All Tailwind utilities work: bg-*, text-*, border-*, ring-*, etc.
+*/
+
 /* RTL Support */
 html[dir="rtl"] {
   direction: rtl;
@@ -615,9 +782,9 @@ html[dir="rtl"] .text-right {
   @apply bg-gray-400;
 }
 
-/* Focus styles for accessibility */
+/* Focus styles for accessibility - now using theme colors */
 .focus-visible {
-  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
 }
 
 /* Animation classes */