# Tech Stack & Build Setup Plan
*(Pre-Build Gate — Locked-In Architecture for Phase A Frontend & Phase B Backend/ERP)*

**Project:** Aangina — Bangladesh Saree E-Commerce & Business ERP System  
**Status:** ✅ **Finalized & Approved Architecture** *(Do not start coding until the project folder is in its local working directory and the project owner gives the "Start Build" command)*  
**Related Files:**  
* **Frontend Build Sequence:** `00_frontend_master_workflow_and_build_order.md`  
* **Design Tokens Source of Truth:** `global_color_typography_design_plan.md` *(the **only** file containing raw hex codes & font names)*  
* **Shared UI Standards:** `global_ui_components_and_content_standards.md`  
* **Backend & ERP Master Plan:** `../backend/00_backend_and_erp_master_plan.md`

---

## 1. Locked-In Technology Stack

| Layer | Selected Technology | Why It Was Chosen |
| :--- | :--- | :--- |
| **Core Framework** | **PHP 8.2+ with Laravel 11** | Zero cold-start delays on cPanel (LiteSpeed + PHP OPcache), `< 50ms` TTFB, built-in enterprise security, and seamless expansion from Phase A (Storefront) to Phase B (Backend + ERP). |
| **Storefront Templates** | **Laravel Blade Components** | Reusable server-rendered components (`<x-product-card>`, `<x-product-slider>`, `<x-header>`, `<x-footer>`) with native Open Graph (`og:`) meta tags for Facebook, Messenger & WhatsApp link previews. |
| **Styling Engine** | **Tailwind CSS + 12 `:root` CSS Variables (via Vite)** | Compiles to an ultra-lightweight `~10 KB` stylesheet for fast Bangladesh 3G/4G mobile loads while strictly enforcing the 12 global design tokens (`var(--bg-main)` through `var(--font-body)`). |
| **Frontend Interactivity** | **Alpine.js (`~15 KB`) + Vanilla JS** | Powers the Quick View Modal/Bottom Sheet, Slide-Out Cart Drawer, Express Buy (`ORDER NOW` preserving existing cart), `2.5×` Weave Magnifier Zoom, Mobile Pinch-to-Zoom Lightbox, and Infinite Scroll without heavy SPA bundle bloat. |
| **Phase A Data Layer** | **Central Config & Mock Dataset (`config/storeConfig.php` + Mock Repository)** | Powers all 9 steps of Phase A Frontend development cleanly before connecting MySQL in Phase B. |
| **Phase B Database & Admin/ERP** | **MySQL / MariaDB + FilamentPHP v3 / Livewire 3** | Powers Stage 1 (Website Backend, Phone-Verified Stock Deduction, Customer History Lookup & Live Order Alerts) and Stage 2 (Full Saree ERP). |

---

## 2. Strict Tailwind CSS + 12 `:root` Variables Configuration

To guarantee **100% compliance** with `global_color_typography_design_plan.md` (Zero Hardcoded Hex Codes or Font Names in Components) and allow live Admin re-theming in Phase B without rebuilding CSS:

### A. Global `:root` Stylesheet (`resources/css/app.css`)
* The 10 color values and 2 font family names from `global_color_typography_design_plan.md` are declared **once** inside `:root` (and injected dynamically from `store_settings` in Phase B).
* No component, Blade file, or `tailwind.config.js` file may ever contain a raw hex value or font name.

### B. Locked `tailwind.config.js` Token Mapping (Default Palette Disabled)
Tailwind's default color palette (`red-*`, `gray-*`, `black`, `white`, etc.) is **disabled** (`colors: {...}` at root level, not `extend`) so only the 12 approved variables exist:

