Replace "FastNext" branding with "PragmaStack" across the project

- Updated all references, metadata, and templates to reflect the new branding, including layout files, components, and documentation.
- Replaced hardcoded color tokens like `green-600` with semantic tokens (`success`, `warning`, etc.) for improved design consistency.
- Enhanced `globals.css` with new color tokens for success, warning, and destructive states using the OKLCH color model.
- Added comprehensive branding guidelines and updated the design system documentation to align with the new identity.
- Updated tests and mocks to reflect the branding changes and ensured all visual/verbal references match "PragmaStack".
- Added new `branding/README.md` and `branding` docs for mission, values, and visual identity definition.

frontend/src/components/dev/DevLayout.tsx

@@ -95,7 +95,7 @@ export function DevLayout({ children }: DevLayoutProps) {
             {/* Left: Logo + Badge */}
             <div className="flex items-center gap-3 shrink-0">
               <Code2 className="h-5 w-5 text-primary" />
-              <h1 className="text-base font-semibold">FastNext</h1>
+              <h1 className="text-base font-semibold">PragmaStack</h1>
               <Badge variant="secondary" className="text-xs">
                 Dev
               </Badge>

frontend/src/components/home/AnimatedTerminal.tsx

@@ -83,9 +83,9 @@ export function AnimatedTerminal() {
           {/* Terminal Header */}
           <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-3">
             <div className="flex gap-1.5">
-              <div className="h-3 w-3 rounded-full bg-red-500" aria-hidden="true" />
-              <div className="h-3 w-3 rounded-full bg-yellow-500" aria-hidden="true" />
-              <div className="h-3 w-3 rounded-full bg-green-500" aria-hidden="true" />
+              <div className="h-3 w-3 rounded-full bg-destructive" aria-hidden="true" />
+              <div className="h-3 w-3 rounded-full bg-warning" aria-hidden="true" />
+              <div className="h-3 w-3 rounded-full bg-success" aria-hidden="true" />
             </div>
             <div className="flex items-center gap-2 ml-4 text-sm text-muted-foreground">
               <Terminal className="h-4 w-4" aria-hidden="true" />
@@ -105,15 +105,14 @@ export function AnimatedTerminal() {
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   transition={{ duration: 0.2 }}
-                  className={`${
-                    line.isSuccess
-                      ? 'text-green-400'
+                  className={`${line.isSuccess
+                      ? 'text-success'
                       : line.text.startsWith('#')
                         ? 'text-slate-500'
                         : line.text.startsWith('$')
-                          ? 'text-blue-400'
+                          ? 'text-primary'
                           : 'text-slate-300'
-                  }`}
+                    }`}
                 >
                   {line.text || '\u00A0'}
                   {index === displayedLines.length - 1 && isAnimating && !line.isSuccess && (

frontend/src/components/home/ContextSection.tsx

@@ -45,7 +45,7 @@ export function ContextSection() {
                 viewport={{ once: true }}
                 transition={{ duration: 0.3, delay: index * 0.1 }}
               >
-                <CheckCircle2 className="h-4 w-4 text-green-600" aria-hidden="true" />
+                <CheckCircle2 className="h-4 w-4 text-success" aria-hidden="true" />
                 <span>{feature}</span>
               </motion.div>
             ))}

frontend/src/components/home/DemoCredentialsModal.tsx

@@ -68,7 +68,7 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
                 className="h-8 gap-2"
               >
                 {copiedRegular ? (
-                  <Check className="h-4 w-4 text-green-600" aria-hidden="true" />
+                  <Check className="h-4 w-4 text-success" aria-hidden="true" />
                 ) : (
                   <Copy className="h-4 w-4" aria-hidden="true" />
                 )}
@@ -108,7 +108,7 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
                 className="h-8 gap-2"
               >
                 {copiedAdmin ? (
-                  <Check className="h-4 w-4 text-green-600" aria-hidden="true" />
+                  <Check className="h-4 w-4 text-success" aria-hidden="true" />
                 ) : (
                   <Copy className="h-4 w-4" aria-hidden="true" />
                 )}

frontend/src/components/home/Header.tsx

@@ -32,7 +32,7 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
           {/* Logo */}
           <Link href="/" className="font-bold text-xl hover:opacity-80 transition-opacity">
             <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
-              FastNext
+              PragmaStack
             </span>{' '}
             <span className="text-foreground">Template</span>
           </Link>

frontend/src/components/home/HeroSection.tsx

@@ -41,7 +41,7 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
           >
             <div className="inline-flex items-center gap-2 rounded-full border bg-background/50 px-4 py-1.5 text-sm backdrop-blur">
               <span
-                className="inline-block h-2 w-2 rounded-full bg-green-500 animate-pulse"
+                className="inline-block h-2 w-2 rounded-full bg-success animate-pulse"
                 aria-hidden="true"
               />
               <span className="font-medium">MIT Licensed</span>

frontend/src/components/home/PhilosophySection.tsx

@@ -58,13 +58,13 @@ export function PhilosophySection() {
             transition={{ duration: 0.5 }}
           >
             <h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
-              <X className="h-5 w-5 text-red-600" aria-hidden="true" />
+              <X className="h-5 w-5 text-destructive" aria-hidden="true" />
               What You Won&apos;t Find Here
             </h3>
             <ul className="space-y-3">
               {wontFind.map((item) => (
                 <li key={item} className="flex items-start gap-3">
-                  <X className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
+                  <X className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" aria-hidden="true" />
                   <span className="text-muted-foreground">{item}</span>
                 </li>
               ))}
@@ -80,14 +80,14 @@ export function PhilosophySection() {
             transition={{ duration: 0.5 }}
           >
             <h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
-              <Check className="h-5 w-5 text-green-600" aria-hidden="true" />
+              <Check className="h-5 w-5 text-success" aria-hidden="true" />
               What You Will Find
             </h3>
             <ul className="space-y-3">
               {willFind.map((item) => (
                 <li key={item} className="flex items-start gap-3">
                   <Check
-                    className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5"
+                    className="h-5 w-5 text-success flex-shrink-0 mt-0.5"
                     aria-hidden="true"
                   />
                   <span className="text-muted-foreground">{item}</span>

frontend/src/components/home/QuickStartCode.tsx

@@ -55,13 +55,13 @@ export function QuickStartCode() {
           {/* Header with Copy Button */}
           <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-3">
             <div className="flex items-center gap-2 text-sm text-muted-foreground font-mono">
-              <span className="inline-block h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
+              <span className="inline-block h-2 w-2 rounded-full bg-success" aria-hidden="true" />
               <span>bash</span>
             </div>
             <Button variant="ghost" size="sm" onClick={copyToClipboard} className="gap-2">
               {copied ? (
                 <>
-                  <Check className="h-4 w-4 text-green-600" aria-hidden="true" />
+                  <Check className="h-4 w-4 text-success" aria-hidden="true" />
                   <span>Copied!</span>
                 </>
               ) : (

frontend/src/components/layout/Footer.tsx

@@ -15,7 +15,7 @@ export function Footer() {
       <div className="container mx-auto px-4 py-6">
         <div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
           <div className="text-center text-sm text-muted-foreground md:text-left">
-            © {currentYear} FastNext Template. All rights reserved.
+            © {currentYear} PragmaStack. All rights reserved.
           </div>
           <div className="flex space-x-6">
             <Link
@@ -25,7 +25,7 @@ export function Footer() {
               Settings
             </Link>
             <a
-              href="https://github.com/yourusername/fastnext-stack"
+              href="https://github.com/cardosofelipe/pragmastack"
               target="_blank"
               rel="noopener noreferrer"
               className="text-sm text-muted-foreground hover:text-foreground transition-colors"

frontend/src/components/layout/Header.tsx

@@ -83,7 +83,7 @@ export function Header() {
         {/* Logo */}
         <div className="flex items-center space-x-8">
           <Link href="/" className="flex items-center space-x-2">
-            <span className="text-xl font-bold text-foreground">FastNext</span>
+            <span className="text-xl font-bold text-foreground">PragmaStack</span>
           </Link>
 
           {/* Navigation Links */}