feat: real design system tokens + C01/C02/C03 login-OTP flow per winofyfrontenddoc.md

Replaces placeholder colors/type-scale with the documented Figma design
system (§1), and rebuilds login as three screens matching the doc exactly:
role selection, phone entry, and 6-box OTP verification with countdown
resend. Fixes a real bug along the way: normalizeIranianPhone stripped
Persian-digit keyboard input entirely instead of converting it (\D matches
non-ASCII digits too) -- added toLatinDigits/toPersianDigits and verified
the round-trip in isolation.

src/app/(auth)/login/page.tsx

@@ -1,32 +1,64 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { ArrowRight, ShoppingBag, Store } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { AuthHeaderBanner } from "@/components/auth/auth-header-banner";
+import { RoleCard } from "@/components/auth/role-card";
+import { OtpInput } from "@/components/auth/otp-input";
+import { ResendPrompt } from "@/components/auth/resend-prompt";
 import { requestOtp, exchangeOtpForToken, normalizeIranianPhone, GooyalClientError } from "@/lib/auth/gooyal-client";
+import { isValidIranianMobile } from "@/lib/validation/phone";
+import { toPersianDigits, toLatinDigits } from "@/lib/format/persian-digits";
 
-type Step = "phone" | "otp";
+type Step = "role" | "phone" | "otp";
+type Role = "buyer" | "seller";
+
+const RESEND_COOLDOWN_SECONDS = 105; // "۱:۴۵" per winofyfrontenddoc.md §2.4 — confirm real value with backend, see doc §2.6.7
 
 export default function LoginPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const next = searchParams.get("next") ?? "/";
 
-  const [step, setStep] = useState<Step>("phone");
+  // Arriving via a protected-route redirect implies buyer intent already — skip the role card.
+  const [step, setStep] = useState<Step>(next !== "/" ? "phone" : "role");
+  const [role, setRole] = useState<Role>("buyer");
   const [phone, setPhone] = useState("");
   const [otp, setOtp] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [secondsRemaining, setSecondsRemaining] = useState(0);
 