```js
// tailwind.config.js — Strictly mapped to the 12 :root CSS Variables
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    screens: {
      md: "768px",   // Tablet: 768px – 1024px
      lg: "1025px",  // Desktop: 1025px+ (Mobile 320px–767px is default)
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      "bg-main": "var(--bg-main)",
      "bg-surface": "var(--bg-surface)",
      "brand-primary": "var(--brand-primary)",
      "brand-accent": "var(--brand-accent)",
      "text-primary": "var(--text-primary)",
      "text-muted": "var(--text-muted)",
      "text-light": "var(--text-light)",
      "border-subtle": "var(--border-subtle)",
      "state-success": "var(--state-success)",
      "state-error": "var(--state-error)",
    },
    fontFamily: {
      heading: ["var(--font-heading)"],
      body: ["var(--font-body)"],
    },
    extend: {
      maxWidth: {
        container: "1280px",
        checkout: "1140px",
        reading: "760px",
        modal: "920px",
      },
      aspectRatio: {
        saree: "3 / 4",      // Strict 3:4 Product Portrait (1200 x 1600px)
        "hero-desktop": "4 / 3", // Desktop Hero (1600 x 1200px)
        "hero-mobile": "4 / 5",  // Mobile Portrait Hero & Review Photos (1080 x 1350px)
      },
    },
  },
  plugins: [],
};
```

### C. Reusable Component Classes in `@layer components` (`resources/css/app.css`)
To enforce the Approved Color Pairings (`global_color_typography_design_plan.md` Section 5) and Button System (`global_ui_components_and_content_standards.md` Section 2) consistently across all pages:
* **`.btn-primary`:** `h-[48px] bg-brand-accent text-text-primary hover:bg-brand-primary hover:text-text-light font-body font-semibold uppercase tracking-[0.8px] transition-colors duration-200`
* **`.btn-primary-lg`:** Same as `.btn-primary` with `h-[52px]` (for `CONFIRM ORDER — BDT X,XXX`)
* **`.btn-secondary`:** `h-[48px] bg-bg-main border-[1.5px] border-brand-primary text-brand-primary hover:bg-bg-surface font-body font-semibold uppercase tracking-[0.8px] transition-colors duration-200`
* **`.btn-disabled`:** `h-[48px] bg-bg-surface border border-border-subtle text-text-muted cursor-not-allowed font-body font-semibold uppercase tracking-[0.8px]`
* **`.badge-accent`:** `bg-brand-accent text-text-primary font-body font-semibold uppercase text-[11px] lg:text-[12px]`
* **`.badge-soldout`:** `bg-bg-surface border border-border-subtle text-text-muted font-body font-semibold uppercase text-[11px] lg:text-[12px]`
* **`.shimmer-warm`:** Warm shimmer skeleton using `var(--bg-surface)`, `var(--border-subtle)`, and `var(--bg-main)` (never grey).

---

## 3. Clean Directory Structure (Phase A → Phase B Ready)

```text
aangina/
├── app/
│   ├── Data/                     # Phase A: Central storeConfig, categoriesData & sareesData
│   ├── Http/Controllers/         # Storefront Controllers (Home, SareeHub, Category, PDP, Checkout)
│   └── Models/                   # Phase B: Eloquent Models (Product, Order, Customer, Weaver, etc.)
├── resources/
│   ├── css/
│   │   └── app.css               # :root 12 CSS Variables + Tailwind directives + @layer components
│   ├── js/
│   │   └── app.js                # Alpine.js stores (cartStore, expressBuyStore, quickViewStore)
│   └── views/
│       ├── layouts/
│       │   └── app.blade.php     # Master shell (Dynamic :root tokens, OG tags, Header, Footer, Overlays)
│       ├── components/           # Shared UI (<x-product-card>, <x-product-slider>, <x-quick-view>, etc.)
│       └── pages/                # Home, Sarees Hub, Category/Collection, PDP, Checkout, Policies, 404
├── routes/
│   └── web.php                   # Exact routes matching collection_and_utility_pages_plan.md Section 1
├── tailwind.config.js            # Strictly locked to the 12 :root CSS Variables
└── vite.config.js                # Vite bundler for fast CSS/JS compilation
```