style(app): normalize tailwind utility syntax

src/app/auth/auth-screen.tsx

@@ -50,10 +50,10 @@ export function AuthScreen() {
 
   return (
     <MobileShell>
-      <div className="relative flex min-h-[var(--app-viewport-height,100dvh)] w-full flex-1 flex-col overflow-hidden bg-[#fbf1f2]">
+      <div className="relative flex min-h-(--app-viewport-height,100dvh) w-full flex-1 flex-col overflow-hidden bg-[#fbf1f2]">
         <AuthBackground />
         <div
-          className="relative z-[2] flex flex-auto flex-col justify-center"
+          className="relative z-2 flex flex-auto flex-col justify-center"
           style={{
             padding:
               "calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-top, 0px)) calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-right, 0px)) calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-bottom, 0px)) calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-left, 0px))",

src/app/auth/components/__tests__/tailwind-components.test.tsx

@@ -39,7 +39,7 @@ describe("auth Tailwind components", () => {
       <AuthPrimaryButton isLoading>Continue</AuthPrimaryButton>,
     );
 
-    expect(html).toContain("min-h-[var(--auth-field-height)]");
+    expect(html).toContain("min-h-(--auth-field-height)");
     expect(html).toContain("bg-[linear-gradient");
     expect(html).toContain("animate-spin");
     expect(html).toContain("Continue");
@@ -80,7 +80,7 @@ describe("auth Tailwind components", () => {
       <AuthSocialButton icon={<span>G</span>}>Continue</AuthSocialButton>,
     );
 
-    expect(html).toContain("min-h-[var(--auth-social-button-height)]");
+    expect(html).toContain("min-h-(--auth-social-button-height)");
     expect(html).toContain("border-auth-border");
     expect(html).toContain("text-auth-text-primary");
     expect(html).toContain("Continue");
@@ -108,7 +108,7 @@ describe("auth Tailwind components", () => {
     const html = renderToStaticMarkup(<AuthLegalText />);
 
     expect(html).toContain('aria-label="Agree to terms"');
-    expect(html).toContain("size-[var(--auth-legal-checkbox-size)]");
+    expect(html).toContain("size-(--auth-legal-checkbox-size)");
     expect(html).toContain("bg-auth-legal-check");
     expect(html).toContain("Privacy Agreement");
     expect(html).toContain("Terms of User");
@@ -125,7 +125,7 @@ describe("auth Tailwind components", () => {
       />,
     );
 
-    expect(html).toContain("min-h-[var(--auth-field-height)]");
+    expect(html).toContain("min-h-(--auth-field-height)");
     expect(html).toContain("placeholder:text-auth-input-placeholder");
     expect(html).toContain("text-auth-text-primary");
     expect(html).toContain("Invalid email");

src/app/auth/components/auth-email-panel.tsx

@@ -83,7 +83,7 @@ export function AuthEmailPanel({
 
       <button
         type="button"
-        className="self-center border-0 bg-transparent pt-md text-[var(--responsive-body)] text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
+        className="self-center border-0 bg-transparent pt-md text-(length:--responsive-body) text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
         onClick={() => setMode((m) => (m === "login" ? "register" : "login"))}
       >
         {mode === "login"
@@ -93,13 +93,13 @@ export function AuthEmailPanel({
 
       <button
         type="button"
-        className="self-center border-0 bg-transparent py-md text-[var(--responsive-body)] text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
+        className="self-center border-0 bg-transparent py-md text-(length:--responsive-body) text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
         onClick={() => setShowOptions(true)}
       >
         Other Sign In Options
       </button>
 
-      <div className="min-h-[var(--page-section-gap,var(--spacing-lg))] flex-[1_1_0]" />
+      <div className="min-h-(--page-section-gap,var(--spacing-lg)) flex-[1_1_0]" />
       <AuthLegalText />
 
       <AuthOtherOptionsDialog

src/app/auth/components/auth-error-message.tsx

@@ -8,7 +8,7 @@ export function AuthErrorMessage({ message }: { message: string | null }) {
   if (!message) return null;
   return (
     <div
-      className="w-full bg-transparent p-0 text-center text-[var(--responsive-caption)] leading-[1.4] text-error"
+      className="w-full bg-transparent p-0 text-center text-(length:--responsive-caption) leading-[1.4] text-error"
       role="alert"
     >
       {message}

src/app/auth/components/auth-facebook-panel.tsx

@@ -49,7 +49,7 @@ export function AuthFacebookPanel({
 
   return (
     <div className="flex min-h-0 w-full flex-auto flex-col items-stretch">
-      <div className="min-h-[var(--page-section-gap,var(--spacing-lg))] flex-[1_1_0]" />
+      <div className="min-h-(--page-section-gap,var(--spacing-lg)) flex-[1_1_0]" />
       <Image
         src="/images/auth/ic-logo-login.png"
         alt="Cozsweet"
@@ -59,17 +59,17 @@ export function AuthFacebookPanel({
         style={{ width: "auto", height: "auto" }}
         priority
       />
-      <div className="min-h-[var(--page-section-gap,var(--spacing-lg))] flex-[1_1_0]" />
+      <div className="min-h-(--page-section-gap,var(--spacing-lg)) flex-[1_1_0]" />
 
       <button
         type="button"
-        className="mt-md inline-flex min-h-[var(--auth-field-height)] w-full cursor-pointer items-center justify-center gap-md rounded-full border-0 bg-auth-surface px-lg text-[var(--responsive-body)] font-semibold text-auth-text-primary shadow-[0_2px_6px_rgba(0,0,0,0.06)] transition-[filter,transform,opacity] duration-150 enabled:hover:brightness-[0.97] enabled:active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60"
+        className="mt-md inline-flex min-h-(--auth-field-height) w-full cursor-pointer items-center justify-center gap-md rounded-full border-0 bg-auth-surface px-lg text-(length:--responsive-body) font-semibold text-auth-text-primary shadow-[0_2px_6px_rgba(0,0,0,0.06)] transition-[filter,transform,opacity] duration-150 enabled:hover:brightness-[0.97] enabled:active:scale-98 disabled:cursor-not-allowed disabled:opacity-60"
         onClick={() => handleFacebook()}
         disabled={isLoading}
       >
         {isLoading ? (
           <span
-            className="inline-block size-[var(--responsive-spinner-size,18px)] flex-none animate-spin rounded-full border-2 border-solid border-facebook-blue border-r-transparent border-b-transparent border-l-transparent"
+            className="inline-block size-(--responsive-spinner-size,18px) flex-none animate-spin rounded-full border-2 border-solid border-facebook-blue border-r-transparent border-b-transparent border-l-transparent"
             aria-hidden="true"
           />
         ) : (
@@ -87,13 +87,13 @@ export function AuthFacebookPanel({
 
       <button
         type="button"
-        className="self-center border-0 bg-transparent py-md text-[var(--responsive-body)] text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
+        className="self-center border-0 bg-transparent py-md text-(length:--responsive-body) text-auth-text-primary underline underline-offset-[3px] transition-opacity duration-150 hover:opacity-80"
         onClick={() => setShowOptions(true)}
       >
         Other Sign In Options
       </button>
 
-      <div className="min-h-[var(--page-section-gap,var(--spacing-lg))] flex-[1_1_0]" />
+      <div className="min-h-(--page-section-gap,var(--spacing-lg)) flex-[1_1_0]" />
 
       <AuthErrorMessage message={errorMessage} />
       <AuthLegalText />

src/app/auth/components/auth-legal-text.tsx

@@ -22,16 +22,16 @@ export function AuthLegalText() {
     <div className="flex w-full items-start gap-sm">
       <button
         type="button"
-        className="mt-0.5 inline-flex size-[var(--auth-legal-checkbox-size)] flex-none cursor-pointer items-center justify-center rounded-full border border-auth-surface bg-auth-surface p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.06)]"
+        className="mt-0.5 inline-flex size-(--auth-legal-checkbox-size) flex-none cursor-pointer items-center justify-center rounded-full border border-auth-surface bg-auth-surface p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.06)]"
         onClick={() => setChecked((c) => !c)}
         aria-label="Agree to terms"
         aria-pressed={checked}
       >
         {checked ? (
-          <span className="block size-[var(--auth-legal-checkbox-inner-size)] rounded-full bg-auth-legal-check" />
+          <span className="block size-(--auth-legal-checkbox-inner-size) rounded-full bg-auth-legal-check" />
         ) : null}
       </button>
-      <p className="m-0 flex-auto text-left text-[var(--responsive-caption)] leading-[1.4] text-auth-text-primary">
+      <p className="m-0 flex-auto text-left text-(length:--responsive-caption) leading-[1.4] text-auth-text-primary">
         I agree to the Cozsweet {" "}
         <a
           href={AppConstants.privacyPolicyUrl}

src/app/auth/components/auth-other-options-dialog.tsx

@@ -43,10 +43,10 @@ export function AuthOtherOptionsDialog({
         style={{ paddingBottom: "calc(var(--spacing-xxl) + var(--app-safe-bottom, 0px))" }}
       >
         <div
-          className="mb-sm h-[var(--auth-drag-handle-height)] w-[var(--auth-drag-handle-width)] self-center rounded-[2px] bg-auth-drag-handle"
+          className="mb-sm h-(--auth-drag-handle-height) w-(--auth-drag-handle-width) self-center rounded-[2px] bg-auth-drag-handle"
           aria-hidden="true"
         />
-        <h2 className="my-sm text-center text-[var(--responsive-page-title)] font-bold text-auth-text-primary">
+        <h2 className="my-sm text-center text-(length:--responsive-page-title) font-bold text-auth-text-primary">
           Other Sign-in Options
         </h2>
 
@@ -90,7 +90,7 @@ export function AuthOtherOptionsDialog({
 
         <button
           type="button"
-          className="self-center border-0 bg-transparent py-md text-[var(--responsive-body)] font-medium text-auth-text-primary no-underline hover:underline"
+          className="self-center border-0 bg-transparent py-md text-(length:--responsive-body) font-medium text-auth-text-primary no-underline hover:underline"
           onClick={onClose}
         >
           Cancel

src/app/auth/components/auth-primary-button.tsx

@@ -32,7 +32,7 @@ export function AuthPrimaryButton({
       type={type}
       disabled={disabled || isLoading}
       className={[
-        "inline-flex min-h-[var(--auth-field-height)] w-full cursor-pointer items-center justify-center gap-sm rounded-full border-0 bg-[linear-gradient(90deg,var(--color-auth-primary-gradient-start),var(--color-auth-primary-gradient-end))] px-lg text-[var(--responsive-body)] font-bold text-white shadow-[0_3px_5px_var(--color-auth-primary-button-shadow)] transition-[filter,transform,opacity] duration-150 active:enabled:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70",
+        "inline-flex min-h-(--auth-field-height) w-full cursor-pointer items-center justify-center gap-sm rounded-full border-0 bg-[linear-gradient(90deg,var(--color-auth-primary-gradient-start),var(--color-auth-primary-gradient-end))] px-lg text-(length:--responsive-body) font-bold text-white shadow-[0_3px_5px_var(--color-auth-primary-button-shadow)] transition-[filter,transform,opacity] duration-150 active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-70",
         className,
       ]
         .filter(Boolean)
@@ -41,7 +41,7 @@ export function AuthPrimaryButton({
     >
       {isLoading ? (
         <span
-          className="inline-block size-[var(--responsive-spinner-size,18px)] animate-spin rounded-full border-2 border-solid border-white border-r-transparent border-b-transparent border-l-transparent"
+          className="inline-block size-(--responsive-spinner-size,18px) animate-spin rounded-full border-2 border-solid border-white border-r-transparent border-b-transparent border-l-transparent"
           aria-hidden="true"
         />
       ) : null}

src/app/auth/components/auth-social-button.tsx

@@ -36,7 +36,7 @@ export function AuthSocialButton({
       type={type}
       disabled={disabled}
       className={[
-        "inline-flex min-h-[var(--auth-social-button-height)] w-full cursor-pointer items-center justify-center gap-md rounded-full border border-auth-border bg-auth-surface px-lg text-[var(--responsive-body)] font-medium text-auth-text-primary transition-[background,opacity] duration-150 enabled:hover:bg-[rgba(0,0,0,0.02)] disabled:cursor-not-allowed disabled:opacity-50",
+        "inline-flex min-h-(--auth-social-button-height) w-full cursor-pointer items-center justify-center gap-md rounded-full border border-auth-border bg-auth-surface px-lg text-(length:--responsive-body) font-medium text-auth-text-primary transition-[background,opacity] duration-150 enabled:hover:bg-[rgba(0,0,0,0.02)] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       ]
         .filter(Boolean)

src/app/auth/components/auth-social-buttons.tsx

@@ -29,7 +29,7 @@ export function AuthSocialButtons({
   googleSlot,
 }: AuthSocialButtonsProps) {
   const buttonClassName =
-    "inline-flex min-h-[var(--button-height)] w-full cursor-pointer items-center justify-center gap-sm rounded-full border border-chat-input-border bg-[rgba(255,255,255,0.04)] px-lg text-[var(--responsive-body)] font-medium text-text-primary transition-colors duration-150 enabled:hover:bg-[rgba(255,255,255,0.08)] disabled:cursor-not-allowed disabled:opacity-50";
+    "inline-flex min-h-(--button-height) w-full cursor-pointer items-center justify-center gap-sm rounded-full border border-chat-input-border bg-[rgba(255,255,255,0.04)] px-lg text-(length:--responsive-body) font-medium text-text-primary transition-colors duration-150 enabled:hover:bg-[rgba(255,255,255,0.08)] disabled:cursor-not-allowed disabled:opacity-50";
   const iconClassName = "inline-flex size-5 items-center justify-center";
 
   return (
@@ -47,7 +47,7 @@ export function AuthSocialButtons({
       </button>
 
       {googleSlot ? (
-        <div className="flex min-h-[var(--button-height)] w-full justify-center">
+        <div className="flex min-h-(--button-height) w-full justify-center">
           {googleSlot}
         </div>
       ) : (

src/app/auth/components/auth-text-field.tsx

@@ -43,7 +43,7 @@ export const AuthTextField = forwardRef<HTMLInputElement, AuthTextFieldProps>(
     ref,
   ) {
     const inputClassName = [
-      "min-h-[var(--auth-field-height)] w-full rounded-full border-0 bg-auth-surface py-0 pl-xxl pr-lg text-[var(--responsive-body)] text-auth-text-primary shadow-[0_3px_5px_var(--color-auth-input-shadow)] outline-none transition-shadow duration-150 placeholder:text-auth-input-placeholder focus:shadow-[0_3px_5px_var(--color-auth-input-shadow),0_0_0_2px_var(--color-accent)] disabled:cursor-not-allowed disabled:opacity-70",
+      "min-h-(--auth-field-height) w-full rounded-full border-0 bg-auth-surface py-0 pl-xxl pr-lg text-(length:--responsive-body) text-auth-text-primary shadow-[0_3px_5px_var(--color-auth-input-shadow)] outline-none transition-shadow duration-150 placeholder:text-auth-input-placeholder focus:shadow-[0_3px_5px_var(--color-auth-input-shadow),0_0_0_2px_var(--color-accent)] disabled:cursor-not-allowed disabled:opacity-70",
       errorMessage
         ? "shadow-[0_3px_5px_rgba(255,77,79,0.18),0_0_0_1px_var(--color-error)] focus:shadow-[0_3px_5px_rgba(255,77,79,0.18),0_0_0_2px_var(--color-error)]"
         : "",
@@ -54,7 +54,7 @@ export const AuthTextField = forwardRef<HTMLInputElement, AuthTextFieldProps>(
     return (
       <label className="flex w-full flex-col gap-xs">
         {label ? (
-          <span className="text-[var(--responsive-caption)] text-text-secondary">
+          <span className="text-(length:--responsive-caption) text-text-secondary">
             {label}
           </span>
         ) : null}
@@ -79,7 +79,7 @@ export const AuthTextField = forwardRef<HTMLInputElement, AuthTextFieldProps>(
           }}
         />
         {errorMessage ? (
-          <span className="text-[var(--responsive-caption)] text-error">
+          <span className="text-(length:--responsive-caption) text-error">
             {errorMessage}
           </span>
         ) : null}