-  async function handleRequestOtp(e: React.FormEvent) {
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-    e.preventDefault();
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  function startResendCountdown() {
+    setSecondsRemaining(RESEND_COOLDOWN_SECONDS);
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => {
+      setSecondsRemaining((s) => {
+        if (s <= 1 && intervalRef.current) clearInterval(intervalRef.current);
+        return Math.max(0, s - 1);
+      });
+    }, 1000);
+  }
+
+  async function sendOtp() {
     setError(null);
     setLoading(true);
     try {
-      // Calls Gooyal accounts directly from the browser — not our own server.
       await requestOtp(normalizeIranianPhone(phone));
       setStep("otp");
+      setOtp("");
+      startResendCountdown();
     } catch (err) {
       setError(err instanceof GooyalClientError || err instanceof Error ? err.message : "خطا در ارسال کد تایید");
     } finally {
@@ -34,15 +66,18 @@ export default function LoginPage() {
     }
   }
 
-  async function handleVerifyOtp(e: React.FormEvent) {
+  async function handlePhoneSubmit(e: React.FormEvent) {
     e.preventDefault();
+    if (!isValidIranianMobile(phone)) return;
+    await sendOtp();
+  }
+
+  async function verifyOtp(code: string) {
     setError(null);
     setLoading(true);
     try {
-      // Token exchange also happens directly against Gooyal from the browser.
+      const token = await exchangeOtpForToken(normalizeIranianPhone(phone), code);
-      const token = await exchangeOtpForToken(normalizeIranianPhone(phone), otp);
 
-      // Hand the token to our server just to wrap it in an httpOnly session cookie.
       const sessionRes = await fetch("/api/auth/session", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -50,7 +85,7 @@ export default function LoginPage() {
       });
       if (!sessionRes.ok) throw new Error("خطا در برقراری نشست ورود");
 
-      router.push(next);
+      router.push(role === "seller" ? "/seller" : next);
       router.refresh();
     } catch (err) {
       setError(err instanceof GooyalClientError || err instanceof Error ? err.message : "کد تایید نامعتبر است");
@@ -59,63 +94,133 @@ export default function LoginPage() {
     }
   }
 
-  return (
+  function handleOtpSubmit(e: React.FormEvent) {
-    <main className="mx-auto flex min-h-full w-full max-w-sm flex-1 flex-col justify-center gap-6 px-6 py-10">
+    e.preventDefault();
-      <div className="text-center">
+    if (otp.length === 6) verifyOtp(otp);
-        <h1 className="text-2xl font-bold">ورود به وینوفی</h1>
+  }
-        <p className="mt-2 text-sm text-muted-foreground">
-          {step === "phone"
-            ? "شماره موبایل خود را وارد کنید"
-            : `کد ارسال شده به ${phone} را وارد کنید`}
-        </p>
-      </div>
 
-      {step === "phone" ? (
+  function backToPhoneStep() {
-        <form onSubmit={handleRequestOtp} className="flex flex-col gap-4">
-          <Input
-            type="tel"
-            inputMode="tel"
-            dir="ltr"
-            placeholder="09123456789"
-            value={phone}
-            onChange={(e) => setPhone(e.target.value)}
-            required
-            className="text-center"
-          />
-          {error && <p className="text-center text-sm text-destructive">{error}</p>}
-          <Button type="submit" disabled={loading} size="lg">
-            {loading ? "در حال ارسال..." : "دریافت کد تایید"}
-          </Button>
-        </form>
-      ) : (
-        <form onSubmit={handleVerifyOtp} className="flex flex-col gap-4">
-          <Input
-            type="text"
-            inputMode="numeric"
-            dir="ltr"
-            placeholder="12345"
-            value={otp}
-            onChange={(e) => setOtp(e.target.value)}
-            required
-            className="text-center tracking-[0.5em]"
-          />
-          {error && <p className="text-center text-sm text-destructive">{error}</p>}
-          <Button type="submit" disabled={loading} size="lg">
-            {loading ? "در حال بررسی..." : "تایید و ورود"}
-          </Button>
-          <button
-            type="button"
-            onClick={() => {
     setStep("phone");
     setOtp("");
     setError(null);
+  }
+
+  if (step === "role") {
+    return (
+      <main className="flex min-h-full flex-1 flex-col bg-surface">
+        <AuthHeaderBanner />
+        <div className="flex flex-col gap-8 px-6 py-10">
+          <div className="flex flex-col gap-2 text-right">
+            <h1 className="text-headline-medium font-extrabold text-foreground">بازارچه محلی شما</h1>
+            <p className="text-body-large text-gray-700">خرید آنلاین از فروشگاه‌های محله، سریع و آسان</p>
+          </div>
+
+          <RoleCard
+            icon={<ShoppingBag className="h-5 w-5" />}
+            title="خریدار"
+            description="فروشگاه‌های اطراف را ببینید و از محله خود خرید کنید"
+            ctaLabel="ورود به بازارچه"
+            ctaVariant="primary"
+            onSelect={() => {
+              setRole("buyer");
+              setStep("phone");
             }}
-            className="text-sm text-muted-foreground underline underline-offset-4"
+          />
-          >
+          <RoleCard
-            ویرایش شماره موبایل
+            icon={<Store className="h-5 w-5" />}
-          </button>
+            title="فروشنده"
-        </form>
+            description="فروشگاه دیجیتال خود بسازید، محصولات و سفارش دریافت کنید"
-      )}
+            ctaLabel="ورود به پنل فروشنده"
+            ctaVariant="secondary"
+            onSelect={() => {
+              setRole("seller");
+              setStep("phone");
+            }}
+          />
+        </div>
+      </main>
+    );
+  }
+
+  if (step === "phone") {
+    return (
+      <main className="flex min-h-full flex-1 flex-col bg-surface">
+        <AuthHeaderBanner />
+        <form onSubmit={handlePhoneSubmit} className="flex flex-col gap-8 px-6 pt-10">
+          <div className="flex flex-col gap-2 text-right">
+            <h1 className="text-headline-medium font-extrabold text-foreground">ورود به حساب</h1>
+            <p className="text-body-large text-gray-700">برای ادامه، شماره موبایل خود را وارد کنید</p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <label htmlFor="phone" className="text-title-medium font-semibold text-foreground">
+              شماره موبایل
+            </label>
+            <Input
+              id="phone"
+              type="tel"
+              inputMode="numeric"
+              dir="ltr"
+              placeholder={toPersianDigits("09123456789")}
+              value={phone ? toPersianDigits(phone) : ""}
+              onChange={(e) => setPhone(toLatinDigits(e.target.value).replace(/\D/g, "").slice(0, 11))}
+              className="text-center tracking-[0.2em]"
+              autoFocus
+            />
+            <p className="text-label text-gray-600">شماره ۱۱ رقمی با ۰۹ شروع می‌شود</p>
+          </div>
+
+          {error && <p className="text-center text-body-medium text-error">{error}</p>}
+
+          <Button
+            type="submit"
+            size="lg"
+            className="bg-primary-action hover:bg-primary-action/90"
+            disabled={loading || !isValidIranianMobile(phone)}
+          >
+            {loading ? "در حال ارسال..." : "دریافت کد تأیید"}
+          </Button>
+        </form>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex min-h-full flex-1 flex-col bg-surface px-6 py-6">
+      <button type="button" onClick={backToPhoneStep} className="mb-6 flex h-8 w-8 items-center justify-center" aria-label="بازگشت">
+        <ArrowRight className="h-5 w-5 text-foreground" />
+      </button>
+
+      <form onSubmit={handleOtpSubmit} className="flex flex-col gap-8">
+        <div className="flex flex-col gap-2 text-right">
+          <h1 className="text-headline-medium font-extrabold text-foreground">کد تأیید</h1>
+          <p className="text-body-large text-gray-700">
+            کد ۶ رقمی ارسال شده به شماره {toPersianDigits(normalizeIranianPhone(phone).replace("+98", "0"))} را وارد کنید
+          </p>
+        </div>
+
+        <OtpInput value={otp} onChange={setOtp} onComplete={verifyOtp} disabled={loading} />
+
+        <ResendPrompt secondsRemaining={secondsRemaining} onResend={sendOtp} disabled={loading} />
+
+        {error && <p className="text-center text-body-medium text-error">{error}</p>}
+
+        <Button
+          type="submit"
+          size="lg"
+          className="bg-primary-action hover:bg-primary-action/90"
+          disabled={loading || otp.length !== 6}
+        >
+          {loading ? "در حال بررسی..." : "تأیید"}
+        </Button>
+
+        <p className="text-center text-body-medium text-gray-800">
+          شماره اشتباه است؟{" "}
+          <button type="button" onClick={backToPhoneStep} className="font-semibold text-primary-action">
+            تغییر دهید
+          </button>
+        </p>
+      </form>
     </main>
   );
 }

src/app/(seller)/seller/page.tsx

@@ -0,0 +1,16 @@
+import { Store } from "lucide-react";
+
+// Placeholder landing spot for the seller-role login path. The real seller
+// panel (store onboarding, products, orders, analytics — FRONTEND_GUIDE.md §7)
+// is a separate build; this just keeps the login flow's seller CTA from 404ing.
+export default function SellerPlaceholderPage() {
+  return (
+    <main className="mx-auto flex min-h-full w-full max-w-md flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
+      <span className="flex h-14 w-14 items-center justify-center rounded-full bg-brand-secondary/10 text-brand-secondary">
+        <Store className="h-7 w-7" />
+      </span>
+      <h1 className="text-title-large font-extrabold text-foreground">پنل فروشنده</h1>
+      <p className="text-body-medium text-gray-700">این بخش به‌زودی راه‌اندازی می‌شود.</p>
+    </main>
+  );
+}

src/app/globals.css

@@ -1,48 +1,103 @@
 @import "tailwindcss";
 
 /*
- * Placeholder tokens — TODO replace with real values pulled from the Figma
+ * Design tokens per winofyfrontenddoc.md §1.2 (Figma design-system page).
- * design-system page (get_variable_defs) once file access is granted.
+ * Light-mode only — the source file documents no dark-mode variants, so we
+ * don't invent any rather than guess.
  */
 :root {
-  --background: #ffffff;
+  --background: #f7f2fa; /* پس‌زمینه — app background */
-  --foreground: #171717;
+  --surface: #fffbfe; /* سفید — card/sheet surface */
-  --primary: #16a34a;
+  --foreground: #111827; /* gray-900 */
+
+  --primary: #006a6a; /* فیروزه‌ای — customer brand accent */
   --primary-foreground: #ffffff;
-  --secondary: #f1f5f9;
+  --primary-action: #223d5d; /* auth-flow button/heading accent, see §1.2 */
-  --secondary-foreground: #171717;
+
-  --muted: #f1f5f9;
+  --brand-secondary: #1a237e; /* یاقوتی — seller brand accent */
-  --muted-foreground: #6b7280;
+
-  --border: #e5e7eb;
+  --success: #1b6b3a;
-  --destructive: #dc2626;
+  --error: #ba1a1a;
+  --destructive: #ba1a1a;
   --destructive-foreground: #ffffff;
+
+  --teal: #2e807a;
+  --teal-light: #e0f2f1;
+  --teal-bg: #e6f0f0;
+  --blue-bg: #ecf2f8;
+
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-300: #e5e7eb;
+  --gray-500: #9ca3af;
+  --gray-600: #6b7280;
+  --gray-700: #4b5563;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  --secondary: var(--gray-100); /* generic UI secondary surface, distinct from brand-secondary */
+  --secondary-foreground: var(--gray-900);
+  --muted: var(--gray-100);
+  --muted-foreground: var(--gray-600);
+  --border: var(--gray-300);
 }
 
 @theme inline {
   --color-background: var(--background);
+  --color-surface: var(--surface);
   --color-foreground: var(--foreground);
+
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-action: var(--primary-action);
+  --color-brand-secondary: var(--brand-secondary);
+
+  --color-success: var(--success);
+  --color-error: var(--error);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-teal: var(--teal);
+  --color-teal-light: var(--teal-light);
+  --color-teal-bg: var(--teal-bg);
+  --color-blue-bg: var(--blue-bg);
+
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-300: var(--gray-300);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-gray-900: var(--gray-900);
+
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
   --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --font-sans: var(--font-vazirmatn);
-}
 
-@media (prefers-color-scheme: dark) {
+  --font-sans: var(--font-vazirmatn);
-  :root {
+
-    --background: #0a0a0a;
+  /* Type scale — §1.3. Line-height is 100% throughout the source file. */
-    --foreground: #ededed;
+  --text-display-large: 57px;
-    --secondary: #1f2937;
+  --text-display-large--line-height: 1;
-    --secondary-foreground: #ededed;
+  --text-display-medium: 45px;
-    --muted: #1f2937;
+  --text-display-medium--line-height: 1;
-    --muted-foreground: #9ca3af;
+  --text-headline-large: 32px;
-    --border: #27272a;
+  --text-headline-large--line-height: 1;
-  }
+  --text-headline-medium: 28px;
+  --text-headline-medium--line-height: 1;
+  --text-title-large: 22px;
+  --text-title-large--line-height: 1;
+  --text-title-medium: 16px;
+  --text-title-medium--line-height: 1;
+  --text-body-large: 16px;
+  --text-body-large--line-height: 1;
+  --text-body-medium: 14px;
+  --text-body-medium--line-height: 1;
+  --text-label: 12px;
+  --text-label--line-height: 1;
 }
 
 body {

src/app/layout.tsx

@@ -5,7 +5,7 @@ import { QueryProvider } from "@/lib/query-provider";
 
 const vazirmatn = Vazirmatn({
   variable: "--font-vazirmatn",
-  subsets: ["arabic"],
+  subsets: ["arabic", "latin"],
 });
 
 export const metadata: Metadata = {

src/components/auth/auth-header-banner.tsx

@@ -0,0 +1,25 @@
+/**
+ * Dark-navy full-bleed header used on C01/C02 — winofyfrontenddoc.md §2.2/§2.3.
+ * No logo asset was provided with the doc, so the wordmark below (icon + "وینسو"
+ * in orange) is an approximation of the documented mark, not a pixel-exact asset.
+ */
+export function AuthHeaderBanner({ height = 236 }: { height?: number }) {
+  return (
+    <div
+      className="flex w-full shrink-0 items-center justify-center bg-primary-action"
+      style={{ height }}
+    >
+      <div className="flex items-center gap-2">
+        <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-[#F97316]">
+          <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5" aria-hidden>
+            <path
+              d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5Z"
+              fill="white"
+            />
+          </svg>
+        </span>
+        <span className="text-title-large font-extrabold text-white">وینسو</span>
+      </div>
+    </div>
+  );
+}

src/components/auth/otp-input.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { toLatinDigits, toPersianDigits } from "@/lib/format/persian-digits";
+import { cn } from "@/lib/utils/cn";
+
+export function OtpInput({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  disabled,
+}: {
+  length?: number;
+  value: string;
+  onChange: (value: string) => void;
+  onComplete?: (value: string) => void;
+  disabled?: boolean;
+}) {
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const digits = value.split("");
+
+  function setDigitAt(index: number, digit: string) {
+    const next = [...digits];
+    next[index] = digit;
+    const nextValue = next.join("").slice(0, length);
+    onChange(nextValue);
+    if (nextValue.length === length) onComplete?.(nextValue);
+  }
+
+  function handleChange(index: number, rawInput: string) {
+    const latin = toLatinDigits(rawInput).replace(/\D/g, "");
+    if (!latin) {
+      setDigitAt(index, "");
+      return;
+    }
+    // Handles both single keystrokes and a full code landing in one box (some
+    // mobile keyboards/autofill deliver multiple digits to a single input).
+    const chars = latin.split("");
+    chars.forEach((char, offset) => {
+      const targetIndex = index + offset;
+      if (targetIndex < length) setDigitAt(targetIndex, char);
+    });
+    const nextFocus = Math.min(index + chars.length, length - 1);
+    inputRefs.current[nextFocus]?.focus();
+  }
+
+  function handleKeyDown(index: number, e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+      setDigitAt(index - 1, "");
+    }
+  }
+
+  function handlePaste(index: number, e: React.ClipboardEvent<HTMLInputElement>) {
+    e.preventDefault();
+    handleChange(index, e.clipboardData.getData("text"));
+  }
+
+  return (
+    <div className="flex justify-center gap-2" dir="ltr">
+      {Array.from({ length }).map((_, index) => {
+        const isFocused = focusedIndex === index;
+        return (
+          <input
+            key={index}
+            ref={(el) => {
+              inputRefs.current[index] = el;
+            }}
+            type="text"
+            inputMode="numeric"
+            maxLength={1}
+            disabled={disabled}
+            value={digits[index] ? toPersianDigits(digits[index]) : ""}
+            onChange={(e) => handleChange(index, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(index, e)}
+            onPaste={(e) => handlePaste(index, e)}
+            onFocus={() => setFocusedIndex(index)}
+            onBlur={() => setFocusedIndex((f) => (f === index ? null : f))}
+            className={cn(
+              "h-14 w-12 rounded-xl border text-center text-title-large outline-none transition-colors",
+              isFocused ? "border-2 border-primary-action bg-primary-action/[8.24%]" : "border-gray-300 bg-white",
+            )}
+          />
+        );
+      })}
+    </div>
+  );
+}

src/components/auth/resend-prompt.tsx

@@ -0,0 +1,43 @@
+import { toPersianDigits } from "@/lib/format/persian-digits";
+
+function formatMMSS(totalSeconds: number) {
+  const m = Math.floor(totalSeconds / 60);
+  const s = totalSeconds % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+/**
+ * winofyfrontenddoc.md §2.4 flags that the source file uses the same active
+ * color for both the ticking countdown and the tappable resend link, with no
+ * visual distinction — and itself recommends fixing that. Implemented here
+ * per that recommendation: muted while counting down, primary-action once
+ * resend is actually available.
+ */
+export function ResendPrompt({
+  secondsRemaining,
+  onResend,
+  disabled,
+}: {
+  secondsRemaining: number;
+  onResend: () => void;
+  disabled?: boolean;
+}) {
+  if (secondsRemaining > 0) {
+    return (
+      <p className="text-center text-body-medium font-medium text-gray-500">
+        ارسال مجدد کد تا {toPersianDigits(formatMMSS(secondsRemaining))}
+      </p>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onResend}
+      disabled={disabled}
+      className="text-center text-body-medium font-medium text-primary-action underline underline-offset-4 disabled:opacity-40"
+    >
+      ارسال مجدد کد
+    </button>
+  );
+}

src/components/auth/role-card.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export function RoleCard({
+  icon,
+  title,
+  description,
+  ctaLabel,
+  ctaVariant,
+  onSelect,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  ctaLabel: string;
+  ctaVariant: "primary" | "secondary";
+  onSelect: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-5 rounded-xl border border-gray-300 bg-gray-50 p-4">
+      <div className="flex items-center gap-3">
+        <span className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-action/10 text-primary-action">
+          {icon}
+        </span>
+        <h3 className="text-title-large font-extrabold text-foreground">{title}</h3>
+      </div>
+      <p className="text-body-medium text-gray-700">{description}</p>
+      <button
+        type="button"
+        onClick={onSelect}
+        className={cn(
+          "flex h-12 w-full items-center justify-center rounded-full text-body-large font-semibold transition-colors",
+          ctaVariant === "primary"
+            ? "bg-primary-action text-white hover:bg-primary-action/90"
+            : "border border-primary-action bg-white text-primary-action hover:bg-primary-action/5",
+        )}
+      >
+        {ctaLabel}
+      </button>
+    </div>
+  );
+}

src/components/ui/button.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils/cn";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+  "inline-flex items-center justify-center gap-2 rounded-full text-body-medium font-semibold transition-colors disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
   {
     variants: {
       variant: {
@@ -14,9 +14,9 @@ const buttonVariants = cva(
         ghost: "bg-transparent hover:bg-muted",
       },
       size: {
-        default: "h-11 px-4",
+        default: "h-12 px-4 text-body-large",
-        sm: "h-9 px-3 text-xs",
+        sm: "h-9 px-3 text-label",
-        lg: "h-12 px-6 text-base",
+        lg: "h-12 px-6 text-body-large",
         icon: "h-10 w-10",
       },
     },

src/components/ui/input.tsx

@@ -1,12 +1,20 @@
 import * as React from "react";
 import { cn } from "@/lib/utils/cn";
 
-export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  ({ className, ...props }, ref) => (
+  /** default/empty, valid (green accent), error (red accent) — winofyfrontenddoc.md §1.7. */
+  state?: "default" | "valid" | "error";
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, state = "default", ...props }, ref) => (
     <input
       ref={ref}
       className={cn(
-        "h-11 w-full rounded-xl border border-border bg-background px-4 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        "h-14 w-full rounded-xl border bg-muted px-4 text-body-large text-foreground placeholder:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-action/40",
+        state === "default" && "border-border",
+        state === "valid" && "border-success",
+        state === "error" && "border-error",
         className,
       )}
       {...props}

src/lib/auth/gooyal-client.ts

@@ -5,6 +5,8 @@
  * The client_id/secret are intentionally public here — see .env.local comment.
  */
 
+import { toLatinDigits } from "@/lib/format/persian-digits";
+
 const ACCOUNTS_BASE_URL = process.env.NEXT_PUBLIC_GOOYAL_ACCOUNTS_BASE_URL!;
 const CLIENT_ID = process.env.NEXT_PUBLIC_GOOYAL_CLIENT_ID!;
 const CLIENT_SECRET = process.env.NEXT_PUBLIC_GOOYAL_CLIENT_SECRET!;
@@ -30,9 +32,12 @@ export class GooyalClientError extends Error {
   }
 }
 
-/** Accepts local Iranian input (09..., 9..., 0098...) and normalizes to Gooyal's required +989999999999. */
+/**
+ * Accepts local Iranian input (09..., 9..., 0098...) — including Persian-digit
+ * keyboard input — and normalizes to Gooyal's required +989999999999.
+ */
 export function normalizeIranianPhone(input: string): string {
-  const digits = input.replace(/\D/g, "");
+  const digits = toLatinDigits(input).replace(/\D/g, "");
   const local = digits.replace(/^0098/, "").replace(/^98/, "").replace(/^0/, "");
   return `+98${local}`;
 }

src/lib/format/persian-digits.ts

@@ -0,0 +1,16 @@
+const PERSIAN_DIGITS = "۰۱۲۳۴۵۶۷۸۹";
+const ARABIC_INDIC_DIGITS = "٠١٢٣٤٥٦٧٨٩";
+
+/** Persian/Arabic-Indic digits → Latin. Needed before any numeric parsing, since Iranian keyboards commonly type Persian digits. */
+export function toLatinDigits(input: string): string {
+  return input.replace(/[۰-۹٠-٩]/g, (ch) => {
+    const persianIndex = PERSIAN_DIGITS.indexOf(ch);
+    if (persianIndex !== -1) return String(persianIndex);
+    return String(ARABIC_INDIC_DIGITS.indexOf(ch));
+  });
+}
+
+/** Latin digits → Persian, per winofyfrontenddoc.md §1.5 (all numeric UI copy uses Persian digits). */
+export function toPersianDigits(input: string | number): string {
+  return String(input).replace(/[0-9]/g, (d) => PERSIAN_DIGITS[Number(d)]);
+}

src/lib/validation/phone.ts

@@ -0,0 +1,6 @@
+import { toLatinDigits } from "@/lib/format/persian-digits";
+
+/** 11 digits, starting 09 — winofyfrontenddoc.md §2.3 helper copy / validation rules. */
+export function isValidIranianMobile(input: string): boolean {
+  return /^09\d{9}$/.test(toLatinDigits(input));
+}